29/09/2024, 17:43:59
Une option fait cruellement défaut dans l'éditeur de pages Wysiwyg MicroTiny : pouvoir changer la couleur du texte.
Avant, on pouvait choisir TinyMce comme nouvel éditeur, qui est plus complet. Mais ça n'a plus l'air possible. (J'ai CmsMadeSimple 2.2.21)
Heureusement, j'ai trouvé comment faire un plugin color en prenant comme modèle le plugin mailto.
Voici le code du fichier plugin.min.js (à mettre dans /dossier_du_cms/modules/MicroTiny/lib/js/tinymce/plugins/color) :
tinymce.PluginManager.add('color', function(editor, url){
function color_showDialog()
{ color_val = 'red';
text_val = editor.selection.getContent({format: 'text'});
editor.windowManager.open({
title: 'Couleur de texte',
body: [
{ type: 'textbox', name: 'color', size: 40, label: 'Color', value: color_val},
{ type: 'textbox', name: 'text', size: 40, label: 'Texte', value: text_val }
],
onsubmit: function(e){
// ajoute <span style="color: "> </span> autour de la sélection
editor.execCommand('mceInsertContent', false, editor.dom.createHTML('span', {style:"color:"+e.data.color},e.data.text));
}
});
}
// add a menu item (facultatif)
editor.addMenuItem('color', {
text: 'Couleur de texte',
title: 'Couleur de texte',
context: 'format',
prependToContext: true,
onclick: color_showDialog
});
editor.addButton('color', {
text: 'C',
tooltip: 'Couleur de texte',
onclick: color_showDialog,
});
});
Ensuite, il reste à modifier le fichier /dossier_du_cms/modules/MicroTiny/templates/tinymce_config.js pour que le plugin soit pris en compte :
A la ligne 59, on trouve : image_advtab:true,
puis toolbar= ... : ajouter color juste après underline (cela ajoutera un bouton "C" sur la barre d'outils)
et plugins= ... : ajouter color, par exemple juste après insertdatetime.
Utilisation : Sélectionner le texte dont on veut modifier la couleur.
Le texte s'affiche en bas d'une fenêtre popup ;
Indiquer la couleur voulue en anglais ; j'ai mis red, vous pouvez modifier.
vous pouvez aussi mettre #ff0000 ou #f00
Ce plugin permet aussi de modifier la taille de police, la couleur de fond, ...
Exemple : Color : red ; font-size:14pt ; background:yellow ; (on peut supprimer red, mais il faut garder le ; )
J'ose espérer que ce plugin vous donnera satisfaction.
N'hésitez pas à signaler d'éventuels problèmes ou demander des précisions.
Quelqu'un peut-il me dire la signification du prependToContext dans addMenuItem ? (j'ai copié ça dans le plugin mailto)
Raymond
Avant, on pouvait choisir TinyMce comme nouvel éditeur, qui est plus complet. Mais ça n'a plus l'air possible. (J'ai CmsMadeSimple 2.2.21)
Heureusement, j'ai trouvé comment faire un plugin color en prenant comme modèle le plugin mailto.
Voici le code du fichier plugin.min.js (à mettre dans /dossier_du_cms/modules/MicroTiny/lib/js/tinymce/plugins/color) :
tinymce.PluginManager.add('color', function(editor, url){
function color_showDialog()
{ color_val = 'red';
text_val = editor.selection.getContent({format: 'text'});
editor.windowManager.open({
title: 'Couleur de texte',
body: [
{ type: 'textbox', name: 'color', size: 40, label: 'Color', value: color_val},
{ type: 'textbox', name: 'text', size: 40, label: 'Texte', value: text_val }
],
onsubmit: function(e){
// ajoute <span style="color: "> </span> autour de la sélection
editor.execCommand('mceInsertContent', false, editor.dom.createHTML('span', {style:"color:"+e.data.color},e.data.text));
}
});
}
// add a menu item (facultatif)
editor.addMenuItem('color', {
text: 'Couleur de texte',
title: 'Couleur de texte',
context: 'format',
prependToContext: true,
onclick: color_showDialog
});
editor.addButton('color', {
text: 'C',
tooltip: 'Couleur de texte',
onclick: color_showDialog,
});
});
Ensuite, il reste à modifier le fichier /dossier_du_cms/modules/MicroTiny/templates/tinymce_config.js pour que le plugin soit pris en compte :
A la ligne 59, on trouve : image_advtab:true,
puis toolbar= ... : ajouter color juste après underline (cela ajoutera un bouton "C" sur la barre d'outils)
et plugins= ... : ajouter color, par exemple juste après insertdatetime.
Utilisation : Sélectionner le texte dont on veut modifier la couleur.
Le texte s'affiche en bas d'une fenêtre popup ;
Indiquer la couleur voulue en anglais ; j'ai mis red, vous pouvez modifier.
vous pouvez aussi mettre #ff0000 ou #f00
Ce plugin permet aussi de modifier la taille de police, la couleur de fond, ...
Exemple : Color : red ; font-size:14pt ; background:yellow ; (on peut supprimer red, mais il faut garder le ; )
J'ose espérer que ce plugin vous donnera satisfaction.
N'hésitez pas à signaler d'éventuels problèmes ou demander des précisions.
Quelqu'un peut-il me dire la signification du prependToContext dans addMenuItem ? (j'ai copié ça dans le plugin mailto)
Raymond