Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5

Les limites de Microtiny : on ne peut pas changer la couleur de texte
#1

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
Répondre
#2

suivant la version utilisée de l'éditeur de pages Wysiwyg MicroTiny :
pour pouvoir changer la couleur du texte, il faut utiliser le plugin textcolor
dans la config
dans la ligne toolbar : ajouter forecolor backcolor
dans la ligne plugins : ajouter textcolor
cela donne les couleurs de texte et de l’arrière plan dans la barre d'outils
ce fichier se trouve dans /tinymce/js/tinymce/plugins/textcolor/

- il est aussi possible d'ajouter d'autre plugins pour être comme sur TinyMce
Le ou les fichiers plugins manquant sont disponibles dans l'archive ZIP
cette archive est trouvable sur le site https://www.tiny.cloud/get-tiny/self-hosted/
il suffit de prendre la bonne version de TinyMCE Community
- sur la V2.2.x MicroTiny est normalement en 4.6.4 (2017-06-13)

Dans les versions 5 et 6 de TinyMCE ce plugins est présent par défaut
Citation :Text color menu items
In TinyMCE 5.0.5 the forecolor and backcolor toolbar buttons can now be used in menus. The new menu items have also been added to the default Formats menu.

++ Note la version disponible ici MicroTiny2.2.6.1_5.10.9 est normalement opérationnelle sur la V2.2.x

J-C Etiemble v 2.2.xx
Répondre
#3

Merci J-C. Ça marche.
Je n'avais d'abord pas compris que dans https://www.tiny.cloud/get-tiny/self-hosted/, il fallait prendre la version 4.6.4 Prod de TinyMce,

aller dans tinymce_4.6.4.zip\tinymce\js\tinymce\plugins\textcolor\ et copier le fichier plugin.min.js,
et le coller dans /dossier_cms/modules/MicroTiny/lib/js/tinymce/plugins/textcolor,

puis modifier le fichier /dossier_cms/modules/MicroTiny/templates/tinymce_config.js comme tu l'as indiqué.
Grand Merci.
Répondre
#4

Citation :Ça marche.
ça a toujours marché le soucis c'est de trouver les liens pour les versions anciennes de TinyMce

Tu as aussi la possibilité de tester la version disponible ici MicroTiny2.2.6.1_5.10.9 qui est plus complète et plus à jour
voir image Éditeur + voir image configuration

J-C Etiemble v 2.2.xx
Répondre


Atteindre :


Utilisateur(s) parcourant ce sujet : 2 visiteur(s)