Optimizely CMS – Travailler avec des symboles spéciaux dans TinyMCE / Blogs / Perficient

Si vous avez travaillé avec Optimizely CMS, vous connaissez peut-être assez bien TinyMCE. C’est l’incroyable éditeur de texte riche qui fonctionne de manière transparente avec Optimizely CMS. Et certains d’entre vous ont peut-être travaillé avec une ou une autre forme de personnalisation dans des projets, qu’il s’agisse d’ajouter des styles supplémentaires, de travailler avec différents plugins, de formater la barre d’outils pour répondre aux exigences de vos clients et plus encore. Cet article parle spécifiquement de l’utilisation de symboles spéciaux dans TinyMCE.

Quels sont exactement ces symboles spéciaux, me demanderez-vous ?

Ce sont des symboles qui n’existent pas sur votre clavier standard pour faciliter la saisie. Ils ont une représentation HTML, qui est généralement une combinaison de caractères spéciaux, de lettres et de chiffres. Par exemple, si vous souhaitez saisir le symbole du droit d’auteur, vous devez saisir « © ».

Donc techniquement, il existe un moyen de saisir ces symboles spéciaux. Mais avec TinyMCE et la façon dont le contenu textuel riche est rendu, cette approche pose un problème. Le caractère spécial « & », étant spécial, est codé en HTML dans la sortie finale et affiché sous la forme « & » plutôt. Alors maintenant, au lieu d’afficher notre symbole de droit d’auteur d’en haut, il affiche le texte « © » comme si.

Mais il y a une solution.

TinyMCE possède un plugin appelé « charmap ». Ce plugin possède déjà une bonne collection de ces symboles spéciaux et cela peut être facilement ajouté à la barre d’outils TinyMCE. Il ne vous reste plus qu’à sélectionner parmi celles-ci et vous êtes prêt à partir.

Maintenant, que se passe-t-il si le symbole dont vous avez besoin n’existe pas dans cette charmap, comme Dagger ou Double Dagger, par exemple ?

Heureusement, TinyMCE propose un moyen d’ajouter facilement ces symboles supplémentaires au charmap. Le tout est de savoir comment.

Lorsque vous initialisez la configuration TinyMCE dans votre solution Optimizely CMS (12), vous ajoutez d’abord le plugin appelé « charmap ». Et puis vous pouvez y ajouter des éléments en utilisant le paramètre appelé « charmap_append ». Cela prend un tableau d’objets dans lesquels vous mentionnez le symbole spécial ainsi que sa représentation numérique correspondante. Voici comment j’en ai ajouté 3 :

Quelle est cette représentation numérique et comment la trouver ?

Il existe un site appelé https://compart.com/fr/unicode où si vous recherchez votre symbole, vous pourrez atterrir sur sa page comme je l’ai fait pour Double Dagger ci-dessous

Ici, dans le tableau, vous verrez les valeurs de l’entité HTML. L’un d’eux est la représentation HTML standard pour le saisir – ‡

L’autre est l’encodage UTF-16 pour celui-ci – ‡

Celui qui reste contient la réponse à notre question ci-dessus. Le numéro correspondant est celui sur lequel nous avons mappé notre symbole dans le charmap de TinyMCE – 8225.

Comment puis-je en être sûr ?

Eh bien, lorsque vous ajoutez le plugin charmap à TinyMCE et que vous lancez votre site et accédez au CMS, vous pouvez ouvrir les outils de développement et consulter les sources pour voir tous les scripts chargés. Notre code de plugin est également chargé dans le plugin.min.js de TinyMCE. Ce code contient la liste des mappages existants. J’en ai donc choisi quelques-uns et les ai recherchés sur le site ci-dessus et ce premier numéro d’entité HTML est ce à quoi je les ai trouvés mappés dans charmap.

De plus, maintenant que ceux-ci ont été ajoutés, lorsque j’ai cliqué sur le symbole charmap dans la barre d’outils tinyMCE, une fenêtre contextuelle a été ouverte contenant un nouvel onglet appelé Défini par l’utilisateur sur le côté, qui répertoriait mes nouveaux symboles :

Voila… et ça fonctionne comme par magie ! Rapide et facile!