如何自动调整tinyMCE的大小？

Question

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

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

另外，文本区域的宽度：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 上提供正确的高度可能会有所帮助。如果需要，请将此参数添加到传递的选项中：

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%'

要设置流体高度：

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

Answer 3

在tinymce 3.4.6中，
在init选项中设置

width:'100%'

即可解决问题。

Answer 4

如果您通过 JS 动态执行小型 MCE，则可能会遇到计时问题，其中 MCE 编辑器尚无法进行样式调整。为了解决这个问题，您可以使用老式的超时。

在此示例中，我为 JQuery 使用“j”命名空间。如果您的编辑器位于可更改大小的流体 div 中，您可能需要将其包含在 $(window).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) 

Answer 5

上述内容在 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.onresize = function() {
    resizeEditor();
}

Answer 6

使用版本 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></code>

不需要 jquery 或其他依赖项，它现在 100% 填充父级。

Answer 7

我遇到了同样的问题，在阅读此线程后，我最终得到了此代码

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

，我调整了“_ifm”元素而不是“_tbl”的大小，因为调整“_tbl”的大小并没有为我调整编辑区域的大小。然后，我通过使“_ifr”比容器 div 短 85 像素，为工具栏和状态栏留出一些空间。

我必须使用 setTimeout 才能使其工作，也许是因为我有一个显示容器元素的动画。

Answer 8

我正在使用纯 css 解决方案来实现此目的（tinyMCE 4.0.20）。

1. 将 iframe 高度设置为 100%：

   tinymce.init({
   高度：'100%'
   })

2. 添加样式以自动调整 iframe 容器的大小：

   .mce-tinymce { 高度：自动；宽度：100%；位置：绝对；左：0；顶部：0；底部：0； }

   .bq-editor .mce-container-body { 高度：100%； }

   .bq-editor .mce-edit-area { 位置：绝对；顶部：57 像素；底部：0；宽度：100%；高度：自动； }

注意：我有一个工具栏行，顶部：57px；在 .bq-editor .mce-edit-area 中是工具栏填充。

Answer 9

SyCoDeR 是对的，但我遵循了略有不同的路径，尽管结果可能相同。

/*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;
}

已修订，因为 TinyMCE 通过添加或删除菜单/工具栏更改了 id。无论你用它做什么，这都有效。

Answer 10

这是一个老问题，但显然现在（2020 年下半年）它仍然引起很多关注。

遗憾的是，随着 TinyMCE v5 的发布，我发现的大多数解决方法根本不再起作用。我确信它们曾经有效过，但每个 TinyMCE 版本似乎都会带来新的“约束”，从而削弱这些解决方法......

无需进行讨论，我相信这是进化的成本。对于像 TinyMCE 这样的老产品来说，令人难以置信的是它仍然存在并且运行良好，远远高于竞争对手。它是迄今为止适用于所有环境（包括移动环境）以及自此诞生的新语言和框架（这似乎是最近的一种趋势，每天都会突然出现新语言和框架）的最高效、最灵活的解决方案之一。

因此，考虑到这一点，在多次（失败）尝试使大多数建议的解决方案发挥作用之后，我决定深入研究源代码（TinyMCE v5.4）以更好地理解它。我发现总体上是一个更加优越的产品，并且每个人都在寻找的解决方案比我预期的更容易实施。

事不宜迟，我的解决方案非常有效。它实现了一个编辑器，可以获取整个文档区域（或您想要的任何区域），该编辑器将随浏览器调整大小，不需要脚本，不需要黑客，也不需要可能导致跨浏览问题的技巧。具体方法如下：

1. 为您的 和 DOM 对象提供缺少的大小属性，并根据您的需要调整间距：

html, body {
   width    : 100%;
   height   : 100%;
   margin   : 0 !important;
   padding  : 0 !important;
   overflow : hidden;  /* Required if you want to have the editor taking the entire page. */
                       /* Otherwise, set as you need it. */
}

2. TinyMCE 建议使用 </code> 嵌入到 <code><form></code> 对象中。无论您是否按照建议使用它，只需提供它和 ID 以及以下 CCS 属性（在我的例子中，它设置为 <code><form method="post" id="editorBase"></ code>)：

#editorBase {
   display : block !important;
   width   : 100%  !important;
   height  : 100%  !important;
}

3. 在 TinyMCE Init 方法中，添加或修改以下设置：

tinymce.init({
   // Required Settings:
   width  : '100%',  // Note value is set as "string".
   height : '100%',  // Note value is set as "string".
   resize : false,   // Suggestion: disable the statusbar resizing. :)
   
   // Suggested Settings:
   toolbar_sticky   : true,       // Keep the menu and tollbar in a fixed position .
   toolbar_location : 'top',      // You can try 'top', 'bottom' or 'auto'.
   toolbar_mode     : 'floating', // It is simply a button behavior settings. 
                                  // Options are: 'floating', 'sliding', 'scrolling', or 'wrap'.  
});

4. 但在 TinyMCE Init 设置中，找到 plugins 项目并从中删除autoresize选项（这是最重要的一步！）。

5. 完成！尝试并测试一下！ （是的！一切都完成了！）

通过这些简单的调整，您可以设置编辑器以适应任何设计。请随意根据需要进行调整。只是不要忘记将 TinyMCE Init 设置中的 width 和 height 属性设置为字符串，并使其与 CSS 设置保持一致对于

。

在 TinyMCE Init 设置的 width 和 height 属性中使用字符串而不是数字值的原因是允许您使用“%” 、“em”、“pt”等...否则，所提出的解决方案将永远无法工作。

另一个使其更加简洁的技巧是将编辑器设置为无边框皮肤（该功能仅存在于 TinyMCE 的“专业”版本中） ）。不，这不是黑客，它是对 CSS 的简单调整，并且完全受到 TinyMCE 的 EULA 和许可的允许。只需将以下 CSS 添加到您的页面样式表中，它就可以免费享受无边框编辑器：

.tox-tinymce { border:none !important; }

没有比这更容易的了。

快乐编码！

Answer 11

iframe 的包装器（其 ID 以 _ifr 结尾）是 span 的第一个父级，它具有 application 作为 role 。
因此，要获得包装器：

$('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'))

Answer 12

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

这是我的解决方案：（为响应式图像添加了 img max-width）

初始化（编辑）

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