Solución para renderizar Shortcodes en el Editor de Administración

Question

Solución para renderizar Shortcodes en el Editor de Administración

15 dic 2011, 17:43:16

Vistas: 18.9K

Votos: 22

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

Utilizo frecuentemente shortcodes dentro del Editor de Administración, pero cuando se lo entrego al cliente, a menudo no entienden cómo funcionan.

Lo que busco es una solución que simplemente renderice automáticamente la salida asociada de los shortcodes dentro del editor WYSIWYG de administración.

Desde una perspectiva visual, me gustaría que esto se mostrara similar a cuando aparece la línea "more" o cuando se muestra una imagen dentro del editor. Con esto me refiero a que el usuario vería la salida pero solo podría eliminarla, no editar el contenido del shortcode renderizado.

NetConstructor.com

4.41K

funciones editor shortcode

Comentarios

¿Has leído este (http://wp.tutsplus.com/tutorials/theme-development/wordpress-shortcodes-the-right-way/) artículo? Revisa la parte de TinyMCE.

cr0z3r

15 dic 2011 17:50:42

Lo he leído, pero por lo que puedo ver, solo trata sobre crear/registrar shortcodes y crear botones para el editor que permitan insertarlos rápidamente... Pero no hay información sobre cómo renderizar esos shortcodes con sus equivalentes en bloques HTML como describí.

NetConstructor.com

15 dic 2011 20:51:23

¿Te refieres a que quieres incluir una ayuda visual que represente el shortcode que estás incluyendo, sin reemplazar realmente el shortcode con el HTML real? Es decir, ¿como el marcador de posición de la galería, que no es realmente el código de la galería, sino un marcador visual que simplemente le indica al usuario: "Oye, aquí hay una galería"?

Matthew Boynes

30 ene 2012 07:27:38

¡Exactamente! Y me gustaría que fuera un poco flexible para permitirme personalizarlo por cada shortcode (similar a como mencionaste la galería o cuando se incluye una imagen)

NetConstructor.com

30 ene 2012 12:55:39

https://wordpress.org/plugins/shortcode-ui/

jgraup

30 ago 2016 17:12:03

Todas las respuestas a la pregunta

Comentarios

¡interesante! déjame preguntarte... ¿qué opinas sobre convertir automáticamente el contenido real de todos los shortcodes en el contenido asociado?

NetConstructor.com

1 feb 2012 11:09:44

Eso dependería completamente del contenido. Primero, recuerda que algo de HTML se elimina, tiene problemas para renderizarse en TinyMCE, etc. Segundo, digamos que tu shortcode renderiza un bloque de HTML complejo; si el usuario intenta editarlo, podría romperlo sin querer. Tercero, si tu shortcode tiene opciones, esas opciones ahora serían ineditables a menos que elimines todo el bloque HTML y rehagas el shortcode. Lo más probable es que, si tu código es lo suficientemente complejo como para necesitar shortcode, creo que el marcador de posición es tu mejor opción.

Matthew Boynes

1 feb 2012 16:09:28

¿llegaste a ver alguna solución de alguien más sobre esto?

NetConstructor.com

24 nov 2012 01:54:24

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

En la edición de entrada del administrador

Extraer todos los shortcodes de la entrada guardada y renderizarlos dentro de un metabox, aparte del editor. Asegúrate de que aparezcan en el mismo orden en que los shortcodes aparecen en el editor TinyMCE.

En la API JavaScript de TinyMCE

Crear una función jQuery, cuando el usuario haga clic en un shortcode, intercambia el HTML del metabox al editor. Y viceversa. El orden en sí debería ser suficiente como asociación, pero no estoy seguro sobre los shortcodes envolventes. Sin embargo, hay muchas formas de diseñar una buena conexión por ID. Las actualizaciones de los shortcodes pueden hacerse sobre la marcha con AJAX.

Nunca guardar el estado renderizado del shortcode

Antes de cambiar de editor, guardar borradores, autoguardados y publicar, hacer una llamada API para activar la restauración, para que el estado renderizado del shortcode nunca se guarde...

Esto se puede hacer, pero necesitas estar familiarizado con la API de TinyMCE para entender dónde y cuándo acceder a los contenidos del editor, y engancharte a las acciones de JavaScript antes de 'guardar' y más.

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

La parte de restauración se puede investigar mirando el comportamiento del shortcode [gallery]. Pero el clic en [MI_SHORTCODE] tiene que hacerse con algunos trucos de jQuery.

En el script de admin_footer, accede al contenido donde el cursor está activo con:

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

es una pista de por dónde empezar.

Jonas Lundman

384

10 jun 2018 04:00:58

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

Captura de pantalla del editor de shortcodes

Añado la descripción para que los motores de búsqueda la indexen:

Vamos a crear un plugin simple con un shortcode, luego añadiremos un botón al editor TinyMCE para insertar ese shortcode mediante una ventana emergente que recogerá toda la entrada del usuario para los atributos del shortcode. Después, reemplazaremos el shortcode en el editor TinyMCE con una imagen de marcador de posición, similar a la galería nativa de WordPress (que en realidad es un shortcode, por si no lo sabías), y por último - permitiremos editar el shortcode y sus atributos haciendo doble clic en la imagen de marcador de posición.

Marc Chéhab

1

23 jun 2018 23:14:28

Matthew Boynes 7.12K · Accepted Answer · 2012-01-31T00:42:48Z

En realidad no es tan difícil hacer lo que estás preguntando. Debería tomarte alrededor de una hora hacer el primero, y unos 10 minutos para los siguientes.

Básicamente lo que vas a hacer es crear un plugin para TinyMCE. Esto es lo que necesitas para empezar:

Guía general para crear un plugin de tinymce
Código de ejemplo del núcleo de WordPress
Una guía general sobre cómo añadir un plugin de TinyMCE a WordPress. Encontré esta, que parece adecuada.

¡Ahora tienes todas las herramientas para hacerlo! De todo esto, el código que más te interesará es este bloque del 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 shortcode de la galería se reemplaza con una etiqueta img. La etiqueta img tiene la clase wp-gallery, que se estiliza con el CSS encontrado aquí.

Edición 2016-04-06: Contenido y enlaces actualizados para TinyMCE 4 y WordPress 4.4