如何自动调整tinyMCE的大小？

Posted 2023-03-05

【中文标题】如何自动调整tinyMCE的大小？

【英文标题】：How to automatic resize tinyMCE?

【发布时间】：2010-12-20 10:12:15

【问题描述】：

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

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

另外，文本区域的宽度为：100%；当它使用 TinyMCE 时，它也不会通过 html 渲染来调整大小。

有什么想法吗？

【参考方案1】：

现在，您应该使用 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'); 

【讨论】：

autoresize_min_height 和 autoresize_max_height 现在已弃用，只需改用 min_height 和 max_height。

【参考方案2】：

重点是 TinyMCE 会在 textarea 的位置生成一个 iframe，其 ID 为：originalID+"_ifr"，以及一个 table 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 事件中使用代码和函数调用。

【讨论】：

谢谢。这很有帮助。您应该将“To make fluid height”下第一行的样式声明更改为“document.getElementById(id+'_tbl').style.height”，我确定这就是您的意思。

我遇到了同样的问题，我有一个窗口调整大小监听器，它动态设置 TinyMCE 编辑器的宽度，但随着 100% 停止工作。这个组件的自动宽度似乎有点脆弱..？

【参考方案3】：

在 tinymce 3.4.6 中， 设置

width:'100%'

在 init 选项中会解决问题。

【讨论】：

这有点明显，您可以从我自己提出的问题答案中看到。最大的问题是高度。

【参考方案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) 

【讨论】：

我不知道为什么人们会否决这个答案。这是唯一对 jQuery 有意义的答案。它很漂亮，很短，很聪明，而且确实有效。我很遗憾我不能为此投票+10。两年前的答案，仍然非常有效。将它与 init_instance_callback : "[function_name]" 选项结合在 tinymce init 部分中。

同意，投票结果为零（在撰写本文时）。好人会花时间回答这些问题，如果被否决，难道不应该有人解释原因吗？

我不得不更进一步并添加if(var==null)setTimeout...，但仍然简单且有效

谢谢。这是相当古老的，但当时 TinyMCE 并不能很好地处理动态 JS。我相信对于那些使用最新最好的 MCE 的人来说，会有更好的答案。

【参考方案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 的宽度和高度相匹配，因为编辑器会在弹出窗口中出现。为了检测更改和调整大小，我将其设置为回调：

window.onresize = function() 
    resizeEditor();

【讨论】：

我猜 $('.mce-toolbar, .mce-statusbar, .mce-menubar') 只有在只有一个 tinyMceEditor 时才能正常工作。

【参考方案6】：

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

如果您希望将 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-panelborder: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-areaflex: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%，并通过在你的 textarea 周围放置一个 div 来完成：<div class="tinycme-full"> <textarea ... /></div>

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

【讨论】：

效果很好，但它切断了底部的状态栏。

它对我来说很好用。状态栏显示正确。

【参考方案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 让它工作，可能是因为我有一个显示容器元素的动画。

【参考方案8】：

我正在使用纯 css 解决方案来实现这一点（tinyMCE 4.0.20）。

将 iframe 高度设置为 100%：

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

为自动调整大小的 iframe 容器添加样式：

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

.bq-editor .mce-container-body 高度：100%;

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

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

【参考方案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。无论你用它做什么，它都有效。

【参考方案10】：

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

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

不做讨论，我相信这是进化的代价。对于像 TinyMCE 这样的老产品，令人难以置信的是，它仍然存在并且在踢，在竞争中遥遥领先。到目前为止，它是适用于所有环境的最有效和最灵活的解决方案之一，包括移动和那些由此诞生的新语言和框架（这似乎是最近的一种趋势，每天都有新的语言和框架出现）。

因此，考虑到这一点，经过多次（失败）尝试使大多数提议的解决方案发挥作用，我决定深入研究源代码（TinyMCE v5.4）以更好地理解它。我发现总体而言是一款非常出色的产品，而且每个人都在寻找的解决方案比我预期的要简单得多。

事不宜迟，我的解决方案简单有效。它实现了一个编辑器，它采用整个文档区域（或您想要的任何区域），将随浏览器调整大小，不需要任何脚本、没有 hack 和任何可能导致交叉浏览问题的技巧。方法如下：

为您的 <html> 和 <body> 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. */

TinyMCE 建议将<textarea> 嵌入到<form> 对象中。无论您是否按照建议使用它，只需为其提供 ID 和以下 CCS 属性（在我的情况下，它设置为 <form method="post" id="editorBase">）：

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

在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'.  
);

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

完成！尝试并测试它！ （是的！一切都完成了！）

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

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

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

.tox-tinymce  border:none !important; 

再简单不过了。

编码愉快！

【参考方案11】：

iframe 的包装器（其 ID 由 _ifr 完成）是它具有 application 作为角色的 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'))

【参考方案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);   
    );