Como redimensionar automático TINYMCE?

Question

Eu tenho um Tinymce que é definido sobre uma textarea e quero que esta área do editor ocorra todo o espaço de sua divisão pai, todos os momentos.

Eu tenho uma função JS que obtém o espaço atual e define o textarea.style.Eight nele, mas quando eu permite que o Tinymce pareça parar de funcionar.

Além disso, a textarea tem largura: 100%; Ele não redimensiona a renderização do HTML quando está usando o TINYMCE também.

Alguma ideia?

Answer 1

Hoje em dia, você deve usar o plug -in automático Isso vem com tinymce. Você terá que ligar para o tinymce assim (versão jQuery):

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

Fiz a experiência, que pode ser útil chamar manualmente o redimensionamento no init_instance_callback Para fornecer a altura correta no init. Adicione este parâmetro às opções passadas, se você precisar:

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

Answer 2

O ponto é que o tinymce gera um iframe no local da textarea, com este id: originalid+"_ ifr" e uma tabela originalid+"_ tbl" para manter os controles e a área do editor.

Para fazer a largura do fluido:

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

Para fazer a altura do fluido:

Mude dinamicamente document.getElementById(id+'_ifr').style.height para a altura que você deseja, através de JS.
Este é o script que estou usando para isso:

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";
}

Você pode usar o código e as chamadas de função dentro onload e onresize body eventos.

Answer 3

em tinymce 3.4.6, conjunto

width:'100%'

Na opção init, resolverá o problema.

Answer 4

Se você está fazendo o pequeno MCE dinamicamente via JS, pode encontrar problemas de tempo em que o editor do MCE ainda não está disponível para ajustes de estilo. Para combater isso, você pode usar um tempo limite da velha escola.

Neste exemplo, estou usando um espaço para nome "J" para jQuery. Se o seu editor estiver em uma div fluida que muda de tamanho, você poderá incluir isso em uma $ (janela) .resize (function () {}); ouvinte.

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

Nenhuma das opções acima estava funcionando para mim no Tinymce V4, então minha solução era calcular a altura com base nas barras de ferramentas/barra de menu/barra de status e, em seguida, definir a altura do editor, levando em consideração essas 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) {
        }
    }
}

No meu caso, eu queria que a janela do editor correspondesse à largura e altura do real window, já que o editor apareceria em um pop -up. Para detectar alterações e redimensionar, defino isso como um retorno de chamada:

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

Answer 6

Com a versão 4 e a opção de usar o layout do FlexBox no navegador, fiz o seguinte para obter uma experiência de edição de altura total e largura da div.

Deve ser fácil colocar o CSS em um arquivo, se você preferir adicioná -lo aos seus 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);

A idéia é que ela faça com que todos os divs necessários ocupem o máximo de espaço da coluna para preencher o pai 100% e é feito colocando uma div em torno de sua textareia: <div class="tinycme-full"> <textarea ... /></div>

Nenhum jQuery ou outras dependências são necessárias e agora preenche 100%ao pai.

Answer 7

Eu tive o mesmo problema, depois de ler este tópico, acabei com este código

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

Eu redimensionei o elemento "_ifm" em vez do "_tbl", já que o redimensionamento do "_tbl" não redimensionou a área de edição para mim. Em seguida, deixo algum espaço para a barra de ferramentas e o statusBar, tornando o "_ifr" 85 pixels mais curto que o contêiner div.

Eu tive que usar o setTimeout para fazê -lo funcionar, talvez porque eu tenha uma animação que exibe o elemento do contêiner.

Answer 8

Estou usando uma solução Pure CSS para conseguir isso (Tinymce 4.0.20).

1. Defina a altura do iframe para 100%:

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

2. Adicione estilos ao contêiner do iframe de resistência automática:

   .mce-tinymce {altura: auto; largura: 100%; posição: absoluto; Esquerda: 0; topo: 0; Inferior: 0; }

   .bq-editor .mce-container-Body {Height: 100%; }

   .bq-editor .mce-edit-area {posição: absoluto; topo: 57px; Inferior: 0; largura: 100%; Altura: Auto; }

Observação: Eu tenho uma linha da barra de ferramentas e superior: 57px; em .bq-editor .mce-edit-area é o preenchimento da barra de ferramentas.

Answer 9

O sycoder está certo, mas eu segui um caminho ligeiramente diferente, embora provavelmente com os mesmos 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 o TINYMCE altera os IDs com adições de menu/barra de ferramentas ou exclusões. Isso funciona, não importa o que você faça com isso.

Answer 10

O invólucro do iframe (seu ID termina por _ifr) é o primeiro pai do Span que possui aplicação como função. Assim, para conseguir o invólucro:

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

Então, para redimensionar a altura:

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

Para redimensionar a largura

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

Answer 11

Nenhuma dessas soluções funcionou 100% para mim. Eu precisava da altura para ajustar a inicialização e durante as edições. O que eu fiz foi pegar a altura do elemento HTML no iframe e depois aplicar a altura ao iframe com 100px extra.

Aqui está a minha solução: (Adicionada largura img max para imagens responsivas)

na inicialização

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

na mudança de nó (edições)

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