Configurationde la barre d’outils TinyMCE via les attributs du dictionnaire

Vous pouvez configurer l’éditeur HTML TinyMCE pour une table spécifique en configurant les attributs du dictionnaire.

Pour plus d’informations sur la configuration de la barre d’outils, reportez-vous à la section Changer la barre d’outils par défaut de TinyMCE. Pour plus d’informations sur la configuration de modules d’extension spécifiques, reportez-vous à la section Changer les modules d’extension TinyMCE pour une table spécifique. Pour plus d’informations sur la configuration de la hauteur par défaut d’un champ HTML, reportez-vous à la section Modifier la hauteur par défaut d’un champ HTML. Pour plus d’informations sur la configuration de la taille de police par défaut dans un champ HTML, reportez-vous à la section Changer la taille de police par défaut d’un champ HTML. Pour plus d’informations sur la configuration de la barre de menus dans l’éditeur HTML TinyMCE, reportez-vous à la section Configurer la barre de menus sur l’éditeur HTML TinyMCE.

Changer la barre d’outils par défaut de TinyMCE

Définissez les éléments de la barre d’outils dans vos propriétés système pour activer ou désactiver dans l’ensemble Espace de travail.

Avant de commencer

Rôle requis : admin

Procédure

1. Accédez à la Tous > Propriétés système > Propriétés de l'interface utilisateur.
2. Mettez à jour la propriété Configure la barre d’outils d’édition pour les champs HTML (TinyMCE v6.8.2) (glide.ui.html.editor.toolbar) pour ajouter ou supprimer des boutons pour la barre d’outils.
   Remarque :

   Utilisez une barre verticale (« | ») pour ajouter un séparateur de section.

   Type	Boutons
   Boutons par défaut	bold italic underline undo redo | fontfamily fontsize table | forecolor backcolor link unlink | image media code | alignleft aligncenter alignright | bullist numlist fullscreen
   Boutons disponibles	newdocument, bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, blocks, fontfamily, fontsize, tablecontrols, cut, copy, paste, pastetext, pasteword, search, replace, bullist, numlist, outdent, indent, blockquote, undo, redo, link, unlink, image, cleanup, code, forecolor, backcolor, removeformat, hr, visualaid, sub, sup, charmap, media, preview, fullscreen, accordion

3. Sélectionnez Enregistrer.

Changer la barre d’outils TinyMCE pour une table spécifique

Définissez les attributs dans le dictionnaire TinyMCE pour déterminer quels attributs TinyMCE s’affichent dans une table spécifique.

Avant de commencer

Rôle requis : admin

Procédure

1. Accédez à un enregistrement comportant un champ de type HTML que vous souhaitez modifier.
   Par exemple, sélectionnez un incident, un problème ou un enregistrement de la base de connaissances.
2. Cliquez avec le bouton droit sur l’étiquette du champ (par exemple, Corps de l’article) et sélectionnez Configurer le dictionnaire.
3. Dans la section Liens connexes, sélectionnez Vue avancée.
4. Dans le champ Attributs , entrez editor.toolbar= , puis les boutons de la barre d’outils souhaités.
   Par exemple, editor.toolbar=blocks|gras, italique, souligné, barré, blockquote, script, exposant, removeformat| bullist, numlist, outdend, indent|undo, redo|table, hr|link, unlink|image, media code|visualblocks preview fullscreen.

   Remarque :

   • Incluez tous les éléments de la barre d’outils que vous souhaitez afficher, pas seulement ceux que vous souhaitez ajouter.
   • Les configurations apportées au champ Attribut d’un champ sur l’enregistrement de dictionnaire associé remplacent la valeur de la propriété système glide.ui.html.editor.toolbar.
   • Plusieurs attributs, tels que la hauteur, les boutons de la barre d’outils et les modules d’extension de la barre d’outils, peuvent être combinés dans le champ Attribuables. Par exemple, editor.height=300,editor.plugins=table colorpicker textcolor link image media codemirror lists advlist plein écran charmap directionnalité émoticônes rh insertdatetime non-break pagebreak imprimer searchcount anchor wordcount exemple visualblocks visualchars compat3x autolink align_listitems,editor.toolbar= fontfamily fontsize | gras italique soulignement barré forecolor backcolor pastetext removeformat | blocs searchreplace undo redo | bullist numlist outdent indentation alignaligngauchecentre aligndroit | table des matières lien vers la table supprimer le lien de l’image code du médiaexemple | code en plein écran.
5. Sélectionnez Mettre à jour.

Changer les modules d’extension TinyMCE pour une table spécifique

Définissez les attributs dans le dictionnaire TinyMCE pour activer ou désactiver les modules d’extension dans un champ HTML spécifique.

Avant de commencer

Rôle requis : admin

Procédure

1. Accédez à un enregistrement comportant un champ de type HTML que vous souhaitez modifier.
   Par exemple, sélectionnez un incident, un problème ou un enregistrement de la base de connaissances.
2. Cliquez avec le bouton droit sur l’étiquette du champ (par exemple, Corps de l’article) et sélectionnez Configurer le dictionnaire.
3. Dans la section Liens connexes, sélectionnez Vue avancée.
4. Dans le champ Attributs , saisissez editor.plugins= , suivi des modules d’extension souhaités, séparés par un espace.

   Par exemple, editor.plugins=table colorpicker textcolor link image media codemirror lists advlist plein écran charmap directionnalité émoticônes rh insertdatetime insécable saut de page imprimer searchreplace wordcount anchor tableofcontents codesample visualblocks visualchars compat3x autolink align_listitems.

   Remarque :

   • Incluez tous les éléments de la barre d’outils que vous souhaitez afficher, pas seulement ceux que vous souhaitez ajouter.
   • Les configurations apportées au champ Attribut d’un champ sur l’enregistrement de dictionnaire associé remplacent la valeur de la propriété système glide.ui.html.editor.toolbar.
   • Les modules d’extension autorisés sont les suivants : Advlist align_listitems ancre lien automatique redimensionnement automatique bbcode code charmap code miroirexemple de sélecteur de couleurs directionnalité émoticônes plein écran image rh insertdatetime listes de liens médias insécables saut de page aperçu readonlynoborder searchreplace table textcolor tableofcontents visualblocks visualchars nombre de mots
   • Plusieurs attributs, tels que la hauteur, les boutons de la barre d’outils et les modules d’extension de la barre d’outils, peuvent être combinés dans le champ Attribuables. Par exemple, editor.height=300,editor.plugins=table colorpicker textcolor link image media codemirror lists advlist plein écran charmap directionnalité émoticônes rh insertdatetime non-break pagebreak imprimer searchcount anchor wordcount exemple visualblocks visualchars compat3x autolink align_listitems,editor.toolbar= fontfamily fontsize | gras italique soulignement barré forecolor backcolor pastetext removeformat | blocs searchreplace undo redo | bullist numlist outdent indentation alignaligngauchecentre aligndroit | table des matières lien vers la table supprimer le lien de l’image code du médiaexemple | code en plein écran.
5. Sélectionnez Mettre à jour.

Modifier la hauteur par défaut d’un champ HTML

Modifiez la hauteur par défaut d’un champ HTML spécifique pour augmenter la taille d’un champ journal.

Avant de commencer

Rôle requis : admin

Pourquoi et quand exécuter cette tâche

La hauteur de champ HTML est configurée pour chaque champ HTML.

Procédure

1. Accédez à un enregistrement comportant un champ de type HTML que vous souhaitez modifier.
   Par exemple, sélectionnez un incident, un problème ou un enregistrement de la base de connaissances.
2. Cliquez avec le bouton droit sur l’étiquette du champ (par exemple, Corps de l’article) et sélectionnez Configurer le dictionnaire.
3. Dans la section Liens connexes, sélectionnez Vue avancée.
4. Dans le champ Attributs , saisissez editor.height=X, où X est la hauteur souhaitée.
   Par exemple, editor.height=250

   Remarque :

   Les champs HTML peuvent être compris entre 72 et 2 000. Les champs HTML sont au nombre 64 par défaut.

5. Sélectionnez Mettre à jour.
6. Pour configurer la hauteur des champs de formulaire de manière dynamique à mesure que la ligne de texte augmente plutôt que de fournir une hauteur spécifique, procédez comme suit :
   1. Accédez à la Tous > Propriétés système > Toutes les propriétés
   2. Dans la barre de recherche, saisissez glide.ui.html.editor.enabled_plugins et sélectionnez la propriété.
   3. Dans le champ de valeur, ajoutez redimensionnement automatique.
   4. Sélectionnez Mettre à jour.
      Le module d’extension de redimensionnement automatique est actif.

Changer la taille de police par défaut d’un champ HTML

Modifiez la taille de police par défaut d’un champ HTML spécifique pour utiliser une taille de police standard dans tous les formulaires.

Avant de commencer

Rôle requis : admin

Pourquoi et quand exécuter cette tâche

La taille de police HTML est configurée par champ HTML.

Procédure

1. Accédez à un enregistrement comportant un champ de type HTML que vous souhaitez modifier.
   Par exemple, sélectionnez un incident, un problème ou un enregistrement de la base de connaissances.
2. Cliquez avec le bouton droit sur l’étiquette du champ (par exemple, Corps de l’article) et sélectionnez Configurer le dictionnaire.
3. Sélectionnez l’onglet Valeur par défaut .
4. Dans le champ Valeur par défaut , saisissez <p style="font-size:X;"></p>, où X est la valeur par défaut.
   Par exemple :

   • Pour définir la police sur grand, saisissez <p style="font-size:large;"></p>
   • Pour définir la taille sur 10, saisissez <p style="font-size:10pt;"></p>
5. Sélectionnez Mettre à jour.

Configurer TinyMCE pour autoriser les balises déconseillées

Vous pouvez définir un attribut de dictionnaire sur un champ TinyMCE pour autoriser l’utilisation de balises HTML déconseillées, telles que <b> et <i>. Par défaut, TinyMCE utilise les balises et <em> pour le <strong> formatage en gras et en italique.

Avant de commencer

Rôle requis : personalize_dictionary ou admin

Pourquoi et quand exécuter cette tâche

Après avoir défini l’attribut de dictionnaire, utilisez la vue Code pour entrer manuellement les balises obsolètes. L’éditeur ne valide pas les balises que vous saisissez manuellement, par exemple si vous saisissez un caractère incorrect.

Procédure

1. Accédez au formulaire avec un champ HTML qui utilise TinyMCE.
2. Cliquez avec le bouton droit sur l’étiquette du champ HTML et sélectionnez Configurer le dictionnaire.

   

3. Dans le champ Attributs , saisissez tinymce_allow_all=vrai, séparés par une virgule si nécessaire.

   Vous ne pouvez ajouter des attributs d’entrée de dictionnaire que lorsque le formulaire d’entrée de dictionnaire est en vue avancée, car ils ne sont pas affichés dans la vue par défaut.

   

   Si d’autres attributs sont déjà répertoriés, utilisez une virgule comme séparateur.

4. Sélectionnez Mettre à jour.

Configurer TinyMCE pour autoriser JavaScript dans les URL

Vous pouvez définir un attribut de dictionnaire sur un champ TinyMCE pour autoriser l’utilisation de JavaScript dans une URL.

Avant de commencer

Rôle requis : personalize_dictionary ou admin

Procédure

1. Accédez au formulaire avec un champ HTML qui utilise TinyMCE.
2. Cliquez avec le bouton droit sur l’étiquette du champ HTML et sélectionnez Configurer le dictionnaire.

   

3. Dans le champ Attributs , saisissez tinymce_allow_script_urls=vrai, séparés par une virgule si nécessaire.

   Vous ne pouvez ajouter des attributs d’entrée de dictionnaire que lorsque le formulaire d’entrée de dictionnaire est en vue avancée, car ils ne sont pas affichés dans la vue par défaut.

   

   Si d’autres attributs sont déjà répertoriés, utilisez une virgule comme séparateur.

4. Sélectionnez Mettre à jour.

Configurer la barre de menus sur l’éditeur HTML TinyMCE

Vous pouvez activer la barre de menus sur l’éditeur HTML TinyMCE à la fois dans CoreUI et dans les espaces de travail. Lorsqu’elle est activée, la barre de menu apparaît en haut de l’éditeur HTML et peut être utilisée pour créer, modifier et formater le contenu. Par défaut, la barre de menus est inactive. Vous pouvez l’activer pour une table spécifique via la configuration d’attribut de dictionnaire.

Avant de commencer

Rôle requis : admin

Procédure

1. Accédez à un enregistrement comportant un champ de type HTML que vous souhaitez modifier.
2. Cliquez avec le bouton droit sur l’étiquette du champ et sélectionnez Configurer le dictionnaire.
3. Dans la section Liens connexes, sélectionnez Vue avancée.
4. Dans le champ Attributs, entrez editor.config=new TinymceConfigScript().getConfiguration().

   Cet attribut editor.config pointe vers un script : TinymceConfigScript().

5. Accédez au TinymceConfigScript.
   1. Accédez à la Tous > Définition du système > Inclusions de script.
   2. Saisissez TinymceConfigScript dans la barre de recherche située en haut du formulaire, puis sélectionnez Entrée ou Retour.
   3. Sélectionnez TinymceConfigScript.

      Vous pourrez voir le script suivant par défaut.

      var TinymceConfigScript = Class.create();
      TinymceConfigScript.prototype = {
          initialize: function() {
          },
          setTinymceConfig: function() {
          var tinyConfig = {
              menubar: 'edit format',
              menu: {
                  file: { title: 'File', items: 'importword exportpdf exportword | print | deleteallconversations' },
                  edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
                  view: { title: 'View', items: 'code revisionhistory | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments' }
              },
              style_formats: [
                  { title: 'Headings', items: [
                      { title: 'Heading 1', format: 'h1' },
                      { title: 'Heading 2', format: 'h2' },
                      { title: 'Heading 3', format: 'h3' },
                      { title: 'Heading 4', format: 'h4' },
                      { title: 'Heading 5', format: 'h5' },
                      { title: 'Heading 6', format: 'h6' }
                  ]},
                  { title: 'Inline', items: [
                      { title: 'Bold', format: 'bold' },
                      { title: 'Italic', format: 'italic' },
                      { title: 'Underline', format: 'underline' },
                      { title: 'Strikethrough', format: 'strikethrough' },
                      { title: 'Superscript', format: 'superscript' },
                      { title: 'Subscript', format: 'subscript' },
                      { title: 'Code', format: 'code' }
                  ]},
                  { title: 'Blocks', items: [
                      { title: 'Paragraph', format: 'p' },
                      { title: 'Blockquote', format: 'blockquote' },
                      { title: 'Div', format: 'div' },
                      { title: 'Pre', format: 'pre' }
                  ]},
                  { title: 'Align', items: [
                      { title: 'Left', format: 'alignleft' },
                      { title: 'Center', format: 'aligncenter' },
                      { title: 'Right', format: 'alignright' },
                      { title: 'Justify', format: 'alignjustify' }
                  ]}
              ]
          };
          return tinyConfig;
      },
      getConfiguration: function() {
          var config = this.setTinymceConfig();
          answer = JSON.parse(JSON.stringify(config));
      },
      
          type: 'TinymceConfigScript'
      };

   4. Définissez l’attribut de barre de menus sur vrai dans le script pour activer la barre de menus.
      Cela activera ces options dans la barre de menus : Fichier, Modifier, Afficher, Insérer, Formater et Tableau.
   5. Si vous souhaitez désactiver la barre de menus, définissez l’attribut de barre de menus sur false.
   6. Si vous souhaitez activer uniquement des options spécifiques dans la barre de menus, vous pouvez modifier le script en répertoriant ces options spécifiques dans la barre de menus.

      Par exemple, la barre de menu : 'format d’édition du fichier' pour que seules ces 3 options apparaissent dans la barre de menu.

   7. Vous pouvez également configurer les boutons qui s’affichent dans un menu en modifiant le script.

      tinymce.init({
          selector: 'textarea', // change this value according to your HTML
          menu:{
              file: { title: 'File', items: 'newdocument restordraft | preview | importword exportpdf exportword | print | deleteallconversations' },
              edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
              view: { title: 'View', items: 'code revision history | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments' },
              insert: { title: 'Insert', items: 'image link media addcomment pageembed codesample inserttable | math | charmap emoticons hr | pagebreak nonbreaking anchor tableofcontents | insertdatetime' },
              format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | language | removeformat' },
              tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | a11ycheck code wordcount' },
              table: { title: 'Table', items: 'inserttable | cell row column | advtablesort | tableprops deletetable' },
              help: { title: 'Help', items: 'help' }
          }
      });

6. Configurez les options de format de style personnalisé dans TinyMCEConfigScript en ajoutant le CSS dans la section style_formats.

   Exemple de style_formats section du TinyMCEConfigScript :

   style_formats: [
     { title: 'Headings', items: [
       { title: 'Heading 1', format: 'h1' },
       { title: 'Heading 2', format: 'h2' },
       { title: 'Heading 3', format: 'h3' },
       { title: 'Heading 4', format: 'h4' },
       { title: 'Heading 5', format: 'h5' },
       { title: 'Heading 6', format: 'h6' }
     ]},
     { title: 'Inline', items: [
       { title: 'Bold', format: 'bold' },
       { title: 'Italic', format: 'italic' },
       { title: 'Underline', format: 'underline' },
       { title: 'Strikethrough', format: 'strikethrough' },
       { title: 'Superscript', format: 'superscript' },
       { title: 'Subscript', format: 'subscript' },
       { title: 'Code', format: 'code' }
     ]},
     { title: 'Blocks', items: [
       { title: 'Paragraph', format: 'p' },
       { title: 'Blockquote', format: 'blockquote' },
       { title: 'Div', format: 'div' },
       { title: 'Pre', format: 'pre' }
     ]},
     { title: 'Align', items: [
       { title: 'Left', format: 'alignleft' },
       { title: 'Center', format: 'aligncenter' },
       { title: 'Right', format: 'alignright' },
       { title: 'Justify', format: 'alignjustify' }
     ]}
   ]

   Exemple avec trois nouveaux formats de style ajoutés (Texte en gras, Texte rouge, My-inline) :

   tinymce.init({
     selector: 'textarea',  // change this value according to your HTML
     style_formats: [
       { title: 'Bold text', inline: 'b' },
       { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
       { name: 'my-inline', title: 'My inline', inline: 'span', classes: [ 'my-inline' ] }
     ],
     // The following option is used to append style formats rather than overwrite the default style formats.
     style_formats_merge: true
   });

   Accédez à l’éditeur HTML et vous verrez que les nouveaux formats de style personnalisés (Texte en gras, Texte rouge, My-inline) apparaissent dans la section formats de la barre de menus.