Utilizzo di CKEditor full al posto di standard

Inclusione degli strumenti aggiuntivi per migliorare l'interazione con i campi editor.
This commit is contained in:
Dasc3er 2021-02-23 15:13:38 +01:00
parent 30db43ce30
commit 434ca92bf5
9 changed files with 76 additions and 115 deletions

View File

@ -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

View File

@ -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;
}

View File

@ -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);
let name = input.getAttribute("id");
loadScript(globals.rootdir + "/assets/dist/js/ckeditor/ckeditor.js")
.then(function () {
CKEDITOR.addCss(".cke_editable img { max-width: 100% !important; height: auto !important; }");
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);
});
});
if (window.CKEDITOR && CKEDITOR.status === "loaded") {
$(document).ready(function () {
initCKEditor(input);
})
} else {
waitCKEditor(input);
}
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);
});
}

29
bug.php
View File

@ -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() {
setTimeout(function(){
if(CKEDITOR.instances.body.getData() == ""){
$("#send").prop("disabled", true);
}
else $("#send").prop("disabled", false);
editor.on("change", function() {
setTimeout(function() {
$("#send").prop("disabled", editor.get() === "");
}, 10);
});
CKEDITOR.instances.body.setData( html, function() {});
CKEDITOR.instances.body.on("focus", function() {
if(firstFocus){
CKEDITOR.instances.body.setData("", function() {
CKEDITOR.instances.body.focus();
});
firstFocus = 0;
editor.on("focus", function() {
if (firstFocus) {
editor.set("");
firstFocus = false;
}
});
});

View File

@ -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/*.{js,css}',
config.nodeDirectory + '/ckeditor4-dev/{adapters,lang,skins,plugins,core}/**/*.{js,json,css,png}',
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/**',
])

View File

@ -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;

View File

@ -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>';

View File

@ -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",

View File

@ -33,19 +33,7 @@ class CKEditorHandler implements HandlerInterface
// Generazione del codice HTML
return '
<textarea |attr|>|value|</textarea>';
/*
<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>*/
<textarea |attr|>|value|</textarea>
<script src="'.base_path().'/assets/dist/js/ckeditor/ckeditor.js"></script>';
}
}