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

En realidad no es tan malo hacer lo que estás pidiendo. Esto debería llevarle alrededor de una hora para hacer la primera, y 10 minutos para hacer las siguientes.

En última instancia, lo que vas a hacer es crear un complemento TinyMCE. Esto es lo que debes armar 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 tienes 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 etiqueta img . La etiqueta img tiene la clase wp-gallery , que se caracteriza por el 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

Borre todos los códigos cortos de la publicación guardada y reprodúzcalos 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 de tinyMCE

Haga una función jQuery, cuando el usuario haga clic en un shortcode, intercambiará el HTML del metabox al 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 de ID. Las actualizaciones de los códigos cortos se pueden hacer sobre la marcha con ajax.

Nunca guardar el estado del shortcode renderizado

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

Esto se puede hacer, pero debe estar familiarizado con la API tinyMCE para entender 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 tinyMCE en la misma publicación de publicación de la página.

La parte de restauración se puede investigar observando el [gallery] beacode Beaviour. Pero el clic en [MY_SHORTCODE] debe hacerse mediante algunos trucos de jQuery.

en la secuencia de comandos admin_footer, acceda al contenido donde el cursor está activo con:

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

es un indicio de cómo empezar.

También estaba buscando una forma de mostrar gráficamente y ajustar códigos cortos. Y ahora, finalmente, encontré un tutorial que hace exactamente eso: enlace

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

  

Vamos a crear un complemento simple con un código corto, entonces estamos   va a agregar un botón editor TinyMCE para insertar ese shortcode a través de un   ventana emergente que recopilará todas las entradas del usuario para el código corto   atributos Entonces, vamos a reemplazar el código corto en el TinyMCE   editor con una imagen de marcador de posición, al igual que la galería nativa de   WordPress (que en realidad es un código abreviado, en caso de que no lo sepa),   y por último, vamos a permitir la edición del código corto y su   atributos haciendo doble clic en la imagen del marcador de posición.