Cómo TinyMCE de cambio de tamaño automático?

Question

Tengo un TinyMCE que está compuesto por un TextArea, y quiero que esta área de edición de Ocuppy todo el espacio de su div padres, todo el tiempo.

Tengo una función JS que conseguir el espacio actual y establecer el textarea.style.height a ella, pero cuando lo permite TinyMCE parece que dejar de trabajar.

Además, el área de texto tiene anchura: 100%; que no cambia de tamaño por el procesamiento HTML cuando está usando TinyMCE también.

¿Alguna idea?

Answer 1

Hoy en día, se debe utilizar el autoresize complemento que viene con TinyMCE. Tendrá que llamar TinyMCE como esto (la versión de jQuery):

$('.tinymce').tinymce({
  theme : 'advanced',
  plugins : 'autoresize',
  width: '100%',
  height: 400,
  autoresize_min_height: 400,
  autoresize_max_height: 800,
});

Me hizo la experiencia, que puede ser útil para llamar manualmente el cambio de tamaño en el init_instance_callback para proporcionar la altura correcta en init. Añadir este parámetro en las opciones pasadas, si es necesario lo siguiente:

init_instance_callback: function (inst) { inst.execCommand('mceAutoResize'); }

Answer 2

El punto es que TinyMCE genera un marco flotante en el lugar de la área de texto, con esta ID:. OriginalID + "_ IFR", y una mesa de originalID + "_ TBL" para la celebración de los controles y el área de edición

Para hacer que la anchura de fluido:

document.getElementById(id+'_tbl').style.width='100%'

Para hacer que la altura del fluido:

Cambiar dinámicamente document.getElementById(id+'_ifr').style.height a la altura deseada, a través de JS.
Este es el script que estoy usando para esto:

function toScreenHeight(id, minus) {
    var height;

    if (typeof(window.innerHeight) == "number") //non-IE
        height = window.innerHeight;
    else if (document.documentElement && document.documentElement.clientHeight) //IE 6+ strict mode
        height = document.documentElement.clientHeight;
    else if (document.body && document.body.clientHeight) //IE 4 compatible / IE quirks mode
        height = document.body.clientHeight;

    document.getElementById(id).style.height = (height - minus) + "px";
}

Puede utilizar los códigos de función y las llamadas en eventos onload onresize y body.

Answer 3

en tinymce 3.4.6, conjunto

width:'100%'

en la opción init va a resolver el problema.

Answer 4

Si estás haciendo pequeña MCE de forma dinámica a través de JS, puede encontrarse con problemas de tiempo en el que el editor de MCE aún no está disponible para los ajustes de estilo. Para combatir esto, se puede utilizar un viejo tiempo de espera de la escuela.

En este ejemplo, estoy usando un espacio de nombres "j" para jQuery. Si el editor está en un div líquido que cambia de tamaño, es posible que desee incluir esto en un $ (ventana) .resize (function () {}); oyente.

setTimeout(function(){ 
  $j('.mceEditor').css('width','100%').css('minHeight','240px');
  $j('.mceLayout').css('width','100%').css('minHeight','240px');
  $j('.mceIframeContainer').css('width','100%').css('minHeight','240px');
  $j('#'+[INSERT TEXTAREA ID HERE]+'_ifr').css('width','100%').css('minHeight','240px');
},500) 

Answer 5

Ninguna de las anteriores estaban trabajando para mí en TinyMCE v4, así que mi solución era para calcular la altura sobre la base de la barra de barra de las barras de herramientas / menú / estado y después, establecer la altura del editor, teniendo esas alturas en cuenta.

function resizeEditor(myHeight) {
    window.console.log('resizeEditor');
    myEditor = getEditor();
    if (myEditor) {
        try {
            if (!myHeight) {            
                var targetHeight = window.innerHeight; // Change this to the height of your wrapper element
                var mce_bars_height = 0;
                $('.mce-toolbar, .mce-statusbar, .mce-menubar').each(function(){
                    mce_bars_height += $(this).height();
                });
                window.console.log('mce bars height total: '+mce_bars_height);                          
                myHeight = targetHeight - mce_bars_height - 8;  // the extra 8 is for margin added between the toolbars
            }
            window.console.log('resizeEditor: ', myHeight);
            myEditor.theme.resizeTo('100%', myHeight);  // sets the dimensions of the editable area
        }
        catch (err) {
        }
    }
}

En mi caso, yo quería la ventana del editor para que coincida con la anchura y la altura de la window real, ya que el editor vendría en una ventana emergente. Para detectar cambios y cambio de tamaño, lo configuran a una devolución de llamada:

window.onresize = function() {
    resizeEditor();
}

Answer 6

Con la versión 4 y la disposición FlexBox opción para su uso en el navegador hice lo siguiente para obtener un ancho total, la altura de la experiencia de edición div padre.

Debe ser fácil de poner el CSS en un archivo si lo prefiere agregarlo a sus estilos existentes.

var css = '.tinycme-full .mce-edit-area {display:flex;flex-flow:column;} .tinycme-full .mce-edit-area iframe {flex:1 1 auto;}  .tinycme-full {height:100%;} .tinycme-full .mce-tinymce.mce-container { width:100%;height:100%;border:0; } .tinycme-full .mce-panel{border:0} .tinycme-full .mce-container-body.mce-stack-layout {display: flex; flex-flow: column;height: 100%;} .tinycme-full .mce-stack-layout-item{  flex: 0 0 auto;} .tinycme-full .mce-edit-area{flex:1 1 auto;} ',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet) {
    style.styleSheet["cssText"] = css;
} else {
    style.appendChild(document.createTextNode(css));
}

head.appendChild(style);

La idea es que se hacen todos los divs necesarios ocupan tanto espacio de la columna según sea necesario para llenar la matriz al 100% y su hacer poniendo un div alrededor de su área de texto: <div class="tinycme-full"> <textarea ... /></div>

No se jQuery u otras dependencias se necesitan andá ahora llena la matriz al 100%.

Answer 7

Yo tenía el mismo problema, después de leer este hilo que terminó con el código

init_instance_callback: function (inst) { 
  setTimeout(function () {
    document.getElementById(inst.id + '_ifr').style.height= (document.getElementById("theContainerDiv").offsetHeight-85) + 'px';
   },1000);
},

cambiar el tamaño del elemento "_ifm" en lugar del "_tbl", ya que el cambio de tamaño del "_tbl" no cambiar el tamaño del área de edición para mí. A continuación os dejo un poco de espacio para la barra de herramientas y barra de estado al hacer las "_ifr" 85 píxeles más corto que el div contenedor.

tuve que usar setTimeout para hacer que funcione, tal vez porque tengo una animación que muestra el elemento contenedor.

Answer 8

Estoy usando solución CSS puro para lograr esto (TinyMCE 4.0.20).

1. Set altura iframe a 100%:

   tinymce.init ({     altura: '100%' })

2. Añadir estilos al contenedor iframe ajuste de tamaño automático:

   .mce-tinymce {height: auto; anchura: 100%; position: absolute; la izquierda: 0; top: 0; parte inferior: 0; }

   .Bq-editor .mce-contenedor-body {altura: 100%; }

   .Bq-editor .mce-edit-área {position: absolute; top: 57px; parte inferior: 0; anchura: 100%; height: auto; }

Nota: tengo una línea de barra de herramientas, y la parte superior: 57px; en .Bq-editor .mce-edit-zona está relleno de la barra de herramientas.

Answer 9

SyCoDeR es correcto, pero siguió un camino ligeramente diferente aunque probablemente con los mismos resultados.

/*Container, container body, iframe*/
.mce-tinymce, .mce-container-body, #code_ifr {
    min-height: 100% !important;
}
/*Container body*/
.mce-container-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
/*Editing area*/
.mce-container-body .mce-edit-area {
    position: absolute;
    top: 69px;
    bottom: 37px;
    left: 0;
    right: 0;
}
/*Footer*/
.mce-tinymce .mce-statusbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

Revisado porque TinyMCE cambia los identificadores con la barra de herramientas del menú / adiciones o supresiones. Esto funciona no importa lo que haces con él.

Answer 10

La envoltura del marco flotante (Identificación por su acabado _ifr) es el primer padre de la amplitud que tiene aplicación como papel. Por lo tanto, para obtener el envoltorio:

$('span[role=application]').parents(':eq(0)')

Así que a la altura de cambio de tamaño:

$('[id$=_ifr]').css('height',$('span[role=application]').parents(':eq(0)').css('height'))

Para cambiar el tamaño de anchura

$('[id$=_ifr]').css('width',$('span[role=application]').parents(':eq(0)').css('width'))

Answer 11

Ninguna de estas soluciones trabajó 100% para mí. Necesitaba la altura para ajustar la inicialización y durante las ediciones. Lo que hice es agarrar la altura del elemento HTML en el marco flotante, y luego se aplica la altura a la iFrame con un 100px adicional.

Aquí está mi solución: (añadido img ancho máximo de imágenes de respuesta)

en la inicialización

   setup: function(editor) { 
        editor.on('init', function (e) { 
            $("#editor_textarea_ifr").contents().find('img').css("max-width","100%");
            iframeHeight = $("#editor_textarea_ifr").contents().find("html").height();            
            $("#editor_textarea_ifr").css("height",iframeHeight + 100);                     
        });             
    },

sobre el cambio del nodo (ediciones)

  init_instance_callback: function (editor) {
    editor.on('NodeChange', function (e) {
      $("#editor_textarea_ifr").contents().find('img').css("max-width","100%");               
      iframeHeight = $("#editor_textarea_ifr").contents().find("html").height();              
      $("#editor_textarea_ifr").css("height",iframeHeight + 100);   
    });
}