Cómo insertar texto en value de TinyMCE

edballo · #1 (**permalink**) 03/12/2012, 13:57

Hola a todos!
Soy nuevo en el foro y bastante novato en Javascript...
Veréis, tengo un problema con el editor de texto Tiny MCE: no sé cómo insertar en el editor un texto que extraigo de un DIV del siguiente modo:

Código:

var tx = document.getElementById('div_id').firstChild.nodeValue;

Primero probé a hacerlo como si se tratara de un textarea corriente:

Código:

document.getElementById('textarea_id').value = tx;

También probé con innerHTML o creando un nodo de texto y añadiéndolo con appendChild... Pero nada.

Tras haber indagado bastante, descubrí que esa no era la manera y probé con:

Código:

ed = tinyMCE.get('textarea_id');
ed.setContent(tx, {format : 'raw'});

y tampoco parece funcionar. Sin embargo, si le paso un alert con ed.getContent(), sí me devuelve el contenido de la variable tx, pero el editor permanece en blanco...

No sé qué más probar... ¿alguien sabe por qué pasa ésto?

edballo · #2 (**permalink**) 05/12/2012, 09:28

He acotado el problema...
Si el textarea (y el formulario) se carga cuando la página, y el texto a insertar también, no hay problema alguno y funciona setContent. El problema viene cuando el texto que pretendo insertar en el editor se carga posteriormente mediante AJAX... Ese texto ya no me deja meterlo en el tinyMCE!
¿Hay alguna manera de hacer lo que pretendo? ¿o no tengo más remedio que volver a cargar la página entera?

David · #3 (**permalink**) 05/12/2012, 09:49

El setContent() debería funcionar, ¿tienes la página subida en algún servidor para verlo funcionando?

edballo · #4 (**permalink**) 05/12/2012, 13:39

No, de momento estoy trabajando en local.
He resumido el problema en los siguientes tres archivos:

Ejemplo1.html

Código HTML:

Ver original<body>
    <div id="mform" class="visible">
    <form method="post" action="admin.php" id="wform" name="formiga">
        <textarea cols="50" rows="15" name="content" id="textA"></textarea> 
        <input type="submit" value="Send" />
    </form>
    </div>
    <div id="caja"></div>
</body>

Ejemplo1.js

Código Javascript:

Ver originaltinyMCE.init({
        mode : "textareas"
}); 
function createXMLHttpRequest(){
    var xmlHttp = null;
    xmlHttp = new XMLHttpRequest();
    return xmlHttp;
}
var connection1;
function loadPage(url){
    if(url==''){
    return; 
    }
    connection1=createXMLHttpRequest();
    connection1.onreadystatechange = function(){if(connection1.readyState == 4) {var container = connection1.responseText; writeText(container);}}
    connection1.open("GET", url, true);
    connection1.send(null); 
}
 
window.addEventListener('load',loadPage('ejemplo.php'),false);
 
function writeText(content){
var caj = document.getElementById('caja');
caj.innerHTML=content;
var ed = tinyMCE.get('textA');
ed.setContent(content, {format: 'html'});
}

Ejemplo1.php

Código PHP:

Ver original<?php
echo " <p>Éste es el texto que <strong>quiero insertar</strong></p> ";
?>

Lo acabo de probar en IE9 y milagrosamente funciona! Sin embargo en Chrome no... Me escribe el content en el div 'caja' pero el setContent falla. Por qué puede ser?
Muchas gracias, David, por responder!

David · #5 (**permalink**) 05/12/2012, 14:12

Por lo visto el tinyMCE tiene un retardo para terminar de iniciarse, por lo que cuando intentas llamar a tinyMCE.get() no obtiene ningún resultado. Puedes usar el callback oninit en lugar del evento load de la página para solucionar el problema:
http://www.tinymce.com/wiki.php/Configuration:oninit

edballo · #6 (**permalink**) 05/12/2012, 15:13

mmmm... ¿eso no sería igual que llamar al tinyMCE.get() desde un setTimeout?

David · #7 (**permalink**) 05/12/2012, 15:17

No exactamente, con setTimeout le indicas un tiempo arbitrario, con el callback oninit lo ejecutas exactamente cuando el TinyMCE está listo.