Configurer la barre d’outils TinyMCE via les attributs de dictionnaire

  • Rversion finale: Xanadu
  • Mis à jour 1 août 2024
  • 12 minutes de lecture

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

    Pour en savoir plus sur la configuration de la barre d’outils, reportez-vous à la section Modifier la barre d’outils par défaut de TinyMCE. Pour en savoir plus 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 Modifier 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 menu sur l’éditeur HTML TinyMCE.

    Modifier 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 qu’ils soient activés ou désactivés dans l’ensemble Espace de travail.

    Avant de commencer

    Rôle requis : administrateur

    Procédure

    1. Accédez à la Tout > Propriétés système > Propriétés de l'interface utilisateur.
    2. Mettez à jour la propriété Configure the editing toolbar for HTML(TinyMCE v6.8.3) (glide.ui.html.editor.toolbar) afin d’ajouter ou de 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 valides 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.

    Modifier 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 : administrateur

    Procédure

    1. Accédez à un enregistrement avec un champ de type HTML que vous souhaitez modifier.
      Par exemple, sélectionnez un enregistrement d’incident, de problème ou 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.toolbar= suivi des boutons de la barre d’outils souhaités.
      Par exemple, editor.toolbar=blocks|bold, italic underline, strikethrough, blockquote, subscript, superscript, rescribe, removeformat|, bullist, numlist, outdent, indent|undo, redo|table hr|link unlink|image media code|visualblocks aperçu plein écran.
      Remarque :
      • Incluez tous les éléments de barre d’outils que vous souhaitez afficher, et pas seulement les éléments de barre d’outils 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 Attributs. Par exemple, editor.height=300,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 rechercheremplacer le nombre de mots ancre codesample visualchars compat3x lien automatique align_listitems,editor.toolbar= fontfamily fontsize | gras italique souligné barré avant-couleur arrière-couleur collertextetexte supprimerformater | blocs rechercherremplacer annuler rétablir | bullist numlist outdent retrait retrait alignleft aligncenter alignright | tableofcontents lien de table supprimer le lien image média codesample | Code 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 : administrateur

    Procédure

    1. Accédez à un enregistrement avec un champ de type HTML que vous souhaitez modifier.
      Par exemple, sélectionnez un enregistrement d’incident, de problème ou 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, hr insertdatetime, insécable, pagebreak, print, searchreplace wordcount, anchor, tableofcontents codesample, visualblocks, visualchars, compat3x, lien automatique align_listitems.

      Remarque :
      • Incluez tous les éléments de barre d’outils que vous souhaitez afficher, et pas seulement les éléments de barre d’outils 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 incluent : advlist align_listitems ancre lien automatique redimensionnement automatique bbcode charmap codecode miroiréchantillon colorpicker émoticônes de directionnalité plein écran rh image insertdatetime liste de liens médias page insécable aperçu imprimer lecture seulerecherche de bordureremplacer table textecouleur 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 Attributs. Par exemple, editor.height=300,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 rechercheremplacer le nombre de mots ancre codesample visualchars compat3x lien automatique align_listitems,editor.toolbar= fontfamily fontsize | gras italique souligné barré avant-couleur arrière-couleur collertextetexte supprimerformater | blocs rechercherremplacer annuler rétablir | bullist numlist outdent retrait retrait alignleft aligncenter alignright | tableofcontents lien de table supprimer le lien image média codesample | Code 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 : administrateur

    Pourquoi et quand exécuter cette tâche

    La hauteur du champ HTML est configurée par champ HTML.

    Procédure

    1. Accédez à un enregistrement avec un champ de type HTML que vous souhaitez modifier.
      Par exemple, sélectionnez un enregistrement d’incident, de problème ou 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 par défaut au nombre de 64.

    5. Sélectionnez Mettre à jour.
    6. Pour configurer dynamiquement la hauteur des champs de formulaire à mesure que la ligne de texte augmente, au lieu de fournir une hauteur spécifique, procédez comme suit :
      1. Accédez à la Tout > 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 le redimensionnement automatique.
      4. Sélectionnez Mettre à jour.
        Le module d’extension de redimensionnement automatique est actif.

    Modifier 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 : administrateur

    Pourquoi et quand exécuter cette tâche

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

    Procédure

    1. Accédez à un enregistrement avec un champ de type HTML que vous souhaitez modifier.
      Par exemple, sélectionnez un enregistrement d’incident, de problème ou 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 agrandir la police, saisissez <p style="font-size:large;"></p>
      • Pour définir la taille sur 10, entrez <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 la <strong> mise en forme 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 du code pour entrer manuellement les balises déconseillées. 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.
      Configurer le dictionnaire
    3. Dans le champ Attributs , saisissez tinymce_allow_all=true, séparé par une virgule si nécessaire.

      Les attributs d’entrée de dictionnaire ne peuvent être ajoutés 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.

      Champ d’attribut mis à jour

      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.
      Configurer le dictionnaire
    3. Dans le champ Attributs , saisissez tinymce_allow_script_urls=true, séparé par une virgule si nécessaire.

      Les attributs d’entrée de dictionnaire ne peuvent être ajoutés 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.

      Entrée de dictionnaire dans la vue avancée

      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 menu 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 menus apparaît en haut de l’éditeur HTML et peut être utilisée pour créer, modifier et formater du 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 : administrateur

    Procédure

    1. Accédez à un enregistrement avec un champ de type HTML que vous souhaitez modifier.
      Par exemple, sélectionnez un enregistrement d’incident, de problème ou de connaissances.
    2. Cliquez avec le bouton droit sur l’étiquette du champ et sélectionnez Configurer le dictionnaire.

      TinyMCE v6.8.3 Configurer le menu déroulant du dictionnaire

    3. Dans la section Liens connexes, sélectionnez Vue avancée.
    4. Dans le champ Attributs, saisissez editor.config=new TinymceConfigScript().getConfiguration().

      TinyMCE v6.8.3 Formulaire d’entrée du dictionnaire

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

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

        Vous pourrez voir le script suivant par défaut.

        Include de script pour TinymceConfigScript dans Buildtools1

        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 la barre de menus sur vrai dans le script pour activer la barre de menus.
        Cela activera toutes les options « Fichier », « Modifier », « Afficher », « Insérer », « Formater », « Tableau » dans la barre de menus.
      5. Si vous souhaitez désactiver la barre de menus, définissez l’attribut de la barre de menus sur faux.
      6. Si vous souhaitez uniquement activer 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, barre de menu : 'format d’édition de fichier' afin que seules ces 3 options apparaissent dans la barre de menus.

      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ées 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 l’ajout de trois nouveaux formats de style (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.

      TinyMCE v6.8.3 Barre de menu de texte personnalisée