Solución para renderizar códigos cortos en el Editor de administración

Hice esta pregunta hace aproximadamente un año y espero que haya algún tipo de solución simple que me permita lograr mi objetivo. Así que aquí va:

A menudo utilizo códigos cortos dentro del Editor de administración, pero cuando entrego esto al cliente, a menudo no entienden cómo funcionan.

Lo que estoy buscando es una solución que simplemente muestre automáticamente la salida asociada de los códigos cortos dentro del editor administrador WYSIWYG.

Desde una perspectiva visual, me gustaría que esto se muestre de manera similar a cuando aparece la línea "más" o cuando se muestra una imagen dentro del editor. Con esto quiero decir que el usuario vería el resultado pero solo podría eliminarlo, pero no editar el contenido del shortcode renderizado.

En realidad no es tan malo hacer lo que pides. Esto debería tomar aproximadamente una hora para hacer el primero y 10 minutos para hacer los siguientes.

En última instancia, lo que vas a hacer es crear un complemento TinyMCE. Esto es lo que debe armarse para comenzar:

1. Guía general para crear un complemento tinymce
2. Código de ejemplo de WordPress Core
3. Una guía general sobre cómo agregar un complemento TinyMCE a WordPress. Encontré este , que parece adecuado.

¡Ahora tiene todas las herramientas para hacerlo! De todo esto, el código que será de mayor interés para usted es este bloque en el código de ejemplo de WP:

4   function replaceGalleryShortcodes( content ) {
5       return content.replace( /\[gallery([^\]]*)\]/g, function( match ) {
6           return html( 'wp-gallery', match );
7       });
8   }
9
10  function html( cls, data ) {
11      data = window.encodeURIComponent( data );
12      return '<img src="' + tinymce.Env.transparentSrc + '" class="wp-media mceItem ' + cls + '" ' +
13          'data-wp-media="' + data + '" data-mce-resize="false" data-mce-placeholder="1" alt="" />';
14  }

Aquí, el código corto para una galería se reemplaza con una imgetiqueta. La imgetiqueta tiene la clase wp-gallery, que recibe el estilo del CSS que se encuentra aquí .

Editar 2016-04-06: Contenido actualizado y enlaces para TinyMCE 4 y WordPress 4.4

Esta no es una respuesta completa, solo una dirección de diseño. Creo que el mejor enfoque es algo como esto:

En la publicación de edición de administrador

Extraiga todos los códigos cortos de la publicación guardada y preséntelos dentro de un metabox, aparte del editor . Asegúrese de que aparezcan en el mismo orden en que aparecen los códigos cortos en el pequeño Editor.

En la API de JavaScript tinyMCE

Haga una función jQuery, cuando el usuario hace clic en un shortcode, intercambia el HTML del metabox en el editor. Y viceversa. El orden en sí debería estar bien como asociación, pero no estoy seguro de incluir códigos cortos. Sin embargo, hay muchas formas de diseñar una buena conexión ID. Las actualizaciones de códigos cortos se pueden hacer sobre la marcha con ajax.

Nunca guarde el estado del shortcode representado

Antes de cambiar de editor, guarde borradores, borradores automáticos y publique, realice una llamada API para activar la restauración, de modo que el estado del código abreviado nunca se guarde ...

Esto se puede hacer, pero debe estar familiarizado con la API tinyMCE para comprender dónde y cuándo acceder al contenido del editor, y conectarse a las acciones de JavaScript antes de 'guardar' y más.

Puede haber varios editores de tinyMCE en la misma carga de página de publicación de edición.

La parte de restauración se puede investigar observando el [gallery]comportamiento del shortcode. Pero el clic en [MY_SHORTCODE]debe hacerse con algunos trucos de jQuery.

en el script admin_footer, acceda al contenido de donde está activo el cursor con:

var $editor_content = $(tinymce.activeEditor.getBody());

es una pista de cómo comenzar.

Estaba buscando una manera de mostrar gráficamente y ajustar los códigos cortos también. Y ahora, finalmente, encontré un tutorial que hace exactamente eso: https://generatewp.com/take-shortcodes-ultimate-level/

Agrego la descripción para que los motores de búsqueda la recojan:

Vamos a crear un complemento simple con un código corto, luego agregaremos un botón de editor TinyMCE para insertar ese código corto a través de una ventana emergente que recopilará toda la entrada del usuario para los atributos de código corto. Luego, vamos a reemplazar el shortcode en el editor TinyMCE con una imagen de marcador de posición, muy similar a la galería nativa de WordPress (que en realidad es un shortcode, en caso de que no lo supiera), y por último, vamos a permitir la edición del shortcode y sus atributos haciendo doble clic en la imagen del marcador de posición.