Imagen del editor de WordPress para el código abreviado

Question

Pregunta rápida sobre WordPress. He estado buscando en Google por todos lados y no puedo encontrar una respuesta.

Básicamente estoy tratando de replicar lo que sucede cuando se agrega una galería: tener una imagen que se muestra como un stand para la galería shortcode [galería]. El shortcode es visible cuando vas a editar HTML.

Me gustaría copiar exactamente este efecto: Cuando se inserta un código corto en el editor, me gustaría que se represente como una imagen.

cosas que he intentado:

• Inserción de un elemento (imagen, div, me encontré con una entrada es bastante unfuckwithable, etc) que está envuelto por un código corto (Esto funciona bien, no genial. El código corto aún está visible y WP agregará automáticamente párrafos al elemento para crear espacio que los usuarios podrían, posiblemente, agregar contenido que se comerá con el código corto) -
• Inerte el código corto como <! - -> comentario (Esto tampoco funciona muy bien, WP ocasionalmente lo comerá moviéndose entre Visual/HTML. Los comentarios también se alimentan de su contenido < - [abreviado] -> marcador de posición <! - [/ código corto] ->= < - rendido código corto ->)

Esa es la medida que he pensado en cosas No puedo encontrar una guía sobre cómo hacer para imitar el comportamiento de [galería] y no puedo encontrarlo pasando por las agallas de wp-admin.

Gracias!

Answer 1

Muy bien, encontré la respuesta gracias a la pista de Dan. Aquí se explica cómo hacerlo:

Primero (como sugirió Dan) observe cómo agregan el plugin Gallery a Tiny MCE. De hecho, hay un archivo sin comprimir js que le dará la visión general que necesita, lo encuentras en:

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

Esto va sobre los aspectos básicos al agregar este tipo de complemento a TinyMCE (more info here). Para que WP cargue el archivo .js con su plugin TinyMCE, see this helpful guide.

Básicamente aquí está el código:

if (get_user_option('rich_editing') == 'true') { 
    add_filter("mce_external_plugins", "add_jolokia_tinymce_plugin"); 
//Applying the filter if you're using the rich text editor 
} 

function add_jolokia_tinymce_plugin($plugin_array) { 
    $plugin_array['example'] = '/path/to/example.js'; 
    return $plugin_array; 
} 

añadir esto a un plugin o function.php en un tema y ya está bueno!