初始化

Question

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

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

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

有什么想法吗？

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

Answer 2

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

制作流体宽度：

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

使流体高度：

通过JS将dinamically 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

in tinymce 3.4.6，设置

width:'100%'

init选项中的

将解决问题。

Answer 4

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

在这个例子中，我正在为JQuery使用“j”命名空间。如果您的编辑器位于更改大小的流体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)

Answer 5

以上都不适用于TinyMCE v4，所以我的解决方案是根据工具栏/菜单栏/状态栏计算高度，然后设置编辑器的高度，考虑这些高度。 / p>

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 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％，并通过在textarea周围添加div来完成它：<div class="tinycme-full"> <textarea ... /></div>

不需要jquery或其他依赖项，现在它将100％填充父级。 enter image description here

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

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 9

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

Answer 10

我使用纯css解决方案来实现这一目标（tinyMCE 4.0.20）。

将iframe高度设置为100％：

tinymce.init（{ 身高：＆＃39; 100％＆＃39; }）
添加样式以自动调整iframe容器的大小：

.mce-tinymce {height：auto;宽度：100％;位置：绝对;左：0;顶部：0;底部：0; }

.bq-editor .mce-container-body {height：100％; }

.bq-editor .mce-edit-area {position：absolute;上：57px;底部：0;宽度：100％;身高：自动; }

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

Answer 11

这些解决方案都不是100％适用于我。我需要在初始化和编辑期间调整高度。我所做的是获取iFrame中HTML元素的高度，然后将高度应用于额外的100px的iFrame。

这是我的解决方案:(为响应式图片添加了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);   
    });
}

Answer 12

这是一个古老的问题，但是显然，如今（2020年下半年）它仍然吸引了很多关注。

可悲的是，随着TinyMCE v5的发布，我发现的大多数解决方法都不再起作用。我敢肯定他们曾经工作过，但是每个TinyMCE版本似乎都会带来新的“ 约束”，从而削弱了这些解决方法...

无需讨论，我相信这是进化的代价。对于像TinyMCE这样的旧产品，令人难以置信的是，它仍在竞争中并处于领先地位。到目前为止，它是适用于所有环境（包括移动设备）以及自那时以来诞生的那些新语言和框架的最有效，最灵活的解决方案之一（这似乎是一种趋势，最近每天都有新的趋势出现。） / p>

因此，在我想到这一点之后，经过许多（失败的）尝试使大多数建议的解决方案都起作用，我决定深入研究源代码（TinyMCE v5.4）以更好地理解它。我发现总体上来说，它是一款非常出色的产品，而且每个人都在寻找的解决方案比我期望的要容易得多。

不再拖延，这里的解决方案很有效。它实现了一个编辑器，该编辑器将占据整个文档区域（或您想要的任何区域），并随浏览器 Will 调整其大小，不需要脚本，黑客和可引起跨浏览问题的技巧。方法如下：

为您的<html>和<body> DOM对象提供缺少的size属性，并根据需要调整间距：

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属性设置为字符串，并使其与{{1} }。

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

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

height

再简单不过了。

祝您编程愉快！

如何自动调整tinyMCE的大小？

12 个答案:

制作流体宽度：

使流体高度：

初始化

节点更改（编辑）