- aggiornamenti guida RIS, FAQ

- Editor HTML aggiunto CSS e Script
- Statistiche
- CRISBalanceBar
- Inizio Sync... (ma disattivato)

src/components/CMyEditor/CMyEditor.ts

@@ -1,7 +1,7 @@
 import { tools } from '@tools';
 import { CTitleBanner } from '../CTitleBanner';
 
-import { defineComponent, onMounted, ref, toRef, watch } from 'vue';
+import { defineComponent, onMounted, onUnmounted, ref, toRef, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 
@@ -24,6 +24,11 @@ export default defineComponent({
       required: false,
       default: '',
     },
+    customStyles: {
+      type: String,
+      required: false,
+      default: '',
+    },
     showButtons: {
       type: Boolean,
       required: false,
@@ -62,6 +67,21 @@ export default defineComponent({
     const myvalue = ref('');
     const mycolor = ref('');
 
+    const editorId = ref(
+      `editor-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
+    );
+    const styleElement = ref<HTMLStyleElement | null>(null);
+
+    // Watch per applicare stili personalizzati
+    watch(
+      () => props.customStyles,
+      (newStyles) => {
+        if (newStyles && editorRef.value) {
+          applyCustomStyles(newStyles);
+        }
+      }
+    );
+
     const myfonts = ref({
       arial: 'Arial',
       arial_black: 'Arial Black',
@@ -127,6 +147,45 @@ export default defineComponent({
       }
     );
 
+    // Funzione per applicare stili custom
+    // ALTERNATIVA: Se vuoi applicare gli stili solo al contenuto dell'editor (più sicuro)
+
+    function applyCustomStyles(styles: string) {
+      // console.log('Applying custom styles:', styles);
+
+      // Rimuovi style precedente
+      if (styleElement.value && styleElement.value.parentNode) {
+        styleElement.value.parentNode.removeChild(styleElement.value);
+      }
+
+      if (!styles) return;
+
+      // Crea style element nel HEAD
+      styleElement.value = document.createElement('style');
+      styleElement.value.setAttribute('type', 'text/css');
+      styleElement.value.setAttribute('data-editor-styles', editorId.value);
+
+      // CSS con selettori super specifici usando l'ID univoco
+      const css = `
+    [data-editor-id="${editorId.value}"] .q-editor__content {
+      ${styles}
+    }
+
+    [data-editor-id="${editorId.value}"] .q-editor__content * {
+      ${styles}
+    }
+
+    /* Selettori per classi custom nel contenuto */
+    [data-editor-id="${editorId.value}"] .q-editor__content .prova1 {
+      color: red !important;
+    }
+  `;
+
+      styleElement.value.textContent = css;
+      document.head.appendChild(styleElement.value);
+
+      // console.log('Style injected:', css);
+    }
     function getTextLength(html: string) {
       // Crea un elemento temporaneo per convertire HTML in testo
       const div = document.createElement('div');
@@ -197,6 +256,12 @@ export default defineComponent({
 
       characterCount.value = getTextLength(myvalue.value);
 
+      if (props.customStyles) {
+        setTimeout(() => {
+          applyCustomStyles(props.customStyles);
+        }, 300);
+      }
+
       if (props.startInCodeMode) {
         // Attiva modalità codice di default
         setTimeout(() => {
@@ -231,6 +296,13 @@ export default defineComponent({
 
     onMounted(mounted);
 
+    // Cleanup quando componente viene distrutto
+    onUnmounted(() => {
+      if (styleElement.value && styleElement.value.parentNode) {
+        styleElement.value.parentNode.removeChild(styleElement.value);
+      }
+    });
+
     return {
       myfonts,
       toolbarcomp,
@@ -248,6 +320,8 @@ export default defineComponent({
       showtools,
       characterCount,
       t,
+      applyCustomStyles,
+      editorId,
     };
   },
 });