{"id":33711,"date":"2019-11-08T07:42:56","date_gmt":"2019-11-08T15:42:56","guid":{"rendered":"https:\/\/kinsta.com\/?p=8208"},"modified":"2024-09-18T09:24:47","modified_gmt":"2024-09-18T08:24:47","slug":"editeur-wordpress-tinymce","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/","title":{"rendered":"Diss\u00e9quer L&rsquo;\u00e9diteur WordPress TinyMCE"},"content":{"rendered":"<p>Ceci est la deuxi\u00e8me partie de deux articles d\u00e9di\u00e9s aux \u00e9diteurs WordPress. Le premier article parlait de l\u2019<a href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-texte-wordpress\/\">\u00e9diteur de texte de WordPress<\/a>, tandis que dans cet article, nous allons diss\u00e9quer l&rsquo;\u00e9diteur WordPress TinyMCE, et nous allons le plier \u00e0 notre volont\u00e9. Suivez les instructions ci-dessous, car nous vous montrerons comment faire :<\/p>\n<ul>\n<li><a href=\"#custom_styles\">Ajouter des styles personnalis\u00e9s \u00e0 l&rsquo;\u00e9diteur WordPress TinyMCE<\/a><\/li>\n<li><a href=\"#hidden_buttons\">Activer les boutons masqu\u00e9s<\/a><\/li>\n<li><a href=\"#existing_plugins\">Am\u00e9lioration de l&rsquo;\u00e9diteur WordPress TinyMCE avec les extensions existantes<\/a><\/li>\n<li><a href=\"#custom_plugins\">D\u00e9velopper des extensions WordPress TinyMCE personnalis\u00e9s<\/a><\/li>\n<li><a href=\"#tinymce_advanced\">Utiliser une extension WordPress gratuite pour ajouter des styles et des boutons \u00e0 TinyMCE<\/a><\/li>\n<\/ul>\n<p>\u00a0<\/p>\n<figure style=\"width: 649px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2016\/12\/tinymce.png\" alt=\"TinyMCE\" width=\"649\" height=\"234\"><figcaption class=\"wp-caption-text\">TinyMCE est un \u00e9diteur WYSIWYG bas\u00e9 sur un navigateur \u00e9crit en JavaScript et publi\u00e9 sous forme de logiciel open source <a href=\"https:\/\/en.wikipedia.org\/wiki\/LGPL\">LGPL<\/a><\/figcaption><\/figure>\n<h2>\u00c9diteur WordPress TinyMCE<\/h2>\n<p><strong>\u00a0<\/strong><\/p>\n<p><strong>Mise \u00e0 jour<\/strong> : WordPress 5.0 changera la fa\u00e7on dont nous \u00e9crivons et publions le contenu. N&rsquo;oubliez pas de jeter un coup d&rsquo;\u0153il \u00e0 notre guide : <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-5-0\/\">Quoi de neuf dans WordPress 5.0 (Comment se pr\u00e9parer \u00e0 Gutenberg)<\/a><\/p>\n<p>Par d\u00e9faut, WordPress l&rsquo;<a href=\"https:\/\/www.tinymce.com\/\">\u00e9diteur TinyMCE<\/a> fournit deux ligne de boutons pour cr\u00e9er, modifier et formater le contenu des publications. La premi\u00e8re ligne (la barre d&rsquo;outils principale) comprend des fonctionnalit\u00e9s de style et de formatage. Des contr\u00f4les suppl\u00e9mentaires permettent d&rsquo;ajouter, de modifier et de supprimer des ancres, d&rsquo;ajouter la\u00a0balise <strong>&lt;!-more-&gt;<\/strong>, d&rsquo;activer le mode sans distraction. Tous ces boutons devraient sembler assez familiers \u00e0 toute personne ayant des connaissances de base en traitement de texte.<\/p>\n<p>Le bouton \u00ab Ouvrir\/Fermer la barre d\u2019outils \u00bb de la barre d&rsquo;outils permet de d\u00e9plier la barre d&rsquo;outils de l&rsquo;\u00e9diteur avanc\u00e9 (la deuxi\u00e8me rang\u00e9e de boutons), qui propose un menu d&rsquo;\u00e9l\u00e9ments de texte (paragraphe, en-t\u00eates et texte pr\u00e9format\u00e9), des commandes de style plus nombreuses et quelques fonctions suppl\u00e9mentaires (Coller en texte, Nettoyer la mise en forme, Caract\u00e8res sp\u00e9ciaux, Annuler et R\u00e9tablir) qui sont tr\u00e8s pratiques de plusieurs mani\u00e8res.<\/p>\n<figure style=\"width: 684px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2016\/12\/caracteres-speciaux.png\" alt=\"Caract\u00e8res sp\u00e9ciaux\" width=\"684\" height=\"379\"><figcaption class=\"wp-caption-text\">Le tableau des Caract\u00e8res sp\u00e9ciaux permet aux utilisateurs d&rsquo;ajouter rapidement des entit\u00e9s HTML<\/figcaption><\/figure>\n<p>Enfin, le bouton point d&rsquo;interrogation fournit une liste de raccourcis clavier qui am\u00e9liorent l&rsquo;exp\u00e9rience d&rsquo;\u00e9criture de l&rsquo;utilisateur.<\/p>\n<figure style=\"width: 564px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2016\/12\/panneau-raccourcis-tinymce.png\" alt=\"Le panneau de raccourcis TinyMCE\" width=\"564\" height=\"481\"><figcaption class=\"wp-caption-text\">Le panneau de raccourcis TinyMCE<\/figcaption><\/figure>\n<p>Maintenant, ajoutez et stylisez votre contenu dans l&rsquo;\u00e9diteur visuel, puis passez \u00e0 l&rsquo;\u00e9diteur de texte. Vous trouverez la structure HTML correspondante car WordPress conservera vos donn\u00e9es lorsque vous passerez du mode visuel au mode texte.<\/p>\n<p>Les barres d&rsquo;outils primaires et avanc\u00e9es par d\u00e9faut fournissent un bon nombre de fonctionnalit\u00e9s qui peuvent \u00eatre \u00e9tendues avec des boutons et des contr\u00f4les suppl\u00e9mentaires. Beaucoup de ces boutons sont disponibles dans TinyMCE, et nous avons juste besoin de les activer pour les mettre en action. De plus, nous pouvons ajouter un bon nombre de fonctionnalit\u00e9s avanc\u00e9es en installant une ou plusieurs des extensions existantes.<\/p>\n<p>Et si tous ces boutons ne suffisent pas, nous pouvons am\u00e9liorer l&rsquo;\u00e9diteur avec vos fonctionnalit\u00e9s les plus cool, en d\u00e9veloppant des extensions personnalis\u00e9es.<\/p>\n<p>Ceci \u00e9tant dit, commen\u00e7ons \u00e0 plonger \u00e0 partir de l&rsquo;utilisation la plus simple et la plus courante de l&rsquo;API.<\/p>\n<h2 id=\"custom_styles\">Ajout de Styles Personnalis\u00e9s \u00e0 L&rsquo;\u00e9diteur WordPress TinyMCE<\/h2>\n<p>Supposons que vous ayez besoin de fournir un moyen facile d&rsquo;ajouter des styles personnalis\u00e9s dans le contenu des publications depuis TinyMCE. C&rsquo;est une proc\u00e9dure en deux \u00e9tapes :<\/p>\n<ul>\n<li>nous devons d&rsquo;abord activer un menu d\u00e9roulant cach\u00e9 appel\u00e9 Styleselect,<\/li>\n<li>alors nous devons d\u00e9finir chaque style que nous voulons ajouter au menu Styleselect.<\/li>\n<\/ul>\n<p>Nous pouvons accomplir la premi\u00e8re t\u00e2che en filtrant le tableau des boutons TinyMCE. La barre d&rsquo;outils par d\u00e9faut affiche une ou deux lignes de boutons, mais nous pouvons activer jusqu&rsquo;\u00e0 quatre lignes de barre d&rsquo;outils gr\u00e2ce aux <a href=\"https:\/\/codex.wordpress.org\/Plugin_API\/Filter_Reference\/mce_buttons,_mce_buttons_2,_mce_buttons_3,_mce_buttons_4\">filtres suivants<\/a> :<\/p>\n<ul>\n<li><strong>mce_buttons<\/strong> filtre les boutons de la barre d&rsquo;outils primaire (la premi\u00e8re ligne), qui est toujours visible ;<\/li>\n<li><strong>mce_buttons_2<\/strong> filtre les boutons avanc\u00e9s de la barre d&rsquo;outils (la deuxi\u00e8me ligne), qui peuvent \u00eatre activ\u00e9s ou d\u00e9sactiv\u00e9s par l&rsquo;utilisateur ;<\/li>\n<li><strong>mce_buttons_3<\/strong> inactif par d\u00e9faut ;<\/li>\n<li><strong>mce_buttons_4<\/strong> inactif par d\u00e9faut.<\/li>\n<\/ul>\n<p>Nous pouvons hooker une fonction de callback \u00e0 l&rsquo;un de ces filtres pour afficher\/masquer les boutons existants, comme le menu Styleselect. La fonction suivante permet d&rsquo;activer le menu de la deuxi\u00e8me ligne :<\/p>\n<pre><code class=\"language-php\">function my_mce_buttons_2( $buttons ) {\n\tarray_unshift( $buttons, 'styleselect' );\n\treturn $buttons;\n}\nadd_filter( 'mce_buttons_2', 'my_mce_buttons_2' );\n<\/code><\/pre>\n<p>La fonction PHP <a href=\"http:\/\/php.net\/manual\/en\/function.array-unshift.php\">array_unshift<\/a> pr\u00e9c\u00e8de l&rsquo;\u00e9l\u00e9ment <strong>styleselect <\/strong>en face du tableau <strong>$buttons<\/strong>.<\/p>\n<figure style=\"width: 652px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2016\/12\/styleselect.png\" alt=\"Le menu d\u00e9roulant Format affichera une liste de tous les styles CSS disponibles.\" width=\"652\" height=\"454\"><figcaption class=\"wp-caption-text\">Le menu d\u00e9roulant Format affichera une liste de tous les styles CSS disponibles.<\/figcaption><\/figure>\n<p>Maintenant que le bouton a \u00e9t\u00e9 activ\u00e9, nous pouvons enregistrer nos styles personnalis\u00e9s en filtrant un tableau de param\u00e8tres de configuration TinyMCE \u00e0 travers le filtre <strong>tiny_mce_before_init<\/strong><strong>.<br \/>\n<\/strong>Regardez la fonction suivante :<\/p>\n<pre><code class=\"language-php\">function my_tiny_mce_before_init( $mceInit ) {\n\t$style_formats = array(\n\t\tarray(\n\t\t\t'title' =&gt; 'PHP',\n\t\t\t'block' =&gt; 'code',\n\t\t\t'classes' =&gt; 'language-php'\n\t\t)\t\n\t);\n\t$mceInit['style_formats'] = json_encode( $style_formats );\t\n\treturn $mceInit;    \n}\nadd_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );\n<\/code><\/pre>\n<p>L&rsquo;\u00e9l\u00e9ment <strong>style_formats<\/strong> est un tableau d&rsquo;\u00e9l\u00e9ments cod\u00e9s en JSON. Chaque \u00e9l\u00e9ment d\u00e9finit les param\u00e8tres de configuration d&rsquo;un seul \u00e9l\u00e9ment de menu. La fonction ci-dessus remplace les styles par d\u00e9faut par un seul \u00e9l\u00e9ment personnalis\u00e9 qui enveloppe le texte s\u00e9lectionn\u00e9 dans un \u00e9l\u00e9ment <strong>code.language-php<\/strong><strong>.<\/strong><\/p>\n<figure style=\"width: 653px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2016\/12\/styleselect-contenant-seul-element-personnalise.png\" alt=\"Le menu d\u00e9roulant Styleselect contenant un seul \u00e9l\u00e9ment personnalis\u00e9\" width=\"653\" height=\"256\"><figcaption class=\"wp-caption-text\">Le menu d\u00e9roulant Styleselect contenant un seul \u00e9l\u00e9ment personnalis\u00e9<\/figcaption><\/figure>\n<p>Dans notre exemple, nous d\u00e9finissons trois propri\u00e9t\u00e9s pour un seul \u00e9l\u00e9ment de menu :<\/p>\n<ul>\n<li><strong>title<\/strong> : le titre de l&rsquo;\u00e9l\u00e9ment de menu ;<\/li>\n<li><strong>block<\/strong> : l&rsquo;\u00e9l\u00e9ment de bloc \u00e0 produire ;<\/li>\n<li><strong>classes<\/strong> : liste s\u00e9par\u00e9e par des espaces des classes CSS \u00e0 appliquer \u00e0 la s\u00e9lection.<\/li>\n<\/ul>\n<p>Nous avons ajout\u00e9 l\u2019\u00e9l\u00e9ment <strong>code<\/strong> sous forme de bloc, de sorte qu&rsquo;il ne sera appliqu\u00e9 qu&rsquo;une seule fois \u00e0 la s\u00e9lection compl\u00e8te. L&rsquo;ajouter en tant qu&rsquo;\u00e9l\u00e9ment<strong> inline<\/strong> appliquerait la balise de code \u00e0 chaque ligne s\u00e9lectionn\u00e9e.<\/p>\n<p>Nous pouvons ajouter d&rsquo;autres \u00e9l\u00e9ments et les regrouper par cat\u00e9gorie, comme le montre l&rsquo;exemple suivant :<\/p>\n<pre><code class=\"language-php\">function my_tiny_mce_before_init( $mceInit ) {\n\t$style_formats = array(\n\t\tarray(\n\t\t\t'title' =&gt; 'Code language',\n\t\t\t'items' =&gt; array(\n\t\t\t\tarray(\n\t\t\t\t\t'title' =&gt; 'PHP',\n\t\t\t\t\t'block' =&gt; 'code',\n\t\t\t\t\t'classes' =&gt; 'language-php'\n\t\t\t\t),\n\t\t\t\tarray(\n\t\t\t\t\t'title' =&gt; 'CSS',\n\t\t\t\t\t'block' =&gt; 'code',\n\t\t\t\t\t'classes' =&gt; 'language-css'\n\t\t\t\t),\n\t\t\t\tarray(\n\t\t\t\t\t'title' =&gt; 'HTML',\n\t\t\t\t\t'block' =&gt; 'code',\n\t\t\t\t\t'classes' =&gt; 'language-html'\n\t\t\t\t)\n\t\t\t)\n\t\t)\t\n\t);\n\n\t$mceInit['style_formats'] = json_encode( $style_formats );\n\t\n\treturn $mceInit;    \n}\nadd_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );\n<\/code><\/pre>\n<p>L&rsquo;\u00e9l\u00e9ment <strong>style_formats<\/strong> est un tableau multidimensionnel de param\u00e8tres. Dans cet exemple, nous avons ajout\u00e9 un \u00e9l\u00e9ment de premier niveau (langage de code) et trois sous-\u00e9l\u00e9ments (PHP, CSS, HTML). L&rsquo;image ci-dessous montre le menu r\u00e9sultant.<\/p>\n<figure style=\"width: 652px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2016\/12\/pouvons-regrouper-elements-menu-reduire.png\" alt=\"Nous pouvons regrouper les \u00e9l\u00e9ments de menu et r\u00e9duire la taille du menu \u00e0 l'\u00e9cran.\" width=\"652\" height=\"225\"><figcaption class=\"wp-caption-text\">Nous pouvons regrouper les \u00e9l\u00e9ments de menu et r\u00e9duire la taille du menu \u00e0 l&rsquo;\u00e9cran.<\/figcaption><\/figure>\n<p>TinyMCE applique les styles aux \u00e9l\u00e9ments s\u00e9lectionn\u00e9s, mais n&rsquo;est pas au courant de ces styles, donc ils ne seront pas appliqu\u00e9s au contenu de l&rsquo;\u00e9diteur. Si un aper\u00e7u en temps r\u00e9el est n\u00e9cessaire, nous devrons enregistrer une feuille de style personnalis\u00e9e avec l&rsquo;option fonction <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_editor_style\/\">add_editor_style()<\/a> :<\/p>\n<pre><code class=\"language-php\">\/**\n * Registers an editor stylesheet for a custom theme.\n *\/\nfunction my_theme_add_editor_styles() {\n\tadd_editor_style( 'css\/my-editor-style.css' );\n}\nadd_action( 'admin_init', 'my_theme_add_editor_styles' );\n<\/code><\/pre>\n<p>Cette fonction enregistre une feuille de style qui sera utilis\u00e9e par WordPress TinyMCE pour styliser le contenu dans l&rsquo;\u00e9diteur.<\/p>\n<p>Supposons, par exemple, que nous voulions appliquer diff\u00e9rentes couleurs au code PHP, CSS et HTML. Pour accomplir cette t\u00e2che, nous ajouterons les d\u00e9clarations suivantes dans la feuille de style<strong> css\/my-editor-style.css :<\/strong><\/p>\n<pre><code class=\"language-css\">.language-php{ color: red; }\n.language-css{ color: green; }\n.language-html{ color: blue; }\n<\/code><\/pre>\n<p>TinyMCE produira la sortie affich\u00e9e dans l&rsquo;image suivante.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2016\/12\/add_editor_styles.png\" alt=\"add editor styles\" width=\"783\" height=\"454\"><\/p>\n<blockquote><p>Note : Nous n&rsquo;avons examin\u00e9 que quelques param\u00e8tres de configuration, mais l&rsquo;API TinyMCE donne aux d\u00e9veloppeurs un grand contr\u00f4le sur l&rsquo;\u00e9diteur. Voir la documentation de TinyMCE pour <a href=\"https:\/\/www.tinymce.com\/docs\/configure\/content-formatting\/#formats\">la liste compl\u00e8te des \u00e9l\u00e9ments et propri\u00e9t\u00e9s<\/a> avec quelques exemples d&rsquo;utilisation.<\/p><\/blockquote>\n<h2 id=\"hidden_buttons\">Activer les Boutons Masqu\u00e9s de WordPress TinyMCE<\/h2>\n<p>Nous pouvons ajouter des boutons \u00e0 l&rsquo;\u00e9diteur visuel de plusieurs fa\u00e7ons. Dans de nombreux cas, nous ne sommes pas oblig\u00e9s de construire un bouton personnalis\u00e9 car TinyMCE fournit un bon nombre de boutons masqu\u00e9s que nous pouvons facilement activer.<br \/>\nL&rsquo;un de ces boutons est le menu d\u00e9roulant <strong>Styleselect<\/strong>, mais nous avons une longue liste de boutons inactifs que nous pouvons activer en filtrant les tableaux de boutons \u00e0 travers un des filtres<strong> mce_buttons_{n}<\/strong> (voir la documentation de TinyMCE pour <a href=\"https:\/\/www.tinymce.com\/docs-3x\/reference\/buttons\/\">la liste compl\u00e8te des boutons disponibles<\/a>).<\/p>\n<p>Prenons l&rsquo;exemple suivant :<\/p>\n<pre><code class=\"language-php\">function my_mce_buttons_3( $buttons ) {\t\n\t$buttons[] = 'superscript';\n\t$buttons[] = 'subscript';\n\treturn $buttons;\n}\nadd_filter( 'mce_buttons_3', 'my_mce_buttons_3' );\n<\/code><\/pre>\n<p>La fonction de callback ci-dessus ajoute les \u00e9l\u00e9ments en <strong>superscript<\/strong> et en <strong>subscript<\/strong> \u00e0 la fin du tableau <strong>$buttons<\/strong>.<\/p>\n<figure style=\"width: 500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2016\/12\/buttons-boutons-3.png\" alt=\"L'image montre deux boutons suppl\u00e9mentaires ajout\u00e9s \u00e0 la troisi\u00e8me ligne de la barre d'outils TinyMCE\" width=\"500\" height=\"192\"><figcaption class=\"wp-caption-text\">L&rsquo;image montre deux boutons suppl\u00e9mentaires ajout\u00e9s \u00e0 la troisi\u00e8me ligne de la barre d&rsquo;outils TinyMCE<\/figcaption><\/figure>\n<p>Voici une liste des boutons masqu\u00e9s disponibles dans WordPress TinyMCE :<\/p>\n<ul>\n<li><strong>cut<\/strong><\/li>\n<li><strong>copy<\/strong><\/li>\n<li><strong>paste<\/strong><\/li>\n<li><strong>hr<\/strong><\/li>\n<li><strong>formatselect<\/strong><\/li>\n<li><strong>fontselect<\/strong><\/li>\n<li><strong>fontsizeselect<\/strong><\/li>\n<li><strong>styleselect<\/strong><\/li>\n<li><strong>subscript<\/strong> (pr\u00e9c\u00e9demment <strong>sub<\/strong>)<\/li>\n<li><strong>superscript<\/strong> (pr\u00e9c\u00e9demment <strong>sup<\/strong>)<\/li>\n<li><strong>backcolor<\/strong><\/li>\n<li><strong>newdocument<\/strong><\/li>\n<\/ul>\n<figure style=\"width: 582px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2016\/12\/tinymce-boutons-disponibles.png\" alt=\"L'image montre la barre d'outils TinyMCE avec tous les boutons disponibles\" width=\"582\" height=\"250\"><figcaption class=\"wp-caption-text\">L&rsquo;image montre la barre d&rsquo;outils TinyMCE avec tous les boutons disponibles<\/figcaption><\/figure>\n<p>Si aucun de ces boutons ne correspond \u00e0 nos besoins, nous pouvons fournir plus de fonctionnalit\u00e9s \u00e0 l&rsquo;\u00e9diteur, gr\u00e2ce \u00e0 un bon nombre d\u2019extensions officielles.<\/p>\n<h2 id=\"existing_plugins\">Am\u00e9lioration de L&rsquo;\u00e9diteur Visuel avec les Extensions TinyMCE<\/h2>\n<p>Supposons que votre but est d&rsquo;inclure l&rsquo;\u00e9l\u00e9ment <a href=\"https:\/\/www.tinymce.com\/docs-3x\/reference\/plugins\/Plugin3x@table\/\">TinyMCE Table<\/a> dans l&rsquo;\u00e9diteur visuel via une extension WordPress.<\/p>\n<p>Tout d&rsquo;abord, vous devez t\u00e9l\u00e9charger le paquet Dev \u00e0 partir de <a href=\"https:\/\/www.tinymce.com\/download\/\">site de TinyMCE<\/a>. D\u00e9compressez le fichier zip et r\u00e9cup\u00e9rez le fichier <strong>plugin.min.js<\/strong> du dossier<strong> \/js\/tinymce\/plugin\/table.<\/strong><\/p>\n<p>Cr\u00e9ez les dossiers suivants dans <strong>\/wp-content\/plugins<\/strong> :<\/p>\n<ul>\n<li>\/wp-content\/plugins\/tinymce-example-plugin\/<\/li>\n<li>\/wp-content\/plugins\/tinymce-example-plugin\/mce\/table<\/li>\n<\/ul>\n<p>Lorsque vous avez termin\u00e9, cr\u00e9ez un nouveau fichier <strong>tinymce-exemple-plugin.php<\/strong> dans le dossier racine de l\u2019extension, et t\u00e9l\u00e9versez le fichier<strong> plugin.min.js<\/strong> dans le dossier table (voir l&rsquo;image ci-dessous).<\/p>\n<figure style=\"width: 310px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2016\/12\/structure-fichier-extension.png\" alt=\"L'image montre la structure de fichier de l\u2019extension\" width=\"310\" height=\"132\"><figcaption class=\"wp-caption-text\">L&rsquo;image montre la structure de fichier de l\u2019extension<\/figcaption><\/figure>\n<p>Ajoutez maintenant les lignes suivantes dans <strong>tinymce-example-plugin.php<\/strong> :<\/p>\n<pre><code class=\"language-php\">&lt;?php\n\/**\n * @package TinyMCE_example_plugin\n * @version 1.0\n *\/\n\/*\nPlugin Name: TinyMCE example plugin\nPlugin URI: http:\/\/wordpress.org\/extend\/plugins\/#\nDescription: This is an example plugin \nAuthor: Your Name\nVersion: 1.0\nAuthor URI: http:\/\/yourdomain.com\/\n*\/ \n<\/code><\/pre>\n<p>Afin d&rsquo;inclure le bouton Tableau dans l&rsquo;\u00e9diteur WordPress TinyMCE nous avons juste besoin de deux filtres :<br \/>\n<strong>mce_buttons<\/strong> ajoute de nouveaux boutons \u00e0 la barre d&rsquo;outils primaire de TinyMCE (nous pouvons utiliser n&rsquo;importe lequel des filtres<br \/>\n<strong>mce_buttons_{n}<\/strong>, selon la ligne o\u00f9 le bouton doit \u00eatre affich\u00e9)<br \/>\n<strong>mce_external_plugins<\/strong> charge une extension TinyMCE externe.<\/p>\n<p>Voici le code du fichier de l\u2019extension :<\/p>\n<pre><code class=\"language-php\">function example_plugin_register_buttons( $buttons ) {\n   $buttons[] = 'table';\n\treturn $buttons;\n}\n\/\/ add new buttons\nadd_filter( 'mce_buttons', 'example_plugin_register_buttons' );\n\nfunction example_plugin_register_plugin( $plugin_array ) {\n   $plugin_array['table'] = plugins_url( '\/mce\/table\/plugin.min.js', __FILE__ );\n   return $plugin_array;\n}\n\/\/ Load the TinyMCE plugin\nadd_filter( 'mce_external_plugins', 'example_plugin_register_plugin' );\n<\/code><\/pre>\n<p>La premi\u00e8re fonction ajoute un nouveau bouton \u00e0 la barre d&rsquo;outils principale, tandis que la seconde charge une extension \u00e0 partir de l&rsquo;URL sp\u00e9cifi\u00e9e. La fonction<strong> plugins_url()<\/strong> r\u00e9cup\u00e8re l&rsquo;URL absolue vers le fichier sp\u00e9cifi\u00e9 sous le r\u00e9pertoire de l\u2019extension (lire <a href=\"https:\/\/codex.wordpress.org\/Function_Reference\/plugins_url\">plus d&rsquo;informations sur le Codex<\/a>).<\/p>\n<p>Maintenant nous pouvons sauvegarder le fichier et activer l\u2019extension. L&rsquo;image ci-dessous montre la barre d&rsquo;outils am\u00e9lior\u00e9e.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-8218 size-full\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2016\/12\/table.png\" alt=\"table\" width=\"634\" height=\"310\"><\/p>\n<p>C&rsquo;est tout. En suivant la m\u00eame proc\u00e9dure, nous pouvons ajouter toutes les extensions TinyMCE existantes dans l&rsquo;\u00e9diteur visuel de WordPress.<\/p>\n<p>Vous pouvez t\u00e9l\u00e9charger <a href=\"https:\/\/kinsta.com\/wp-content\/uploads\/2016\/12\/tinymce-example-plugin.zip\">le fichier .zip de l\u2019extension<\/a>, ou voir <a href=\"https:\/\/gist.github.com\/carlodaniele\/0c63b192be42665d4143cdb5412e570a\">le code PHP de cet exemple sur Gist<\/a>.<\/p>\n<h2 id=\"custom_plugins\">Construire une Extension TinyMCE<\/h2>\n<p>Enfin, nous pouvons construire notre extension TinyMCE personnalis\u00e9e. Supposons que vous vouliez ajouter un bouton pour permettre aux utilisateurs d&rsquo;envelopper le contenu s\u00e9lectionn\u00e9 dans les balises suivantes :<\/p>\n<pre><code class=\"language-php\">&lt;pre&gt;&lt;code&gt;Selected text&lt;\/code&gt;&lt;\/pre&gt;<\/code><\/pre>\n<p>On peut m\u00eame d\u00e9cider d&rsquo;ajouter une classe CSS \u00e0 la <strong>balise<\/strong> &lt;code<strong>&gt;,<\/strong> pour fournir un support du surligneur de code <a href=\"http:\/\/prismjs.com\/\">Prism. <\/a>Nous devons :<\/p>\n<ul>\n<li>enregistrer un bouton TinyMCE personnalis\u00e9 et dans une extension WordPress ;<\/li>\n<li>d\u00e9velopper l\u2019extension TinyMCE ;<\/li>\n<\/ul>\n<p>Nous savons d\u00e9j\u00e0 comment enregistrer une extension et ajouter un bouton dans WordPress TinyMCE :<\/p>\n<pre><code class=\"language-php\">function example_plugin_register_buttons( $buttons ) {\n\t$buttons[] = 'prism';\n\treturn $buttons;\n}\n\/\/ add new buttons\nadd_filter( 'mce_buttons', 'example_plugin_register_buttons' );\n\nfunction example_plugin_register_plugin( $plugin_array ) {\n\t$plugin_array['prism'] = plugins_url( '\/mce\/prism\/plugin.js', __FILE__ );\n\treturn $plugin_array;\n}\n\/\/ Load the TinyMCE plugin\nadd_filter( 'mce_external_plugins', 'example_plugin_register_plugin' );\n<\/code><\/pre>\n<p>C&rsquo;est exactement le m\u00eame code que dans l&rsquo;exemple pr\u00e9c\u00e9dent, avec la seule diff\u00e9rence que maintenant nous enregistrons une extension personnalis\u00e9e nomm\u00e9e <strong>prism<\/strong>.<br \/>\nMaintenant, cr\u00e9ons le fichier<strong> plugin.js<\/strong> suivant :<\/p>\n<pre><code class=\"language-javascript\">(function() {\n\tvar languages = ['css', 'php', 'html', 'javascript'];\n\t\n\ttinymce.PluginManager.add( 'prism', function( editor ){\n\t\t\n\t\tvar items = [];\n\n\t\ttinymce.each( languages, function( languageName ){\n\t\t\titems.push({\n\t\t\t\ttext: languageName,\n\t\t\t\tonclick: function(){\n\t\t\t\t\tvar content = tinyMCE.activeEditor.selection.getContent();\n\t\t\t\t\teditor.insertContent( '&lt;pre&gt;&lt;code class=\"language-' + languageName + '\"&gt;' + content + '&lt;\/code&gt;&lt;\/pre&gt;' );\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\teditor.addButton( 'prism', {\n\t\t\ttype: 'menubutton',\n\t\t\ttext: 'Prism',\n\t\t\ticon: 'code',\n\t\t\tmenu: items\n\t\t});\n\n\t});\n})();\n<\/code><\/pre>\n<p>Ce code est aussi <a href=\"https:\/\/gist.github.com\/carlodaniele\/7ffcd63b33c01d4284b52ad0866a4045\">disponible sur Gist<\/a>.<\/p>\n<p>Il n&rsquo;est pas dans nos objectifs de nous plonger dans les API TinyMCE, et vous trouverez tout ce que vous avez besoin de savoir dans les <a href=\"https:\/\/www.tinymce.com\/docs\/demo\/\">documents TinyMCE pour les d\u00e9veloppeurs<\/a>.<\/p>\n<p>Ce fichier doit \u00eatre plac\u00e9 dans le sous-dossier de notre extension<strong> \/mce\/prism\/<\/strong>. La fonction JS it\u00e8re parmi les \u00e9l\u00e9ments du tableau des langues et pousse un nouvel objet dans le tableau des \u00e9l\u00e9ments pour chaque langue. La m\u00e9thode addButton cr\u00e9e le bouton de menu Prism, et ajoute un \u00e9l\u00e9ment de menu pour chaque \u00e9l\u00e9ment du tableau.<\/p>\n<p>Enregistrez, t\u00e9l\u00e9versez et rafra\u00eechissez, et votre magnifique bouton de menu d\u00e9roulant appara\u00eetra dans toute sa beaut\u00e9.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-8212 size-full\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2016\/12\/prism_menu_bouton.png\" alt=\"prism menu button\" width=\"676\" height=\"402\"><\/p>\n<p>Pour plus d&rsquo;informations sur le d\u00e9veloppement des extensions TinyMCE, consultez la section <a href=\"https:\/\/www.tinymce.com\/docs\/advanced\/creating-a-plugin\/\">documentation en ligne pour les d\u00e9veloppeurs<\/a>.<\/p>\n<h2 id=\"tinymce_advanced\">Extension TinyMCE Advanced pour WordPress<\/h2>\n<p>Si vous n&rsquo;\u00eates pas d\u00e9veloppeur, vous pouvez \u00e9galement am\u00e9liorer l&rsquo;\u00e9diteur visuel. <a href=\"https:\/\/wordpress.org\/plugins\/tinymce-advanced\/\">TinyMCE Advanced<\/a> est une extension WordPress gratuite qui apporte les fonctionnalit\u00e9s de quinze extensions TinyMCE \u00e0 l&rsquo;\u00e9diteur visuel par d\u00e9faut.<\/p>\n<p>Gr\u00e2ce \u00e0 TinyMCE Advanced, les utilisateurs pourront ajouter, supprimer, r\u00e9arranger les boutons sur les quatre lignes de la barre d&rsquo;outils de l&rsquo;\u00e9diteur. De plus, l\u2019extension offre une option pour activer un menu au-dessus de la barre d&rsquo;outils.<\/p>\n<figure id=\"attachment_8223\" aria-describedby=\"caption-attachment-8223\" style=\"width: 842px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8223 size-full\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2016\/12\/tynymce_reglages-editeur.png\" alt=\"Depuis la page des r\u00e9glages de l'\u00e9diteur, nous pouvons ajouter, supprimer et organiser des boutons sur la barre d'outils TynyMCE\" width=\"842\" height=\"606\"><figcaption id=\"caption-attachment-8223\" class=\"wp-caption-text\">Depuis la page des r\u00e9glages de l&rsquo;\u00e9diteur, nous pouvons ajouter, supprimer et organiser des boutons sur la barre d&rsquo;outils TynyMCE<\/figcaption><\/figure>\n<p>From the plugin options page we can enable several advanced features, like the <strong>Table<\/strong> button, the <strong>Font Family<\/strong> and <strong>Font Size<\/strong> menus, the <strong>Show blocks<\/strong> and <strong>Show invisible characters<\/strong> buttons.<\/p>\n<p>Other options allow users to determine the editor that will be affected by new settings, and more.<\/p>\n<figure id=\"attachment_8222\" aria-describedby=\"caption-attachment-8222\" style=\"width: 600px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-8222 size-full\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2016\/12\/tinymce_advanced-fournit-reglages-editeur.png\" alt=\"TinyMCE Advanced fournit une liste compl\u00e8te des r\u00e9glages de l'\u00e9diteur\" width=\"600\" height=\"294\"><figcaption id=\"caption-attachment-8222\" class=\"wp-caption-text\">TinyMCE Advanced fournit une liste compl\u00e8te des r\u00e9glages de l&rsquo;\u00e9diteur<\/figcaption><\/figure>\n<h2>Conclusions<\/h2>\n<p>L&rsquo;API TinyMCE fournit beaucoup de choses pour jouer avec. Nous pouvons activer des fonctionnalit\u00e9s cach\u00e9es ou enregistrer des plugins externes. Et si aucune des fonctionnalit\u00e9s disponibles ne nous suffit, nous pouvons nous amuser avec l&rsquo;API et cr\u00e9er des extensions personnalis\u00e9es. Avez-vous d&rsquo;autres id\u00e9es pour am\u00e9liorer l&rsquo;\u00e9diteur WordPress TinyMCE ?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>An in-depth dissection of WordPress TinyMCE editor: what it is, how we can add functionalities and how we can create our custom plugins<\/p>\n","protected":false},"author":36,"featured_media":33736,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[289,33],"topic":[1028],"class_list":["post-33711","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-tinymce","tag-wordpress","topic-developpement-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Diss\u00e9quer L&#039;\u00e9diteur WordPress TinyMCE<\/title>\n<meta name=\"description\" content=\"Jetez un coup d&#039;\u0153il \u00e0 cette dissection en profondeur de l&#039;\u00e9diteur WordPress TinyMCE : de quoi s&#039;agit-il, et comment pouvez-vous ajouter des fonctionnalit\u00e9s suppl\u00e9mentaires et vos propres plugins personnalis\u00e9s.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Diss\u00e9quer L&#039;\u00e9diteur WordPress TinyMCE\" \/>\n<meta property=\"og:description\" content=\"Jetez un coup d&#039;\u0153il \u00e0 cette dissection en profondeur de l&#039;\u00e9diteur WordPress TinyMCE : de quoi s&#039;agit-il, et comment pouvez-vous ajouter des fonctionnalit\u00e9s suppl\u00e9mentaires et vos propres plugins personnalis\u00e9s.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-08T15:42:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-18T08:24:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/11\/FR-Homepage-featured-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Jetez un coup d&#039;\u0153il \u00e0 cette dissection en profondeur de l&#039;\u00e9diteur WordPress TinyMCE : de quoi s&#039;agit-il, et comment pouvez-vous ajouter des fonctionnalit\u00e9s suppl\u00e9mentaires et vos propres plugins personnalis\u00e9s.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/wp-content\/uploads\/2016\/12\/wordpress-tinymce-editor.png\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Diss\u00e9quer L&rsquo;\u00e9diteur WordPress TinyMCE\",\"datePublished\":\"2019-11-08T15:42:56+00:00\",\"dateModified\":\"2024-09-18T08:24:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/\"},\"wordCount\":2332,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/11\/editeur-wordpress-tinymce.png\",\"keywords\":[\"TinyMCE\",\"WordPress\"],\"articleSection\":[\"D\u00e9veloppement WordPress\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/\",\"name\":\"Diss\u00e9quer L'\u00e9diteur WordPress TinyMCE\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/11\/editeur-wordpress-tinymce.png\",\"datePublished\":\"2019-11-08T15:42:56+00:00\",\"dateModified\":\"2024-09-18T08:24:47+00:00\",\"description\":\"Jetez un coup d'\u0153il \u00e0 cette dissection en profondeur de l'\u00e9diteur WordPress TinyMCE : de quoi s'agit-il, et comment pouvez-vous ajouter des fonctionnalit\u00e9s suppl\u00e9mentaires et vos propres plugins personnalis\u00e9s.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/11\/editeur-wordpress-tinymce.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/11\/editeur-wordpress-tinymce.png\",\"width\":1460,\"height\":730,\"caption\":\"Diss\u00e9quer L'\u00e9diteur WordPress TinyMCE\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"D\u00e9veloppement WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/developpement-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Diss\u00e9quer L&#8217;\u00e9diteur WordPress TinyMCE\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Diss\u00e9quer L'\u00e9diteur WordPress TinyMCE","description":"Jetez un coup d'\u0153il \u00e0 cette dissection en profondeur de l'\u00e9diteur WordPress TinyMCE : de quoi s'agit-il, et comment pouvez-vous ajouter des fonctionnalit\u00e9s suppl\u00e9mentaires et vos propres plugins personnalis\u00e9s.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/","og_locale":"fr_FR","og_type":"article","og_title":"Diss\u00e9quer L'\u00e9diteur WordPress TinyMCE","og_description":"Jetez un coup d'\u0153il \u00e0 cette dissection en profondeur de l'\u00e9diteur WordPress TinyMCE : de quoi s'agit-il, et comment pouvez-vous ajouter des fonctionnalit\u00e9s suppl\u00e9mentaires et vos propres plugins personnalis\u00e9s.","og_url":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2019-11-08T15:42:56+00:00","article_modified_time":"2024-09-18T08:24:47+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/11\/FR-Homepage-featured-image.png","type":"image\/png"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Jetez un coup d'\u0153il \u00e0 cette dissection en profondeur de l'\u00e9diteur WordPress TinyMCE : de quoi s'agit-il, et comment pouvez-vous ajouter des fonctionnalit\u00e9s suppl\u00e9mentaires et vos propres plugins personnalis\u00e9s.","twitter_image":"https:\/\/kinsta.com\/wp-content\/uploads\/2016\/12\/wordpress-tinymce-editor.png","twitter_creator":"@carlodaniele","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Carlo Daniele","Dur\u00e9e de lecture estim\u00e9e":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Diss\u00e9quer L&rsquo;\u00e9diteur WordPress TinyMCE","datePublished":"2019-11-08T15:42:56+00:00","dateModified":"2024-09-18T08:24:47+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/"},"wordCount":2332,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/11\/editeur-wordpress-tinymce.png","keywords":["TinyMCE","WordPress"],"articleSection":["D\u00e9veloppement WordPress"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/","url":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/","name":"Diss\u00e9quer L'\u00e9diteur WordPress TinyMCE","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/11\/editeur-wordpress-tinymce.png","datePublished":"2019-11-08T15:42:56+00:00","dateModified":"2024-09-18T08:24:47+00:00","description":"Jetez un coup d'\u0153il \u00e0 cette dissection en profondeur de l'\u00e9diteur WordPress TinyMCE : de quoi s'agit-il, et comment pouvez-vous ajouter des fonctionnalit\u00e9s suppl\u00e9mentaires et vos propres plugins personnalis\u00e9s.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/11\/editeur-wordpress-tinymce.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/11\/editeur-wordpress-tinymce.png","width":1460,"height":730,"caption":"Diss\u00e9quer L'\u00e9diteur WordPress TinyMCE"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/editeur-wordpress-tinymce\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"D\u00e9veloppement WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/developpement-wordpress\/"},{"@type":"ListItem","position":3,"name":"Diss\u00e9quer L&#8217;\u00e9diteur WordPress TinyMCE"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/33711","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=33711"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/33711\/revisions"}],"predecessor-version":[{"id":33713,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/33711\/revisions\/33713"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/33711\/translations\/en"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/33711\/translations\/fr"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/33711\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/33711\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/33736"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=33711"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=33711"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=33711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}