如何自动调整tinyMCE的大小？

Question

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

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

此外,textarea宽度:100%; 当它也使用TinyMCE时,它不会通过HTML呈现来调整大小.

有任何想法吗？

Answer 1

如今,你应该使用tinyMCE附带的autoresize插件.你必须像这样调用tinyMCE(jQuery版本):

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

我的经验是,init_instance_callback在init中手动调用resize 以提供正确的高度可能会有所帮助.如果需要,请将此参数添加到传递的选项中:

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

Answer 2

关键是TinyMCE在textarea的位置生成一个iframe,使用此ID:originalID +"_ ifr",以及用于保存控件和编辑器区域的表originalID +"_ tbl".

制作流体宽度:

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

要使流体高度:

document.getElementById(id+'_ifr').style.height通过JS将dinamically 改为你想要的高度.
这是我正在使用的脚本:

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

您可以使用内部onload和onresize body事件中的代码和函数调用.

Answer 3

在tinymce 3.4.6中,设置

width:'100%'

在init选项中将解决问题.