¿Cómo reemplazar el contenido del editor tinyMCE tanto en modo texto como visual usando jQuery?

Question

¿Cómo reemplazar el contenido del editor tinyMCE tanto en modo texto como visual usando jQuery?

3 nov 2017, 07:05:07

Vistas: 21.5K

Votos: 6

He agregado un botón junto al botón "Añadir multimedia" en el editor de entradas de WordPress. Se llama botón "Insertar contenido".

Cuando se presiona este botón, debería enviar un contenido, ya sea texto plano o HTML, al editor, reemplazando cualquier texto que haya en él.

El código debe funcionar tanto en modo texto como en modo visual. ¿Cómo puedo hacer esto usando jQuery?

Aquí hay una imagen para aclarar mejor la pregunta:

Botón insertar contenido junto al botón añadir multimedia en WordPress

Nota: Ya hay varias respuestas pero solo responden cómo reemplazar el texto en modo visual.

kosinix

1.54K

tinymce editor visual editor-html

Todas las respuestas a la pregunta

Comentarios

Funciona como se esperaba, debe ser aceptado

Roland Soós

23 may 2018 11:39:10

kosinix 1.54K · Accepted Answer · 2017-11-03T07:05:07Z

Lo primero que hay que hacer es seleccionar el editor activo. Aquí seleccionamos el editor usando su id, que es content.

var activeEditor = tinyMCE.get('content');

Luego usamos setContent de tinyMCE:

var activeEditor = tinyMCE.get('content');
var content = 'Contenido HTML o de texto plano aquí...';
activeEditor.setContent(content);

Sin embargo, si el editor está en modo texto al principio, después de cargar la página, activeEditor será null. Así que debemos tener eso en cuenta:

var activeEditor = tinyMCE.get('content');
var content = 'Contenido HTML o de texto plano aquí...';
if(activeEditor!==null){
    activeEditor.setContent(content);
}

Dado que setContent solo funciona para tinyMCE, esto no funcionará si el editor está en modo texto. Por lo tanto, tenemos que llamar directamente al textarea y actualizar su valor:

var activeEditor = tinyMCE.get('content');
var content = 'Contenido HTML o de texto plano aquí...';
if(activeEditor!==null){
    activeEditor.setContent(content);
} else {
    $('#content').val(content);
}

Sin embargo, otra advertencia es que si cambiaste al modo visual y luego volviste al modo texto, activeEditor ya no es null, por lo que setContent se llamará siempre en lugar del textarea. Así que tenemos que verificar el estado del editor. Para determinar el modo actual, monitoreamos la clase de div#wp-content-wrap. Juntando todo:

var content = 'Contenido HTML o de texto plano aquí...';
if($('#wp-content-wrap').hasClass('html-active')){ // Estamos en modo texto
    $('#content').val(content); // Actualizar el contenido del textarea
} else { // Estamos en modo tinyMCE
    var activeEditor = tinyMCE.get('content');
    if(activeEditor!==null){ // Asegurarnos de no llamar setContent en null
        activeEditor.setContent(content); // Actualizar el contenido de tinyMCE
    }
}