Mises à jour de l’éditeur HTML TinyMCE 5

  • Rversion finale: Washingtondc
  • Mis à jour 1 févr. 2024
  • 3 minutes de lecture
  • Les modifications apportées de TinyMCE 4 à TinyMCE 5 peuvent nécessiter des mises à jour pour conserver les fonctionnalités de l’éditeur HTML TinyMCE. Si vous avez utilisé un fournisseur d’angle de widget pour modifier l’éditeur dans Portail de services les widgets dans les versions précédentes, examinez ces changements et effectuez les mises à jour applicables.

    Changements pouvant interrompre les implémentations TinyMCE personnalisées

    Certains changements peuvent interrompre les implémentations TinyMCE personnalisées dans Portail de services.

    Notez les modifications suivantes apportées aux thèmes et aux habillages :

    • Le thème moderne n’est pas pris en charge. Utilisez plutôt le thème argenté.
    • La peau gris clair n’est pas prise en charge. La peau par défaut est l’oxyde.

      Les habillages sn-editor-themed ou sn-editor peuvent également être utilisés. L’habillage sur le thème sn-editor utilise les variables de thème Now Design System (NDS) et sn-editor utilise des valeurs codées en dur.

      Remarque :
      Pour conserver le style de la peau gris clair, utilisez le code suivant dans votre feuille de style :
      .tox .tox-toolbar-overlord {
            background-color: #f0f0f0 !important; 
         } 

    Notez les modifications suivantes apportées aux espaces de noms de méthode API dans Portail de services:

    San Diego Tokyo
    ed.addButton ed.ui.registry.addButton
    Onclick onAction (en anglais seulement)

    Reportez-vous à la documentation Tiny MCE5 Migrer de TinyMCE 4 vers TinyMCE 5 pour plus d’informations.

    Modifications supplémentaires

    Les modifications suivantes peuvent affecter les implémentations TinyMCE personnalisées dans Portail de services:

    • Le menu contextuel du navigateur pour des fonctionnalités telles que le copier-coller est disponible en sélectionnant Ctrl + clic pour Windows ou Commande + clic pour Mac sur votre clavier. Un clic droit ouvre l’option Lien au lieu du menu contextuel du navigateur.
    • Les espaces réservés HTML ne sont pas pris en charge. Seuls les espaces réservés basés sur des chaînes sont pris en charge.
    • Le module d’extension en lecture seule personnalisé n’est pas disponible par défaut. Vous devez ajouter readonlynoborder à glide.ui.html.editor.v5.enabled_plugins.
    • La nouvelle propriété système glide.ui.html.editor.default_link_target vous permet de définir une valeur cible par défaut pour les liens. Les valeurs de chaîne comprennent : « _blank »,« _self» et « _top ». La valeur cible par défaut est ''.

    • L’option de redimensionnement redimensionne la barre d’outils en plus de l’éditeur. Ajoutez l’option min_height pour empêcher le redimensionnement de s’appliquer à la barre d’outils.
    • Le redimensionnement n’est pas pris en charge sur Mobile.
    • L’option toolbar_mode est définie sur flottant par défaut pour le bureau plutôt que sur l’option enveloppante. Modifiez ce paramètre pour restaurer l’apparence par défaut de TinyMCE 4.
    • L’option toolbar_mode est définie pour défiler par défaut pour mobile plutôt que pour envelopper. Modifiez ce paramètre pour mobile afin de conserver l’apparence de TinyMCE 4.
    • L’option de hauteur tient compte de toute la hauteur de l’éditeur et a été mise à jour pour ajouter 39 pixels pour la barre d’outils et 18 pixels pour la barre d’état.
      Remarque :
      Si la hauteur n’est pas définie correctement, une barre de défilement inutile peut apparaître.
    • Le module d’extension sn_mentions utilise l’habillage sn-editor. L’habillage sur le thème sn-editor est également pris en charge.
    • L’option contextmenu comprend uniquement une option de lien par défaut. Ajoutez contextmenu :false pour conserver l’apparence de TinyMCE 4.
    • Les valeurs de l’option fontsize_formats sont séparées par un espace, comme dans fontsize_formats : '7pt 7.5pt 8pt 10pt 12pt 14pt 18pt 24pt 36pt'. Les barres verticales (|) ne sont plus nécessaires.
    • Le module d’extension PowerPaste se trouve dans la liste d’options des modules d’extension plutôt que dans la liste des options des modules d’extension externes .
      San Diego Tokyo
      external_plugins: { 
             powerpaste: '/scripts/tinymce4_4_3/plugins/powerpaste/plugin.min.js?sysparm_substitute=false' 
         }, 
      plugins: "lists code link powerpaste"
    • Les langues supplémentaires suivantes sont prises en charge : canadien français (fq), hongrois (hu), thaï (th) et turc (tr). Vous pouvez mettre à jour la liste des langues comme suit pour inclure ces langues :
      var langs = 'cs,de,en,es,fi,fr,fq,he,hu,it,ja,ko,nl,pl,pt,ru,th,tr,zh,zt';
    • Les styles CSS appliqués à l’aide de l’espace de noms mce- ne sont pas pris en charge. Utilisez plutôt les nouvelles classes CSS.
    • Ajoutez le module d’extension Lists à la liste d’options des modules d’extension pour pouvoir utiliser des listes numérotées ou à puces.