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

Rversion finale: Yokohama

Mis à jour 30 janv. 2025

12 minutes de lecture

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 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 la police par défaut dans un champ HTML, reportez-vous à la section Modifier la taille de la 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 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

Accédez à la Tout > Propriétés système > Propriétés de l'interface utilisateur.

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 de 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

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

Accédez à un enregistrement avec un champ de type HTML que vous souhaitez modifier.
Par exemple, sélectionnez un incident, un problème ou un enregistrement de connaissances.
Cliquez avec le bouton droit sur l’étiquette du champ (par exemple, Corps de l’article) et sélectionnez Configurer le dictionnaire.
Dans la section Liens connexes, sélectionnez Vue avancée.
Dans le champ Attributs , entrez editor.toolbar= suivi des boutons de la barre d’outils souhaités.
Par exemple, editor.toolbar=blocks|gras, italique, souligné, biffé, bloc, citation, indice, exposant, enleverformat| bullist, numlist, retrait, retrait, indentation|annuler, rétablir|table, hr|lien, dissocier|image, code média|visualblocks, aperçu en plein écran.
Remarque :
- Incluez tous les éléments de la barre d’outils que vous souhaitez afficher, et pas seulement ceux que vous souhaitez ajouter.
- Les configurations apportées au champ Attribut d’un champ de 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 non-break pagebreak imprimer searchremplacer wordcount anchor code d’ancrage visualblocks visualchars compat3x autolink align_listitems,editor.toolbar= fontfamily fontsize | gras italique souligné barré forecolor backcolor pastetext removeformat | blocs rechercherremplacer annuler annuler rétablit | bullist numlist retrait négatif indentation aligngauche, aligncentre, aligndroit, | table des matières lien vers la table supprimer le lien de l’image code médiaexemple | Code en plein écran.
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

Accédez à un enregistrement avec un champ de type HTML que vous souhaitez modifier.
Par exemple, sélectionnez un incident, un problème ou un enregistrement de connaissances.
Cliquez avec le bouton droit sur l’étiquette du champ (par exemple, Corps de l’article) et sélectionnez Configurer le dictionnaire.
Dans la section Liens connexes, sélectionnez Vue avancée.
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 mediamirror lists advlist plein écran charmap directionnalité émoticônes rh insertdatetime sans rupture saut de page imprimer rechercheremplacer 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, et pas seulement ceux que vous souhaitez ajouter.
- Les configurations apportées au champ Attribut d’un champ de 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 charmapcode code miroirexemple sélecteur de couleurs directionnalité émoticônes plein écran image rh insertdatetime listes de liens médias sans rupture saut de page aperçu imprimer readonlynoborder searchremplacer la table textcolor tableofcontents visualblocks visualchars wordcount
- 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 non-break pagebreak imprimer searchremplacer wordcount anchor code d’ancrage visualblocks visualchars compat3x autolink align_listitems,editor.toolbar= fontfamily fontsize | gras italique souligné barré forecolor backcolor pastetext removeformat | blocs rechercherremplacer annuler annuler rétablit | bullist numlist retrait négatif indentation aligngauche, aligncentre, aligndroit, | table des matières lien vers la table supprimer le lien de l’image code médiaexemple | Code en plein écran.
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 du champ HTML est configurée par champ HTML.

Procédure

Accédez à un enregistrement avec un champ de type HTML que vous souhaitez modifier.
Par exemple, sélectionnez un incident, un problème ou un enregistrement de connaissances.
Cliquez avec le bouton droit sur l’étiquette du champ (par exemple, Corps de l’article) et sélectionnez Configurer le dictionnaire.
Dans la section Liens connexes, sélectionnez Vue avancée.
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 de 64 par défaut.
Sélectionnez Mettre à jour.
Pour configurer la hauteur des champs de formulaire dynamiquement à mesure que la ligne de texte augmente plutôt que 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 la 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

Accédez à un enregistrement avec un champ de type HTML que vous souhaitez modifier.
Par exemple, sélectionnez un incident, un problème ou un enregistrement de connaissances.
Cliquez avec le bouton droit sur l’étiquette du champ (par exemple, Corps de l’article) et sélectionnez Configurer le dictionnaire.
Sélectionnez l’onglet Valeur par défaut.
Dans le champ Valeur par défaut , entrez , où X est la valeur par défaut.
Par exemple :
- Pour définir la police sur grand, saisissez 
- Pour définir la taille sur 10, saisissez 
Sélectionnez Mettre à jour.

Configurer TinyMCE pour autoriser les balises obsolètes

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

Avant de commencer

Rôle requis : personalize_dictionary ou admin

Pourquoi et quand exécuter cette tâche

Une fois que vous avez 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

Accédez au formulaire avec un champ HTML qui utilise TinyMCE.
Cliquez avec le bouton droit sur l’étiquette du champ HTML et sélectionnez Configurer le dictionnaire.
Dans le champ Attributs , saisissez tinymce_allow_all=vrai, 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 dans une 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.
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

Accédez au formulaire avec un champ HTML qui utilise TinyMCE.
Cliquez avec le bouton droit sur l’étiquette du champ HTML et sélectionnez Configurer le dictionnaire.
Dans le champ Attributs , saisissez tinymce_allow_script_urls=vrai, 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 dans une 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.
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 menus apparaît en haut de l’éditeur HTML qui peut être utilisé 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 des attributs du dictionnaire.

Avant de commencer

Rôle requis : admin

Procédure

Accédez à un enregistrement avec un champ de type HTML que vous souhaitez modifier.
Par exemple, sélectionnez un incident, un problème ou un enregistrement de connaissances.
Cliquez avec le bouton droit sur l’étiquette du champ et sélectionnez Configurer le dictionnaire.
Dans la section Liens connexes, sélectionnez Vue avancée.
Dans le champ Attributs, entrez editor.config=new TinymceConfigScript().getConfiguration().

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

Accédez à TinymceConfigScript.

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

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'
};

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 menu.
Si vous souhaitez désactiver la barre de menus, définissez l’attribut barre de menus sur faux.
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, barre de menu : 'format d’édition de fichier' pour que seules ces 3 options apparaissent dans la barre de menu.

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' }
    }
});

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.