javascript - español - ¿Cómo establecer el texto inicial en un área de texto TinyMCE?

tinymce php

Question

Estoy en una situación curiosa donde anteriormente no tuve problemas para lograr lo que estoy buscando. El siguiente código es parte de una página HTML que debe alojar un cuadro de texto enriquecido TinyMCE:

...
<textarea id="editing_field">This text is supposed to appear in the rich textbox</textarea>
...

Al principio, funcionó según lo previsto, creando un cuadro de texto enriquecido con el texto adjunto. Sin embargo, en algún momento, el código de TinyMCE decidió que el HTML de textarea debería transformarse en lo siguiente:

<textarea id="editing_field" style="display: none;"/>
This text is supposed to appear in the rich textbox

Esto hace que el texto debajo del cuadro de texto no sea exactamente ideal. No tengo idea de qué causó este cambio de comportamiento, aunque también estoy usando jQuery si eso podría tener algún efecto.

Puedo solucionar el problema cargando contenido en el cuadro de texto con javascript después de que la página se haya cargado, ya sea usando ajax u ocultando el texto en el HTML y simplemente moviéndolo. Sin embargo, me gustaría emitir el texto en el cuadro de texto directamente desde PHP, si es posible. ¿Alguien sabe qué está pasando aquí y cómo solucionarlo?

Actualización 2: he reproducido con éxito la situación que causa el cambio de comportamiento: al principio solo tenía texto simple en el área de texto como en el primer fragmento de código. Sin embargo, después de guardar el contenido, el texto se vería así:

<p>This text is supposed to appear in the rich textbox</p>

La presencia de la etiqueta p hace que TinyMCE active la transformación entre un área de texto adjunta a un área de texto que es solo una etiqueta única (como se ilustra arriba).

Actualización 1: archivo de configuración de TinyMCE agregado:

tinyMCE.init({
        // General options
        mode : "exact",
        elements : "editing_field",
        theme : "advanced",
        skin : "o2k7",
        skin_variant : "black",
        plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
        save_onsavecallback : "saveContent",

        // Theme options
        theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull", 
        theme_advanced_buttons2 : "search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,forecolor,backcolor", 
        theme_advanced_buttons3 : "hr,removeformat,|,sub,sup,|,charmap,emotions,|,print,|,fullscreen,code", 
        theme_advanced_buttons4 : "styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_toolbar_location : "top", 
        theme_advanced_toolbar_align : "left", 
        theme_advanced_statusbar_location : "bottom", 
        theme_advanced_resizing : false,

        // Drop lists for link/image/media/template dialogs
        template_external_list_url : "lists/template_list.js",
        external_link_list_url : "lists/link_list.js",
        external_image_list_url : "lists/image_list.js",
        media_external_list_url : "lists/media_list.js",

        // Replace values for the template plugin
        template_replace_values : {
            username : "Some User",
            staffid : "991234"
        },

        width : "450",
        height : "500"
    });

Answer 1

Ese segundo ejemplo <textarea ... /> es una notación de etiqueta vacía. Si quieres que el texto esté dentro del tage, debes hacerlo como en el primer camino <teatarea ....> foo </ textarea>

¿Qué está produciendo las etiquetas textarea? ¿Puedes depurar eso para ver si está haciendo la notación de etiqueta vacía?

Eric

Answer 2

Estamos usando TinyMCE aquí últimamente también. Estoy particularmente desconcertado sobre el cambio del atributo de estilo del área de texto para ocultar el elemento. Muy raro.

Tengo curiosidad por cómo se ve tu archivo de configuración (algunos documentos sobre los archivos de configuración en: django )

ACTUALIZAR

wow ... estás usando MUCHOS plugins tinyMCE. Intentaré investigar más cuando tenga algo de tiempo y veré si no puedo descubrir algunos posibles sospechosos.

Answer 3

Parece que he resuelto el problema, a menos que haya casos extremos que arruinen la solución. Utilizo el siguiente código PHP en el contenido de la página antes de guardarlo en la base de datos:

$content = str_replace(chr(10), "", $content);
$content = str_replace(chr(13), "", $content);
$content = str_ireplace(''<'',''&#x200B;<'',$content);

Lo que hace es eliminar cualquier nueva línea y luego anteponer un carácter invisible de ancho cero antes de cualquier etiqueta de inicio. Este texto luego se inserta entre las etiquetas textarea antes de que TinyMCE haga su magia. No sé por qué, pero esto no desencadena el problema y los caracteres añadidos no se muestran en el html final o en la vista html de TinyMCE, por lo que el único problema que puedo ver con esta solución es el golpe de rendimiento. Un detalle es que parece que solo las etiquetas de inicio deben agregarse de antemano de esta manera, pero no lo he tenido en cuenta aquí, por simplicidad.

Answer 4

Dado que la presencia de etiquetas <p> causa la transformación, sospecho que su HTML termina pareciéndose a:

...
<textarea id="editing_field"><p>This text is supposed to appear in the rich textbox</p></textarea>
...

Desafortunadamente, los elementos HTML no están permitidos técnicamente dentro de las etiquetas <textarea> , por lo que algo puede estar considerando las etiquetas <p> como el inicio de un nuevo elemento de bloque, cerrando implícitamente su área de texto. Para solucionar esto, puede codificar los corchetes angulares:

...
<textarea id="editing_field">&lt;p&gt;This text is supposed to appear in the rich textbox&lt;/p&gt;</textarea>
...

Usando PHP, esto se puede hacer enviando su valor a través de htmlspecialchars() antes de hacer eco en la página.

Answer 5

tinyMCE.activeEditor.setContent (''some'') funciona para mí.Cheers

Answer 6

Para cambiar un campo de tinymce específico, puede hacer esto:

tinyMCE.get(''editing_field'').setContent(''your default text'');

Answer 7

Si no llama a la función de JavaScript de tinyMCE, es posible que tenga que lidiar con problemas de compatibilidad del navegador.

Si solo tiene un cuadro de tinymce en la página, puede hacer esto:

tinyMCE.activeEditor.setContent(''<span>some</span>'');

También puede establecer un formato como BBCode. Consulte la documentación de setContent .

Me gustaría que tu código PHP hiciera eco del HTML en una función de JavaScript y que se llame con onload :

function loadTinyMCE($html) {
    echo "
        <script type="text/javascript">function loadDefaultTinyMCEContent(){
             tinyMCE.activeEditor.setContent(''$html'');
        }</script>
    ";
}

entonces

<body onload="loadDefaultTinyMCEContent()">

Si no desea utilizar el evento onload la página, tinymce tiene una opción init llamada oninit que funciona de manera similar.

Alternativamente, setupcontent_callback le da acceso directo al iframe.

Answer 8

He llegado al mismo problema cuando uso React, quizás esté relacionado con esto. El valor inicial pasado al componente es el valor original. Una vez recibido, el componente asumirá y manejará el contenido, independientemente de si se le pasa un nuevo valor. Entonces, si está pasando una cadena, entonces es una constante y existe en el procesamiento inicial de su componente. Pero si está pasando una variable, es posible que el valor inicial de la variable sea diferente del valor que desea visualizar (como probablemente sea nulo o indefinido hasta que reciba el valor para mostrar). En mi caso, recibo un objeto con los contenidos de la página, uno de los cuales es el html para mostrar como contenido inicial. Pero el método de renderizado se disparaba primero con un objeto vacío y luego con el objeto real con datos.