Styling Shortcodes dans Visual Editor
Est-ce que quelqu'un sait comment attribuer un style à l'éditeur visuel afin que, lorsque des codes courts spécifiques sont utilisés, ils soient remplacés par une image dans l'éditeur visuel?
J'ai constaté que de nombreux utilisateurs bousillent le texte du code abrégé ou le suppriment par erreur lors de l'utilisation de l'éditeur visuel. Je souhaite donc que les codes abrégés soient remplacés par des images de détenteur de pas dans l'éditeur visuel. L'éditeur HTML afficherait quand même les codes.
Je n'ai pas de solution de travail à portée de main, mais ce que je ferais, c'est d'analyser comment cela est fait pour le plus séparateur. Dans l'éditeur HTML, il y a <!-- more -->; dans l'éditeur visuel, une image est affichée à la place.
Cela se fait en étendant l'éditeur tinyMCE - qui est la base de l'éditeur visuel dans wordpress - avec un plugin. Pour en savoir plus sur les plugins tinymce, vous trouverez plus d'exemples et de documentation dans le wiki moxiecode: Création d'un plugin pour TinyMCE (3.x) .
Vous trouvez un exemple de code dans le fichier suivant:
wp-includes/js/tinymce/plugins/wordpress/editor_plugin.dev.js
Cela fonctionne essentiellement en remplaçant le contenu (par exemple, le shortcode [mycode]) par un code HTML prédéfini contenant l'image. Avant que le contenu ne soit publié, il est à nouveau remplacé par le code HTML d'origine. Vous pouvez utiliser des expressions régulières dans le processus. Le lien plus montre ce assez bien.