¿Por qué mi TinyMCE está oculto en el área de texto?

Question

Tengo aproximadamente 7 textarea s en una página web, todos ellos son editores de texto enriquecido que usan TinyMCE. Sin embargo, al cargar la página, solo 1 de ellos es visible y el resto está oculto. El usuario puede hacer clic en un enlace 'mostrar' que mostraría las áreas textareas restantes una por una.

Sin embargo, tengo un problema raro. Todos los textarea s están configurados como esto:

<textarea cols="40" rows="20"></textarea> 

Sin embargo, sólo el textarea que aparece en carga de la página es el mismo tamaño que quiero que sea. Los textarea s restantes son muy pequeños cuando los muestro. Así que estoy pensando que quizás no se procesen porque están ocultos en la carga de la página.

¿Cómo puedo remediar esto?

Answer 1

Intenta agregar CSS a las áreas de texto que están ocultas.

Por ejemplo, el uso

<textarea cols="40" rows="20" style="width: 40em; height: 20em"></textarea> 

creo que me encontré con este, donde CSS de TinyMCE anula algunos de los comportamientos CSS por defecto. Terminé teniendo que "volver a anular", y finalmente edité las páginas css de TinyMCE.

Answer 2

Sin tener unos pocos detalles más acerca de su configuración real y cómo está haciendo la variada funcionalidad de mostrar/ocultar, es difícil dar una respuesta definitiva. puedo tirar algunas ideas generales a cabo sin embargo:

• es lo que representan correctamente cuando no ocultarlos al cargar la página? Eso daría una respuesta definitiva para en qué punto está ocurriendo el error.
• Al alternar la vista del área de texto, ¿puede explicity establecer los atributos de fila/col al mismo tiempo?
• ¿Se puede usar css (quizás con! Important) para establecer el ancho y la altura del texto de texta en lugar de probar si tiene algún efecto?

Answer 3

Creo que esto es un error MCE, o al menos una característica que MCE no tiene.

Como quería el estilo de mi caja de entrada en CSS, no en HTML (puaj) Probé

visibility: hidden; 

en lugar de

display: none; 

y todo funcionaba de nuevo.

Creo que esto último hace que el elemento no ocupe espacio, lo que activa el código MCE que detecta el ancho y la altura del elemento.

Answer 4

Al cargar TinyMCE con jQuery, este problema puede ser resuelto como tal:

1- En el área de texto, especifique una altura en el atributo de estilo en línea:

<textarea style="height:200px;" class="tinymce" name="myfield"></textarea> 

2- agregar una función de devolución de llamada al crear una instancia de un editor TinyMCE. p.ej.tinymceLoaded

$('textarea.tinymce').tinymce({ 
    // Location of TinyMCE script 
    script_url : 'PATH_TO_TINYMCE.js', 

    // General options ... 
    // Theme options... 

    // callback function 
    init_instance_callback : "tinymceLoaded" 
}); 

3- Ajuste la altura de sus editores en la función tinymceLoaded:

function tinymceLoaded(inst){ 
    // get the desired height of the editor 
    var height = $('#' + inst.editorId).height(); 

    // when the editor is hidden, the height calculated is 0 
    // Lets use the inline style text to solve this problem 
    if(height == 0){ 
     height = $('#' + inst.editorId).css('height'); // 200px 
     height = height.replace(/[^0-9]/g, ""); // remove all non-numeric characters to isolate the '200' 
    } 

    // set the height of the hidden TinyMCE editor 
    $('#' + inst.editorId + '_ifr').css({height: height + 'px'}); 
} 

Answer 5

De TinyMCE inside hidden div are not displayed as enabled when we put the div visible, slolife respuesta de usuario me ayudaron:

Trate de llamar tinyMCE.init (. ..) después de mostrar el div que contiene.

Answer 6

He estado teniendo el mismo problema cuando la altura de los controles ocultos de textarea que se convirtieron en editores TinyMCE era demasiado pequeña. Configuración visibility a none trabajado, pero deja un gran espacio vacío en su lugar.

La siguiente solución ha funcionado bien para mí:

• No oculte sus controles de área de texto inicialmente al cargar la página
• su lugar, establecer toda su configuración de inicio de TinyMCE de la siguiente manera:

 
tinyMCE.init({ 
     ... 
     init_instance_callback : "onInstanceInit" 
}); 

• En su función onInstanceInit, oculte el editor TinyMCE inicializado dinámicamente
• Si muestra este editor después, la altura será normal otra vez al igual que nunca se oculta

Answer 7

Otra razón de lo oculto es cuando se quita elementos del DOM con tinymce inicializado en ellos. Primero debe eliminar tinymce de este elemento, por lo que evitará un comportamiento extraño al inicializar nuevos elementos de tinymce.

Así que para exemple:

removeElementWithTinymce = function(elementToRemove){ var parent = elementToRemove.parentNode; tinymce.remove(elementToRemove.getAttribute('id')); parent.removeChild(elementToRemove); };

Eso es todo.

Answer 8

Si utiliza la versión de producción de TinyMCE, probablemente haya olvidado copiar las carpetas que necesita tinymce.min.js. Es necesario tener carpetas langs, plugins, pieles y temas en la misma carpeta que el archivo tinymce.min.js.