functions – Solución para renderizar códigos cortos en el editor de administración

Pregunta:

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 le entrego esto al cliente, a menudo no entienden cómo funcionan.

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

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 en el editor. Con esto quiero decir que el usuario vería la salida pero solo podría eliminarla pero no editar el contenido del shortcode renderizado.

Respuesta:

En realidad, no es tan malo hacer lo que estás pidiendo. Esto debería llevarle 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 con 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 más te interesará 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 abreviado de una galería se reemplaza con una etiqueta img . La etiqueta img tiene la clase wp-gallery , que se estiliza con el CSS que se encuentra aquí .

Editar 2016-04-06: contenido y enlaces actualizados para TinyMCE 4 y WordPress 4.4

Leave a Comment

Your email address will not be published.

Scroll to Top

istanbul avukat

-

web tasarım