Styling Shortcodes no Visual Editor

Alguém sabe como desenhar o editor visual para que, quando os códigos curtos específicos são usados, eles são substituídos por uma imagem dentro do editor visual?

Descobri que muitos usuários estragam o texto curto ou excluí-lo por engano ao usar o editor visual para que eu gostaria que os códigos curtos fossem substituídos por imagens de ritmo no editor visual. O editor de HTML ainda mostra os códigos.

Solutions Collecting From Web of "Styling Shortcodes no Visual Editor"

Eu não tenho uma solução de trabalho à mão, mas o que eu faria é analisar como isso é feito para o seperator mais. No editor de HTML, existe , no editor visual, uma imagem é exibida em vez disso.

Isso é feito estendendo o editor tinyMCE – que é a base do editor visual no wordpress – com um plugin. Para saber mais sobre plugins de tinymce, você encontrará mais exemplos e documentação no wiki do moxiecode: Criando um plugin para o TinyMCE (3.x) .

Você encontra o código de exemplo dentro do seguinte arquivo:

 wp-includes/js/tinymce/plugins/wordpress/editor_plugin.dev.js 

Funciona basicamente substituindo o conteúdo (por exemplo, o [mycode] curto [mycode] ) com algum HTML predefinido que contém a imagem. Antes que o conteúdo seja publicado, ele é substituído novamente com o HTML original. Você pode usar expressões regulares no processo. O link mais está mostrando isso bastante bem.