logo标签列表

如何自动调整tinyMCE的大小？

javascripthtmlresizetinymceautoresize
35

我有一个TinyMCE编辑器，它设置在TextArea上，我希望这个编辑区始终占据其父div的所有空间。

我有一个JS函数，可以获取当前空间并将textarea.style.height设置为它，但是当我启用TinyMCE时，它似乎停止工作。

此外，TextArea的宽度为100％; 当使用TinyMCE时，它不会通过HTML渲染进行调整大小。

有什么想法吗？

12个回答
0

对我来说，这些解决方案都没有完全奏效。我需要在初始化和编辑期间调整高度。我的做法是获取 iFrame 中 HTML 元素的高度，然后将其应用到 iFrame 上，并额外增加 100px 的高度。

以下是我的解决方案：（为响应式图片添加了 img 最大宽度）

在初始化时

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

在节点更改（编辑）时

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

iframe的包装器（其ID以_ifr结尾）是具有应用程序角色的span的第一个父级。因此，要获取包装器：

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

所以要调整高度：

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

调整宽度

$('[id$=_ifr]').css('width',$('span[role=application]').parents(':eq(0)').css('width'))
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接