动态更改tinyMce编辑器的高度

Question

我在我的页面中使用了tinymce编辑器.我想要做的是动态更改编辑器的高度.我创建了一个函数:

function setComposeTextareaHeight()
{
    $("#compose").height(200);
}

但那不起作用.我的textarea是

<textarea id="compose" cols="80" name="composeMailContent" style="width: 100%; height: 100%">

我已经尝试了各种方法来改变高度,但无法达成分辨率.我有什么遗失的东西吗？

Answer 1

您可以使用resizeTo主题方法调整tinymce的大小:

   editorinstance.theme.resizeTo (width, height);

宽度和高度设置了编辑区域的新大小 - 我还没有找到一种方法来推断编辑器实例的额外大小,所以你可能想要这样做:

   editorinstance.theme.resizeTo (new_width - 2, new_height - 32);

Answer 2

尝试:

tinyMCE.init({
       mode : "exact",
       elements : "elm1",
     ....

要在javascript代码中动态更改大小:

var resizeHeight = 350;
var resizeWidth = 450;
    tinyMCE.DOM.setStyle(tinyMCE.DOM.get("elm1" + '_ifr'), 'height', resizeHeight + 'px');
    tinyMCE.DOM.setStyle(tinyMCE.DOM.get("elm1" + '_ifr'), 'width', resizeWidth + 'px');

Answer 3

以下来自我发布的其他SO答案:

以上都没有在TinyMCE v4中为我工作,所以我的解决方案是根据工具栏/菜单栏/状态栏计算高度,然后设置编辑器的高度,考虑这些高度.

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

在我的情况下,我希望编辑器窗口与实际的宽度和高度相匹配window,因为编辑器会出现在弹出窗口中.要检测更改并调整大小,我将其设置为回调:

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

Answer 4

有点晚了，但是对于像我这样的Googler，请检查autoresize插件

tinymce.init({
    plugins: "autoresize"
});

选件

autoresize_min_height ：编辑器自动调整大小时的最小高度值。

autoresize_max_height ：编辑器自动调整大小时的最大高度值。