TinyMCE toolbar

This commit is contained in:
Fred Tempez 2023-11-11 17:55:21 +01:00
parent 46d47529b0
commit 7e3d4edff7

View File

@ -7,65 +7,54 @@
/** /**
* Quand tinyMCE est invoqué hors connexion, initialiser privateKey * Quand tinyMCE est invoqué hors connexion, initialiser privateKey
*/ */
if (typeof (privateKey) == "undefined") { if (typeof (privateKey) == 'undefined') {
var privateKey = null; var privateKey = null;
}; };
tinymce.init({ tinymce.init({
// Classe où appliquer l"éditeur // Classe où appliquer l'éditeur
selector: ".editorWysiwyg", selector: ".editorWysiwyg",
// Aperçu dans le pied de page // Aperçu dans le pied de page
setup: function (ed) { setup: function (ed) {
ed.on("change", function (e) { ed.on('change', function (e) {
if (ed.id === "themeFooterText") { if (ed.id === 'themeFooterText') {
$("#footerText").html(tinyMCE.get("themeFooterText").getContent()); $("#footerText").html(tinyMCE.get('themeFooterText').getContent());
} }
if (ed.id === "themeHeaderText") { if (ed.id === 'themeHeaderText') {
$("#featureContent").html(tinyMCE.get("themeHeaderText").getContent()); $("#featureContent").html(tinyMCE.get('themeHeaderText').getContent());
} }
}); });
}, },
// Langue // Langue
language: getCookie("ZWII_UI") === null ? "fr_FR" : getCookie("ZWII_UI"), language: getCookie('ZWII_UI') === null ? "fr_FR" : getCookie('ZWII_UI'),
// Plugins // Plugins
plugins: "advlist anchor autolink autoresize autosave codemirror contextmenu colorpicker fullscreen hr image imagetools link lists media paste searchreplace tabfocus table template textcolor visualblocks nonbreaking emoticons charmap", plugins: "advlist anchor autolink autoresize autosave codemirror contextmenu colorpicker fullscreen hr image imagetools link lists media paste searchreplace tabfocus table template textcolor visualblocks nonbreaking emoticons charmap",
// Contenu du menu // Contenu du menu
menu: { menu: {
edit: { file: { title: 'File', items: 'newdocument restoredraft' },
title: "Edit", edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
items: "undo redo | selectall searchreplace | cut copy paste pastetext" view: { title: 'View', items: 'code | visualaid visualblocks | fullscreen' },
}, insert: { title: 'Insert', items: 'image link media pageembed template inserttable | charmap emoticons hr | nonbreaking anchor' },
insert: { //format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | removeformat' },
title: "Insert", tools: { title: 'Tools', items: '' },
items: "template | nonbreaking hr charmap anchor" table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
}, help: { title: 'Help', items: 'help' }
format: {
title: "Format",
items: " italic bold underline strikethrough superscript subscript | | formats | removeformat"
},
tools: {
title: "Tools",
items: ""
},
table: {
title: "Table",
items: "inserttable tableprops deletetable | cell row column"
},
}, },
// Contenu de la barre d'outils // Contenu de la barre d'outils
toolbar: [ toolbar: [
"undo redo | fontsizeselect | bold italic forecolor backcolor | h1 h2 h3 | | bullist numlist | alignleft aligncenter alignright alignjustify | outdent indent removeformat | link image media |fullscreen", "bold italic underline forecolor backcolor | h1 h2 h3 | | bullist numlist | alignleft aligncenter alignright alignjustify | outdent indent removeformat | link image media |fullscreen",
], ],
toolbar_sticky: true, toolbar_sticky: true,
fontsize_formats: "8pt 9pt 10pt 11pt 12pt 14pt 18pt 24pt 30pt 36pt 48pt 60pt 72pt 96pt", fontsize_formats:
"8pt 9pt 10pt 11pt 12pt 14pt 18pt 24pt 30pt 36pt 48pt 60pt 72pt 96pt",
theme: "silver", theme: "silver",
max_height: 600, max_height: 600,
// CodeMirror // CodeMirror
codemirror: { codemirror: {
indentOnInit: true, // Whether or not to indent code on init. indentOnInit: true, // Whether or not to indent code on init.
path: "codemirror", // Path to CodeMirror distribution path: 'codemirror', // Path to CodeMirror distribution
saveCursorPosition: false, // Insert caret marker saveCursorPosition: false, // Insert caret marker
config: { // CodeMirror config object config: { // CodeMirror config object
fullscreen: true, fullscreen: true,
/*mode: 'application/x-httpd-php',*/ /*mode: 'application/x-httpd-php',*/
lineNumbers: true, lineNumbers: true,
@ -73,57 +62,44 @@ tinymce.init({
mode: "htmlmixed" mode: "htmlmixed"
}, },
jsFiles: [ jsFiles: [
"mode/php/php.js", 'mode/php/php.js',
"mode/css/css.js", 'mode/css/css.js',
"mode/htmlmixed/htmlmixed.js", 'mode/htmlmixed/htmlmixed.js',
"mode/htmlembedded/htmlembedded.js", 'mode/htmlembedded/htmlembedded.js',
"mode/javascript/javascript.js", 'mode/javascript/javascript.js',
"mode/xml/xml.js", 'mode/xml/xml.js',
"addon/search/searchcursor.js", 'addon/search/searchcursor.js',
"addon/search/search.js", 'addon/search/search.js',
], ],
/* /*
cssFiles: [ cssFiles: [
'theme/cobalt.css', 'theme/cobalt.css',
],*/ ],*/
width: 800, // Default value is 800 width: 800, // Default value is 800
height: 500 // Default value is 550 height: 500 // Default value is 550
}, },
// Cibles de la target // Cibles de la target
target_list: [{ target_list: [
title: 'None', { title: 'None', value: '' },
value: '' { title: 'Nouvel onglet', value: '_blank' }
},
{
title: 'Nouvel onglet',
value: '_blank'
}
], ],
// Target pour lightbox // Target pour lightbox
rel_list: [{ rel_list: [
title: 'None', { title: 'None', value: '' },
value: '' { title: 'Une popup (Lity)', value: 'data-lity' },
}, { title: 'Une galerie d\'images (SimpleLightbox)', value: 'gallery' }
{
title: 'Une popup (Lity)',
value: 'data-lity'
},
{
title: 'Une galerie d\'images (SimpleLightbox)',
value: 'gallery'
}
], ],
// Titre des image // Titre des image
image_title: true, image_title: true,
// Pages internes // Pages internes
link_list: baseUrl + "core/vendor/tinymce/links.php", link_list: baseUrl + "core/vendor/tinymce/links.php",
// Contenu du menu contextuel // Contenu du menu contextuel
contextmenu: "inserttable | cell row column deletetable", contextmenu: "selectall searchreplace | hr | media image link anchor nonbreaking | insertable cell row column deletetable",
// Fichiers CSS à intégrer à l'éditeur // Fichiers CSS à intégrer à l'éditeur
content_css: [ content_css: [
baseUrl + "core/layout/common.css", baseUrl + "core/layout/common.css",
baseUrl + "core/vendor/tinymce/content.css", baseUrl + "core/vendor/tinymce/content.css",
baseUrl + "site/data/" + getCookie('ZWII_SITE_CONTENT') === null ? "home" : "site/data/" + getCookie('ZWII_SITE_CONTENT') + "/theme.css", baseUrl + "site/data/theme.css",
baseUrl + "site/data/custom.css" baseUrl + "site/data/custom.css"
], ],
// Classe à ajouter à la balise body dans l'iframe // Classe à ajouter à la balise body dans l'iframe
@ -155,7 +131,7 @@ tinymce.init({
// Urls absolues // Urls absolues
relative_urls: true, relative_urls: true,
// Conversion des URLs // Conversion des URLs
convert_urls: true, convert_urls: false,
// Url de base // Url de base
document_base_url: baseUrl, document_base_url: baseUrl,
// Gestionnaire de fichiers // Gestionnaire de fichiers
@ -167,72 +143,32 @@ tinymce.init({
// Contenu du bouton insérer // Contenu du bouton insérer
insert_button_items: "anchor hr table", insert_button_items: "anchor hr table",
// Contenu du bouton formats // Contenu du bouton formats
style_formats: [{ /**
title: "Headers", style_formats: [
items: [{ {
title: "Header 1", title: "Headers", items: [
format: "h1" { title: "Header 1", format: "h1" },
}, { title: "Header 2", format: "h2" },
{ { title: "Header 3", format: "h3" },
title: "Header 2", { title: "Header 4", format: "h4" }
format: "h2"
},
{
title: "Header 3",
format: "h3"
},
{
title: "Header 4",
format: "h4"
},
{
title: "Header 5",
format: "h5"
},
{
title: "Header 6",
format: "h6"
}
] ]
}, },
{ {
title: "Blocks", title: "Blocks", items: [
items: [{ { title: "Paragraph", format: "p" },
title: "Paragraph", { title: "Blockquote", format: "blockquote" },
format: "p" { title: "Div", format: "div" },
}, { title: "Pre", format: "pre" }
{
title: "Citation",
format: "blockquote"
},
{
title: "Div",
format: "div"
},
{
title: "Pre",
format: "pre"
}
] ]
} }
], ],*/
// Templates // Templates
templates: [{ templates: [
title: "Lien de retour",
url: baseUrl + "core/vendor/tinymce/templates/back_home.html",
description: "Insère un lien de retour à l'accueil de la plate-forme."
},
{
title: "Lien de désinscription",
url: baseUrl + "core/vendor/tinymce/templates/unsuscribe.html",
description: "Insère un lien de désinscription."
},
{ {
title: "Bloc de texte", title: "Bloc de texte",
url: baseUrl + "core/vendor/tinymce/templates/block.html", url: baseUrl + "core/vendor/tinymce/templates/block.html",
description: "Bloc de texte avec un titre." description: "Bloc de texte avec un titre."
}, },
{ {
title: "Effet accordéon", title: "Effet accordéon",
url: baseUrl + "core/vendor/tinymce/templates/accordion.html", url: baseUrl + "core/vendor/tinymce/templates/accordion.html",
@ -241,37 +177,37 @@ tinymce.init({
{ {
title: "Grille symétrique : 6 - 6", title: "Grille symétrique : 6 - 6",
url: baseUrl + "core/vendor/tinymce/templates/col6.html", url: baseUrl + "core/vendor/tinymce/templates/col6.html",
description: "Grille adaptative sur 12 colonnes, en colonne sur mobile." description: "Grille adaptative sur 12 colonnes, sur mobile elles passent les unes en dessous des autres."
}, },
{ {
title: "Grille symétrique : 4 - 4 - 4", title: "Grille symétrique : 4 - 4 - 4",
url: baseUrl + "core/vendor/tinymce/templates/col4.html", url: baseUrl + "core/vendor/tinymce/templates/col4.html",
description: "Grille adaptative sur 12 colonnes, en colonne sur mobile.." description: "Grille adaptative sur 12 colonnes, sur mobile elles passent les unes en dessous des autres."
}, },
{ {
title: "Grille symétrique : 3 - 3 - 3 - 3", title: "Grille symétrique : 3 - 3 - 3 - 3",
url: baseUrl + "core/vendor/tinymce/templates/col3.html", url: baseUrl + "core/vendor/tinymce/templates/col3.html",
description: "Grille adaptative sur 12 colonnes, en colonne sur mobile." description: "Grille adaptative sur 12 colonnes, sur mobile elles passent les unes en dessous des autres."
}, },
{ {
title: "Grille asymétrique : 4 - 8", title: "Grille asymétrique : 4 - 8",
url: baseUrl + "core/vendor/tinymce/templates/col4-8.html", url: baseUrl + "core/vendor/tinymce/templates/col4-8.html",
description: "Grille adaptative sur 12 colonnes, en colonne sur mobile." description: "Grille adaptative sur 12 colonnes, sur mobile elles passent les unes en dessous des autres."
}, },
{ {
title: "Grille asymétrique : 8 - 4", title: "Grille asymétrique : 8 - 4",
url: baseUrl + "core/vendor/tinymce/templates/col8-4.html", url: baseUrl + "core/vendor/tinymce/templates/col8-4.html",
description: "Grille adaptative sur 12 colonnes, en colonne sur mobile." description: "Grille adaptative sur 12 colonnes, sur mobile elles passent les unes en dessous des autres."
}, },
{ {
title: "Grille asymétrique : 2 - 10", title: "Grille asymétrique : 2 - 10",
url: baseUrl + "core/vendor/tinymce/templates/col2-10.html", url: baseUrl + "core/vendor/tinymce/templates/col2-10.html",
description: "Grille adaptative sur 12 colonnes, en colonne sur mobile." description: "Grille adaptative sur 12 colonnes, sur mobile elles passent les unes en dessous des autres."
}, },
{ {
title: "Grille asymétrique : 10 - 2", title: "Grille asymétrique : 10 - 2",
url: baseUrl + "core/vendor/tinymce/templates/col10-2.html", url: baseUrl + "core/vendor/tinymce/templates/col10-2.html",
description: "Grille adaptative sur 12 colonnes, en colonne sur mobile." description: "Grille adaptative sur 12 colonnes, sur mobile elles passent les unes en dessous des autres."
} }
] ]
}); });
@ -293,9 +229,7 @@ tinymce.init({
var id_alarm = "#blogArticleContentAlarm" var id_alarm = "#blogArticleContentAlarm"
var contentLength = 0; var contentLength = 0;
ed.on("keydown", function (e) { ed.on("keydown", function (e) {
contentLength = ed.getContent({ contentLength = ed.getContent({ format: 'text' }).length;
format: 'text'
}).length;
if (contentLength > maxlength) { if (contentLength > maxlength) {
$(id_alarm).html("Vous avez atteint le maximum de " + maxlength + " caractères ! "); $(id_alarm).html("Vous avez atteint le maximum de " + maxlength + " caractères ! ");
if (e.keyCode != 8 && e.keyCode != 46) { if (e.keyCode != 8 && e.keyCode != 46) {
@ -303,19 +237,19 @@ tinymce.init({
e.stopPropagation(); e.stopPropagation();
return false; return false;
} }
} else { }
else {
if (maxlength - contentLength < alarmCaraMin) { if (maxlength - contentLength < alarmCaraMin) {
$(id_alarm).html((maxlength - contentLength) + " caractères restants"); $(id_alarm).html((maxlength - contentLength) + " caractères restants");
} else { }
else {
$(id_alarm).html(" "); $(id_alarm).html(" ");
} }
} }
}); });
// Limitation y compris lors d'un copier/coller // Limitation y compris lors d'un copier/coller
ed.on("paste", function (e) { ed.on("paste", function (e) {
contentLeng = ed.getContent({ contentLeng = ed.getContent({ format: 'text' }).length - 16;
format: 'text'
}).length - 16;
var data = e.clipboardData.getData('Text'); var data = e.clipboardData.getData('Text');
if (data.length > (maxlength - contentLeng)) { if (data.length > (maxlength - contentLeng)) {
$(id_alarm).html("Vous alliez dépasser le maximum de " + maxlength + " caractères ! "); $(id_alarm).html("Vous alliez dépasser le maximum de " + maxlength + " caractères ! ");
@ -323,7 +257,8 @@ tinymce.init({
} else { } else {
if (maxlength - contentLeng < alarmCaraMin) { if (maxlength - contentLeng < alarmCaraMin) {
$(id_alarm).html((maxlength - contentLeng - data.length) + " caractères restants"); $(id_alarm).html((maxlength - contentLeng - data.length) + " caractères restants");
} else { }
else {
$(id_alarm).html(" "); $(id_alarm).html(" ");
} }
return true; return true;
@ -346,7 +281,7 @@ tinymce.init({
content_css: [ content_css: [
baseUrl + "core/layout/common.css", baseUrl + "core/layout/common.css",
baseUrl + "core/vendor/tinymce/content.css", baseUrl + "core/vendor/tinymce/content.css",
baseUrl + "site/data/home/theme.css", baseUrl + "site/data/theme.css",
baseUrl + "site/data/custom.css" baseUrl + "site/data/custom.css"
], ],
// Classe à ajouter à la balise body dans l'iframe // Classe à ajouter à la balise body dans l'iframe