TinyMCE, plugin, ajouter un modèle, du contenu dans l’éditeur

TinyMCE Tiny Moxiecode Editor est un éditeur WYSIWYG What You See Is What You Get qui remplace une simple zone textarea en traduisant le contenu texte en code HTML HyperText Markup Language. L’éditeur est flexible, personnalisable et conçu en pensant à l’utilisateur. TinyMCE peut relever tous les défis, de la mise en œuvre la plus simple à une utilisation plus complexe.

Les textes Tinymce, Plugin, Insertion et Modèle sur fond de bâtiments se reflétant sur des canaux à Bruges en Belgique

Initialisation

On importe le fichier script TinyMCE, par exemple :

On initialise ensuite, dans un fichier javascript, un élément de formulaire textarea, avec l’identifiant myArea par exemple :

Pour initialiser tinyMCE avec un peu plus d’options, sans barre de menu, avec quelques plugins que l’on veillera à disposer dans les sources, des feuilles de styles personnalisées pour l’éditeur. Le code suivant est destiné à un plugin dans l’environnement WordPress, qui dispose de quelques extensions dans les sources. La variable UPDATE contient des données utiles passées avec la fonction localize_script(). La constante tinyProps contient un objet JSON afin d’être réutilisé pour d’autres éditeurs :

Écriture du plugin

Il s’agit d’écrire un plugin pour insérer un fichier modèle afin de servir de base à l’utilisateur. On insère dans l’éditeur un fichier HTML prédéfini dans un fichier disponible à l’URL Uniform Resource Locator https://domain.tld/wp-content/plugins/my-plugin/assets/templates/sommaire.html. Cette adresse est passée dans le fichier HTML grâce à la fonction wp_localize_script(). Cela peut-être n’importe quelle adresse valide. On accède au contenu du fichier grâce à l’API Application Programming Interface fetch() de javascipt. L’éditeur est accessible en argument du plugin, le contenu est inséré avec la méthode setContent() de l’objet editor de tinymce :

On écrit le plugin de la façon suivante dans un fichier /path/to/insertsummary/plugin.js :

Intégration du plugin

On écrit l’initialisation de tinymce dans le script d’initialisation :

On utilise la syntaxe spread de ES6 pour ajouter des propriétés à une configuration générale de tinymce.

Et hop, un plugin et un bouton personnalisé dans l’éditeur javascript tinyMCE.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables.