Shortcodes Styling dans Visual Editor

Question

Quelqu'un sait comment le style de l'éditeur visuel de sorte que lorsque shortcodes spécifiques sont utilisés, ils sont remplacés par une image dans l'éditeur visuel?

J'ai trouvé que de nombreux utilisateurs vis le texte shortcode ou supprimer par erreur lors de l'utilisation de l'éditeur visuel, donc je voudrais que shortcodes à être remplacées par des images paceholder dans l'éditeur visuel. éditeur HTML montrerait encore les codes bien.

Answer 1

Je n'ai pas une solution de travail à portée de main, mais ce que je ferais est d'analyser la façon dont cela se fait pour plus seperator. Dans l'éditeur HTML, il est <!-- more -->, dans l'éditeur visuel, une image est affichée à la place.

Cela se fait par l'extension de l'éditeur de tinyMCE - qui est la base de l'éditeur visuel dans wordpress - avec un plug-in. 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

Il fonctionne essentiellement par le remplacement du contenu (par exemple la [mycode] shortcode) avec un certain HTML prédéfini qui contient l'image. Avant le get contenu affiché, il est remplacé à nouveau avec le code HTML d'origine. Vous pouvez utiliser des expressions régulières dans le processus. Le lien plus est à l'affiche très bien.