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

19

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.

NetConstructor.com
fuente
¿Has leído este artículo ( wp.tutsplus.com/tutorials/theme-development/… )? Verifique la parte de TinyMCE.
cr0z3r
1
Lo he leído, pero hasta donde puedo decir, solo trata de crear / registrar códigos cortos y crear botones para que el editor inserte rápidamente códigos cortos ... Pero no hay información sobre cómo representar esos códigos cortos con las contrapartes de bloque HTML como describí.
NetConstructor.com
¿Quiere decir que desea incluir una ayuda visual que sea representativa de cualquier código abreviado que esté incluyendo, y que en realidad no reemplace el código abreviado con el HTML real? es decir, el marcador de posición de la galería, que en realidad no es el código de la galería, sino más bien un marcador de posición visual que simplemente le dice al usuario: "Oye, hay una galería aquí".
Matthew Boynes
¡Exactamente! Y me gustaría que fuera un poco flexible, lo que me permitiría personalizarlo por código corto (similar a como dijiste en la galería o cuando se incluye una imagen)
NetConstructor.com

Respuestas:

19

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

Matthew Boynes
fuente
¡interesante! déjame preguntarte ... ¿qué piensas al convertir automáticamente el contenido real de todos los códigos cortos en el contenido asociado?
NetConstructor.com
Todo eso dependerá del contenido. Primero, recuerde que algunos HTML se eliminan, tienen problemas para renderizarse en TinyMCE, etc. Segundo, digamos que su shortcode representa un bloque de HTML complejo: si su usuario fue a editarlo, podría romperlo inadvertidamente. Tercero, si su shortcode tiene opciones, esas opciones ahora se volverán editables a menos que elimine todo el bloque HTML y rehaga el shortcode. Lo más probable es que si su código es lo suficientemente complejo como para que necesite shortcode, creo que el marcador de posición es su mejor opción.
Matthew Boynes
¿Alguna vez viste una solución de alguien más en esto?
NetConstructor.com
0

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.

Jonas Lundman
fuente
0

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/

Captura de pantalla

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.

Marc Chéhab
fuente