Cómo crear WP Editor usando javascript

2

Estoy tratando de crear algún tipo de campos repetidos y para eso, quiero crear un nuevo editor de wp con una ID única.

Entonces, mi pregunta es ¿hay alguna forma de crear wp_editor usando cualquier js? Lo mismo que obtenemos usando la función <?php wp_editor() ?> WordPress.

He intentado usar

tinyMCE .init( { mode : "exact" , elements : "accordion_icon_description_"+response.success.item_count });

pero imprime un editor muy básico que no creo que sea el mismo que el editor de campos de contenido de WordPress

    
pregunta 1naveengiri 25.07.2017 - 16:47

2 respuestas

5

Gracias a comentario de Jacob Peattie Puedo responde esto usando solo JS. En realidad hicimos algo similar, pero antes de la versión 4.8 y no fue tan fácil, así que usamos wp_editor() al final. Pero ahora, puede hacerlo usando el objeto wp.editor en JavaScript . Hay 3 funciones principales

  1. wp.editor.initialize = function( id, settings ) {

Donde id es

  

El ID de HTML del área de texto que se usa para el editor.   Tiene que ser jQuery compatible. Sin corchetes, caracteres especiales, etc.

y settings es un objeto

{
    tinymce: {
        // tinymce settings
    },
    quicktags: {
        buttons: '..'
    }
}

con estas configuración de TinyMCE . En lugar de cualquiera de los 3 objetos ( settings , tinymce o quicktags ), puede usar true para usar los valores predeterminados.

  1. wp.editor.remove = function( id ) {

Es bastante autoexplicativo. Elimine cualquier instancia de editor que se haya creado a través de wp.editor.initialize .

  1. wp.editor.getContent = function( id ) {

Bueno, obtenga el contenido de cualquier editor creado a través de wp.editor.initialize .

El uso podría verse así

var countEditors = 0;
$(document).on('click', 'button#addEditor', function() {
    var editorId = 'editor-' + countEditors;
    // add editor in HTML as <textarea> with id editorId
    // give it class wp-editor
    wp.editor.initialize(editorId, true);
    countEditors++;
});
$(document).on('click', 'button.removeEditor', function() {
   // assuming editor is under the same parent
   var editorId = $(this).parent().find('.wp-editor');
   wp.editor.remove(editorId);
});

Como el contenido se publicará automáticamente, no es necesario en este ejemplo. Pero siempre puedes recuperarlo a través de wp.editor.getContent( editorId )

    
respondido por el kero 25.07.2017 - 17:37
1

Primero debe usar wp_enqueue_editor(); para generar los scripts del editor, las hojas de estilo y la configuración predeterminada. Puede encontrar esto documentado aquí wp_enqueue_editor ()

Debes eliminar true de la función de esta forma: wp.editor.initialize(editorId);

    
respondido por el Antonio Novak 20.09.2017 - 08:30

Lea otras preguntas en las etiquetas