如何自动调整 tinyMCE 的大小？

问题描述

我有一个 TinyMCE 设置在一个 TextArea 上，我希望这个编辑区域可以覆盖其父 div 的所有空间。

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

此外，textarea 的宽度为 100％; 当它使用 TinyMCE 时，它不会通过 HTML 呈现来调整大小。

有任何想法吗？

最佳解决思路

如今，您应该使用 tinyMCE 附带的 autoresize plugin 。你必须像这样调用 tinyMCE(jQuery 版本)：

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

我做了这个经验，手动调用 init_instance_callback 调整大小可能有助于在 init 上提供正确的高度。如果需要，将此参数添加到传递的选项中：

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

次佳解决思路

关键是 TinyMCE 在 textarea 的位置生成一个 iframe，其 ID 为：originalID + “_ifr”，以及用于保存控件和编辑器区域的表 originalID + “_tbl” 。

使流体宽度：

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

使流体高度：

通过 JS 将 document.getElementById(id+'_ifr').style.height 二进制变为所需的高度。这是我用于这个的脚本：

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 事件中的代码和函数调用。

第三种解决思路

在 tinymce 3.4.6，set

width:'100%'

在 init 选项中会解决问题。

第四种思路

如果您通过 JS 动态地执行小型 MCE，则可能会遇到时间问题，即 MCE 编辑器尚不可用于样式调整。为了解决这个问题，你可以使用一个老学校的超时。

在这个例子中，我使用”j” 命名空间进行 JQuery 。如果您的编辑器处于改变大小的流体 div 中，则可能需要将其包含在 $(窗口).resize(function(){}) 中; 监听器。

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)

第五种思路

上面没有一个在 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();
}

第六种思路

使用版本 4 和在浏览器中使用 flexbox 布局的选项，我做了以下操作，以获得父 div 的全宽度，高度编辑体验。

如果您希望将 CSS 添加到现有样式中，那么将这些 CSS 放在一个文件中是很容易的。

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

这个想法是，它使所有需要的 div 占用尽可能多的列空间来填充父级 100％，并通过在您的文本区域放置一个 div：<div class="tinycme-full"> <textarea ... /></div>

不需要 jquery 或其他依赖关系，现在它将填充 100％的父级。

参考文献

How to automatic resize tinyMCE?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

如何自动调整 tinyMCE 的大小？