Utilizzo di CKEditor full al posto di standard

Inclusione degli strumenti aggiuntivi per migliorare l'interazione con i campi editor.

assets/src/js/functions/functions.js

@@ -705,58 +705,6 @@ function hideTableColumn(table, column) {
     }
 }
 
-/**
- * Funzione per caricare un file JavaScript ed eseguire delle operazioni al completamento.
- *
- * @param src
- * @param async
- * @param defer
- * @returns {Promise<unknown>}
- */
-function loadScript(src, async = true, defer = true) {
-    if (!globals.dynamicScripts) {
-        globals.dynamicScripts = {};
-    }
-
-    return new Promise((resolve, reject) => {
-        // Caricamento già completato
-        if (globals.dynamicScripts[src] && globals.dynamicScripts[src] === "done") {
-            resolve();
-            return;
-        }
-
-        // Aggiunta del resolve all'elenco per lo script
-        if (!globals.dynamicScripts[src]) {
-            globals.dynamicScripts[src] = [];
-        }
-        globals.dynamicScripts[src].push(resolve);
-
-        // Ricerca dello script esistente
-        let found = Array.prototype.slice.call(document.scripts).find(el => el.getAttribute("src") === src);
-        if (found) {
-            return;
-        }
-
-        // Caricamento dinamico dello script
-        const script = document.createElement('script');
-        script.type = 'text/javascript';
-        script.async = async;
-        script.defer = defer;
-
-        script.onload = function () {
-            for (resolve of globals.dynamicScripts[src]) {
-                resolve();
-            }
-
-            globals.dynamicScripts[src] = "done";
-        }
-
-        script.onerror = reject;
-        script.src = src;
-        document.head.append(script);
-    })
-}
-
 /**
  * Funzione per aggiungere in un *endpoint* il contenuto di uno specifico *template*, effettuando delle sostituzioni di base e inizializzando i campi aggiunti.
  * @param endpoint_selector

assets/src/js/functions/input.js

@@ -269,7 +269,13 @@ Input.prototype.get = function () {
  * @returns {Input}
  */
 Input.prototype.set = function (value) {
-    this.element.val(value).trigger("change");
+    // Gestione dei valori per l'editor
+    if (this.element.hasClass("editor-input") && typeof CKEDITOR !== 'undefined') {
+        const name = this.element.attr("id");
+        CKEDITOR.instances[name].setData(value);
+    } else {
+        this.element.val(value).trigger("change");
+    }
 
     return this;
 }

assets/src/js/functions/textarea.js

@@ -26,35 +26,58 @@ function initTextareaInput(input) {
     return true;
 }
 
+function waitCKEditor(input) {
+    setTimeout(function () {
+        initEditorInput(input);
+    }, 100);
+}
+
 /**
  * Funzione per l'inizializzazione dei campi editor.
  * @param input
  */
 function initEditorInput(input) {
-    let $input = $(input);
+    if (window.CKEDITOR && CKEDITOR.status === "loaded") {
-    let name = input.getAttribute("id");
+        $(document).ready(function () {
-
+            initCKEditor(input);
-    loadScript(globals.rootdir + "/assets/dist/js/ckeditor/ckeditor.js")
+        })
-        .then(function () {
+    } else {
-            CKEDITOR.addCss(".cke_editable img { max-width: 100% !important; height: auto !important; }");
+        waitCKEditor(input);
-
+    }
-            CKEDITOR.replace(name, {
-                toolbar: globals.ckeditorToolbar,
-                language: globals.locale,
-                scayt_autoStartup: true,
-                scayt_sLang: globals.full_locale,
-                disableNativeSpellChecker: false,
-            });
-
-            CKEDITOR.instances[name].on("key", function (event) {
-                $input.trigger("keydown", event.data);
-                $input.trigger("keyup", event.data);
-            });
-
-            CKEDITOR.instances[name].on("change", function (event) {
-                $input.trigger("change", event);
-            });
-        });
 
     return true;
 }
+
+function initCKEditor(input) {
+    let $input = $(input);
+    let name = input.getAttribute("id");
+
+    // Controllo su istanza già esistente
+    let instance = CKEDITOR.instances[name];
+    if (instance) {
+        return;
+    }
+
+    // Avvio di CKEditor
+    CKEDITOR.replace(name, {
+        toolbar: globals.ckeditorToolbar,
+        language: globals.locale,
+        scayt_autoStartup: true,
+        scayt_sLang: globals.full_locale,
+        disableNativeSpellChecker: false,
+    });
+
+    // Gestione di eventi noti
+    CKEDITOR.instances[name].on("key", function (event) {
+        $input.trigger("keydown", event.data);
+        $input.trigger("keyup", event.data);
+    });
+
+    CKEDITOR.instances[name].on("change", function (event) {
+        $input.trigger("change", event);
+    });
+
+    CKEDITOR.instances[name].on("focus", function (event) {
+        $input.trigger("focus", event);
+    });
+}

bug.php

@@ -167,7 +167,9 @@ echo '
 </div>
 
 <script>
-    $(document).ready(function(){
+    $(document).ready(function() {
+        init();
+
         var html = "<p>'.tr('Se hai riscontrato un bug ricordati di specificare').':</p>" +
         "<ul>" +
             "<li>'.tr('Modulo esatto (o pagina relativa) in cui questi si è verificato').';</li>" +
@@ -177,25 +179,20 @@ echo '
         "<p>'.tr('Ti ringraziamo per il tuo contributo').',<br>" +
         "'.tr('Lo staff di OSM').'</p>";
 
-        var firstFocus = 1;
+        var firstFocus = true;
+        let editor = input("body");
+        editor.set(html);
 
-        CKEDITOR.instances.body.on("key", function() {
+        editor.on("change", function() {
-            setTimeout(function(){
+            setTimeout(function() {
-                if(CKEDITOR.instances.body.getData() == ""){
+                $("#send").prop("disabled", editor.get() === "");
-                    $("#send").prop("disabled", true);
-                }
-                else $("#send").prop("disabled", false);
             }, 10);
         });
 
-        CKEDITOR.instances.body.setData( html, function() {});
+        editor.on("focus", function() {
-
+            if (firstFocus) {
-        CKEDITOR.instances.body.on("focus", function() {
+                editor.set("");
-            if(firstFocus){
+                firstFocus = false;
-                CKEDITOR.instances.body.setData("", function() {
-                    CKEDITOR.instances.body.focus();
-                });
-                firstFocus = 0;
             }
         });
     });

gulpfile.js

@@ -274,8 +274,8 @@ function srcFonts() {
 
 function ckeditor() {
     return gulp.src([
-        config.nodeDirectory + '/ckeditor4/{adapters,lang,skins,plugins}/**/*.{js,json,css,png}',
+        config.nodeDirectory + '/ckeditor4-dev/{adapters,lang,skins,plugins,core}/**/*.{js,json,css,png}',
-        config.nodeDirectory + '/ckeditor4/*.{js,css}',
+        config.nodeDirectory + '/ckeditor4-dev/*.{js,css}',
     ])
         .pipe(gulp.dest(config.production + '/' + config.paths.js + '/ckeditor'));
 }
@@ -345,7 +345,7 @@ function i18n() {
         config.nodeDirectory + '/**/{i18n,lang,locale,locales}/*.{js,json}',
         config.development + '/' + config.paths.js + '/i18n/**/*.{js,json}',
         '!' + config.nodeDirectory + '/**/{src,plugins}/**',
-        '!' + config.nodeDirectory + '/ckeditor4/**',
+        '!' + config.nodeDirectory + '/ckeditor4-dev/**',
         '!' + config.nodeDirectory + '/summernote/**',
         '!' + config.nodeDirectory + '/jquery-ui/**',
     ])

modules/interventi/actions.php

@@ -140,7 +140,6 @@ switch (post('op')) {
             $idtipointervento = post('idtipointervento');
             $idsede_partenza = post('idsede_partenza');
             $idsede_destinazione = post('idsede_destinazione');
-            $richiesta = post('richiesta');
 
             if (post('idclientefinale')) {
                 $intervento->idclientefinale = post('idclientefinale');
@@ -152,7 +151,7 @@ switch (post('op')) {
 
             $intervento->id_preventivo = post('idpreventivo');
             $intervento->id_contratto = post('idcontratto');
-            $intervento->richiesta = $richiesta;
+            $intervento->richiesta = post('richiesta_add');
             $intervento->idsede_destinazione = $idsede_destinazione;
             $intervento->data_scadenza = $data_scadenza;
 

modules/interventi/add.php

@@ -190,7 +190,7 @@ echo '
 
     <div class="row">
         <div class="col-md-12">
-            {[ "type": "ckeditor", "label": "'.tr('Richiesta').'", "name": "richiesta", "required": 1, "value": "'.$richiesta.'", "extra": "style=\'max-height:80px;\'" ]}
+            {[ "type": "ckeditor", "label": "'.tr('Richiesta').'", "name": "richiesta_add", "required": 1, "value": "'.$richiesta.'", "extra": "style=\'max-height:80px;\'" ]}
         </div>
     </div>';
 
@@ -332,7 +332,7 @@ if (!empty($id_intervento)) {
        input("idzona").disable();
        input("idtipointervento").disable();
        input("idstatointervento").disable();
-       input("richiesta").disable();
+       input("richiesta_add").disable();
        input("data_richiesta").disable();
     });
 </script>';

package.json

@@ -9,7 +9,7 @@
         "bootstrap-colorpicker": "2.5.1",
         "bootstrap-daterangepicker": "^2.1.25",
         "chart.js": "^2.7.0",
-        "ckeditor4": "^4.14.1",
+        "ckeditor4-dev": "^4.14.1",
         "components-jqueryui": "^1.12.1",
         "datatables.net-bs": "^1.10.15",
         "datatables.net-buttons-bs": "^1.3.1",

src/HTMLBuilder/Handler/CKEditorHandler.php

@@ -33,19 +33,7 @@ class CKEditorHandler implements HandlerInterface
 
         // Generazione del codice HTML
         return '
-    <textarea |attr|>|value|</textarea>';
+    <textarea |attr|>|value|</textarea>
-        /*
+    <script src="'.base_path().'/assets/dist/js/ckeditor/ckeditor.js"></script>';
-    <script src="'.base_path().'/assets/dist/js/ckeditor/ckeditor.js"></script>
-    <script>
-        CKEDITOR.addCss(".cke_editable img { max-width: 100% !important; height: auto !important; }");
-
-        CKEDITOR.replace("'.prepareToField($values['id']).'", {
-            toolbar: globals.ckeditorToolbar,
-            language: globals.locale,
-            scayt_autoStartup: true,
-            scayt_sLang: globals.full_locale,
-            disableNativeSpellChecker: false,
-        });
-    </script>*/
     }
 }