javascript - mostrar - ¿Cómo cambiar automáticamente el tamaño de tinyMCE?

tinymce documentation

Question

Tengo un TinyMCE que se establece sobre un TextArea, y quiero que esta área del editor ocupe todo el espacio de su div principal, todo el tiempo.

Tengo una función JS que obtiene el espacio actual y configura el textarea.style.height, pero cuando habilito TinyMCE parece que deja de funcionar.

Además, el textarea tiene ancho: 100%; no cambia de tamaño mediante la representación HTML cuando también usa TinyMCE.

¿Algunas ideas?

Answer 1

Con la versión 4 y la opción de usar el diseño de flexbox en el navegador, hice lo siguiente para obtener una experiencia de edición de ancho completo y alto del div padre.

Debería ser fácil colocar el css en un archivo si 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 haga que todos los divs necesarios ocupen tanto espacio de columna como sea necesario para completar el 100% principal y se hace colocando un div alrededor de su área de texto: <div class="tinycme-full"> <textarea ... /></div>

No se necesita jquery ni otras dependencias y ahora llena el 100% de los padres.

Answer 2

El punto es que TinyMCE genera un iframe en lugar del área de texto, con este ID: originalID + "_ ifr", y una tabla originalID + "_ tbl" para mantener los controles y el área del editor.

Para hacer ancho de fluido:

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

Para hacer la altura del fluido:

Cambie dinámicamente document.getElementById(id+''_ifr'').style.height a la altura que desee, 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 usar el código y las llamadas de función dentro de onload y onresize body events.

Answer 3

Estoy usando una solución css pura para lograr esto (tinyMCE 4.0.20).

1. Ajuste la altura del iframe al 100%:

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

2. Agregue estilos para cambiar automáticamente el tamaño del contenedor iframe:

   .mce-tinymce {altura: auto; ancho: 100%; posición: absoluta; izquierda: 0; arriba: 0; abajo: 0; }

   .bq-editor .mce-container-body {altura: 100%; }

   .bq-editor .mce-edit-area {posición: absoluta; arriba: 57px; abajo: 0; ancho: 100%; altura: auto; }

Nota: Tengo una línea de barra de herramientas, y superior: 57px; en .bq-editor .mce-edit-area es el relleno de la barra de herramientas.

Answer 4

Hoy en día, debe usar el complemento de tamaño automático que viene con tinyMCE. Tendrá que llamar a tinyMCE de esta manera (versión jQuery):

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

Hice la experiencia, que puede ser útil llamar manualmente el cambio de tamaño en init_instance_callback para proporcionar la altura correcta en init. Agregue este parámetro a las opciones aprobadas, si necesita esto:

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

Answer 5

La envoltura de iframe (su ID finalizada por _ifr) es el primer padre del tramo que tiene la aplicación como función. Por lo tanto, para obtener la envoltura:

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

Para cambiar el tamaño de la altura:

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

Para redimensionar ancho

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

Answer 6

Ninguna de estas soluciones funcionó al 100% para mí. Necesitaba la altura para ajustar la inicialización y durante las ediciones. Lo que hice fue agarrar la altura del elemento HTML en el iFrame, y luego apliqué la altura al iFrame con un extra de 100px.

Aquí está mi solución: (agregado img max-width para imágenes receptivas)

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);                     
        });             
    },

en cambio de 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);   
    });
}   

Answer 7

Ninguno de los anteriores funcionaba para mí en TinyMCE v4, por lo que mi solución fue calcular la altura en función de las barras de herramientas / barra de menú / barra de estado, y luego establecer la altura del editor, teniendo en cuenta esas alturas.

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, quería que la ventana del editor coincidiera con el ancho y el alto de la window real, ya que el editor aparecería en una ventana emergente. Para detectar cambios y cambiar el tamaño, establezco esto en una devolución de llamada:

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

Answer 8

Si está realizando un pequeño MCE dinámicamente a través de JS, puede tener problemas de sincronización en los que el editor MCE aún no está disponible para los ajustes de estilo. Para combatir esto, puedes usar un tiempo de espera de la vieja escuela.

En este ejemplo, estoy usando un espacio de nombres "j" para JQuery. Si su editor se encuentra en un div fluido que cambia de tamaño, puede incluirlo en $ (window) .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 9

SyCoDeR tiene razón, pero seguí 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 ID con las adiciones o eliminaciones del menú / barra de herramientas. Esto funciona sin importar lo que hagas con él.

Answer 10

Tuve el mismo problema, después de leer este hilo terminé con este código

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

Cambio el tamaño del elemento "_ifm" en lugar de "_tbl", ya que cambiar el tamaño de "_tbl" no redimensionó el área de edición para mí. Luego dejo espacio para la barra de herramientas y la barra de estado haciendo que el "_ifr" sea 85 píxeles más corto que el div contenedor.

Tuve que usar setTimeout para hacerlo funcionar, tal vez porque tengo una animación que muestra el elemento contenedor.

Answer 11

en tinymce 3.4.6, conjunto

width:''100%''

En la opción init resolveremos el problema.