ver: 1.1.21:

- Lista dei Cataloghi
- Gestione Cataloghi in base alla configurazione

src/components/CMyEditor/CMyEditor.ts

@@ -34,12 +34,18 @@ export default defineComponent({
       required: false,
       default: false,
     },
+    maxlength: {
+      type: Number,
+      required: false,
+      default: 0,
+    }
   },
   setup(props, { emit }) {
     const $q = useQuasar()
 
     const editorRef = ref(<any>null)
     const editor = ref('')
+    const characterCount = ref(0)
 
     //const myvalue = toRef(props, 'value')
     const myvalue = ref('')
@@ -126,8 +132,16 @@ export default defineComponent({
 
     })
 
+    function getTextLength(html: string) {
+      // Crea un elemento temporaneo per convertire HTML in testo
+      const div = document.createElement('div');
+      div.innerHTML = html; // Imposta l'HTML
+      return div.innerText.length; // Restituisce la lunghezza del testo
+    }
+
     function changeval(newval: any) {
       // console.log('myEditor: changeval', newval)
+      characterCount.value = getTextLength(newval)
       emit('update:value', newval)
     }
 
@@ -186,6 +200,8 @@ export default defineComponent({
         myvalue.value = props.value
 
       showtools.value = tools.getCookie('showtools', '0') === '1'
+
+      characterCount.value = getTextLength(myvalue.value)
     }
 
     function onPaste (evt: any) {
@@ -228,6 +244,7 @@ export default defineComponent({
       onPaste,
       editorRef,
       showtools,
+      characterCount,
     }
   }
 })

src/components/CMyEditor/CMyEditor.vue

@@ -1,23 +1,30 @@
 <template>
   <div>
     <q-card class="dialog_card">
-      <q-toolbar v-if="showButtons" class="bg-primary text-white" style="min-height: 30px;">
-        <q-toolbar-title>
-          Editor
-        </q-toolbar-title>
-        <q-btn flat round color="white" icon="close" v-close-popup @click="showeditor=false"></q-btn>
+      <q-toolbar
+        v-if="showButtons"
+        class="bg-primary text-white"
+        style="min-height: 30px"
+      >
+        <q-toolbar-title> Editor </q-toolbar-title>
+        <q-btn
+          flat
+          round
+          color="white"
+          icon="close"
+          v-close-popup
+          @click="showeditor = false"
+        ></q-btn>
       </q-toolbar>
-      <q-card-section class="inset-shadow" style="padding: 4px !important;">
-
+      <q-card-section class="inset-shadow" style="padding: 4px !important">
         <CTitleBanner v-if="title" :title="title"></CTitleBanner>
-        <form
-          autocapitalize="off"
-          autocomplete="off"
-          spellcheck="false"
-          >
-
-          <q-toggle v-model="showtools" :label="showtools ? $t('editor.hidetool') : $t('editor.showtool')" @click="tools.setCookie('showtools', showtools ? '1' : '0')"></q-toggle>
-          <br>
+        <form autocapitalize="off" autocomplete="off" spellcheck="false">
+          <q-toggle
+            v-model="showtools"
+            :label="showtools ? $t('editor.hidetool') : $t('editor.showtool')"
+            @click="tools.setCookie('showtools', showtools ? '1' : '0')"
+          ></q-toggle>
+          <br />
           <q-btn v-if="showtools" rounded size="sm" color="primary">
             <q-icon name="colorize" class="cursor-pointer">
               <q-popup-proxy>
@@ -38,17 +45,35 @@
             @update:model-value="changeval"
             @paste="onPaste"
             @keyup.enter.stop
-            v-model="myvalue">
+            v-model="myvalue"
+          >
           </q-editor>
+          <div v-if="maxlength" class="text-gray text-italic">Caratteri: {{ characterCount }} / {{ maxlength }}</div>
         </form>
       </q-card-section>
       <q-card-actions v-if="showButtons" align="center">
-        <q-btn v-if="canModify" :label="$t('dialog.ok')" color="primary" @click="saveval"></q-btn>
-        <q-btn v-if="canModify" flat :label="$t('dialog.cancel')" color="primary" v-close-popup @click="annulla"></q-btn>
-        <q-btn v-if="!canModify" :label="$t('dialog.ok')" color="primary" v-close-popup></q-btn>
+        <q-btn
+          v-if="canModify"
+          :label="$t('dialog.ok')"
+          color="primary"
+          @click="saveval"
+        ></q-btn>
+        <q-btn
+          v-if="canModify"
+          flat
+          :label="$t('dialog.cancel')"
+          color="primary"
+          v-close-popup
+          @click="annulla"
+        ></q-btn>
+        <q-btn
+          v-if="!canModify"
+          :label="$t('dialog.ok')"
+          color="primary"
+          v-close-popup
+        ></q-btn>
       </q-card-actions>
     </q-card>
-
   </div>
 </template>