Blog

Lisez ce qui Nous Passionne: Développement Web et Technologies

Comment faire fonctionner les modules d’extension de RTE sur Umbraco 7

Ceux qui travaillent avec Umbraco 7 ont dû se rendre compte qu’il n’existait pas de modules d’extension pour personnaliser le RichText Editor (RTE). Jusqu’ici, les modules d’extension qui sont disponibles pour Umbraco 6 RTE ne semblent plus fonctionner dans la dernière version. Nous avons fait face à ces problèmes quand la demande d’un client concernant l’insertion des icônes Font Awesome dans le RTE nous est parvenue. Nous avons trouvé deux modules d’extension qui étaient assez similaires – l’une d’entre elles permettaient d’intégrer des onglets de YouTube ; tandis que l’autre permet d’insérer une valeur personnalisée à travers le menu déroulant. Mais, nous nous sommes rendu compte que même ces modules d’extension ne fonctionnaient pas sur Umbraco 7.

Umbraco utilise comme RTE TinyMCE. La Version 6 du CMS utilise la version 3.x de TinyMCE, toutefois Umbraco 7 utilise la version 4.x de TinyMCE comme RTE. Les fonctions de la version 3 de TinyMCE sont obsolètes pour la version 4. Cela veut dire qu’elles ne marchent pas et que les nouvelles fonctions disponibles pour la version 4 de TinyMCE doivent être utilisées. L’autre raison pour laquelle les modules d’extension pour RTE de Umbraco 6 ne fonctionnent pas pour Umbraco 7, est l’emplacement du dossier du code de package. Dans Umbraco, le code de package a pour habitude d’être placé dans le dossier umbraco_client , mais pour que le module d’extension pour RTE fonctionne dans Umbraco 7, le dossier du code de package doit être placé dans le dossier appelé Umbraco (umbraco/lib/tinymce/plugins/your-folder).

Si vous souhaitez développer un module d’extension pour RTE, vous pouvez procéder comme suit, comme nous l’avons fait pour insérer Font Awesome –

1. Créer un dossier avec le nom de votre module d’extension comme suit :

E.g:  umbraco/lib/tinymce/plugins/fontawesome

2. Rassembler les documents plugin.js et plugin.mis.js avec votre code personnalisé et tous les autres dossiers nécessaires comme .htm page avec le HTML requis, le dossier img avec l’icône gif etc.

3. Changer les fonctions de TinyMCE version 3 à version 4. Une très bonne documentation à ce propos est disponible sur le site web TinyMCE. Et voici le code pour insérer les valeurs dans le RTE dans TinyMCE 4.

E.g. top.tinymce.activeEditor.insertContent(‘<i class=”fa fa-edge'”> </i>’);

4. Changer le dossier tinymce.config dans le dossier config en ajoutant ce qui suit:

<command>

        <umbracoAlias>fontawesome</umbracoAlias>

        <icon>images/editor/fontawesome.gif</icon

        <tinyMceCommand value=”” userInterface=”false” frontendCommand=”fontawesome”>fontawesome< /tinyMceCommand

<priority>75</priority>

</command>

Note: Utiliser le même nom de dossier et le même nom de commande.

Dans la section de module d’extension, ajouter ceci :

<plugin loadOnFrontend=”true”>fontawesome</plugin>

Si vous utilisez des onglets qui ne sont pas permis dans TinyMCE, comme l’onglet i, procédez aux changements pour validElements dans config pour permettre ceci.

5. Dans le back office Umbraco, dans la section type de données, allez sur type de données Richtext editor, vérifiez votre commande afin que vous la voyez dans le RTE.

Ajouter les feuilles du type Fontawesome et activez les mêmes dans la partie type de donnée Richtext editor, afin de voir les icônes Fontawesome dans le RTE.

Si vous désirez en savoir plus sur nos services, n’hésitez-pas à nous contacter. Nous serions heureux de vous aider.

 

Elizabeth Raj | Blogueuse

 

Laissez un commentaire

Aix-en-Provence – Bangalore – Montréal

Nous valorisons la diversité et nous travaillons depuis 3 villes fantastiques, situées sur 3 continents et autant de fuseaux horaires différents.


Contactez-nous
Nous vous rappellerons dès que possible !