Javascript 如何自动调整tinyMCE的大小？

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

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

此外，文本区域具有宽度：100%；当它也使用TinyMCE时，它不会通过HTML呈现来调整大小

---

有什么想法吗？

关键是TinyMCE在文本区域生成一个iframe，ID为：originalID+“\u ifr”，以及一个表originalID+“\u tbl”，用于保存控件和编辑器区域

要设置流体宽度，请执行以下操作：

要创建流体高度，请执行以下操作： 通过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

事件中使用代码和函数调用。

如果您通过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) 

在tinymce 3.4.6中， 设置

---

init选项将解决这个问题。

现在，您应该使用tinyMCE附带的。您必须像这样调用tinyMCE（jQuery版本）：

我的经验是，在

init\u instance\u回调中手动调用resizing可能会有所帮助，以在init上提供正确的高度。如果需要，请将此参数添加到传递的选项中：

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

我也有同样的问题，在读了这篇文章之后，我最终得到了这段代码

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

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

我必须使用setTimeout使其工作，可能是因为我有一个显示容器元素的动画。
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'))

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

将iframe高度设置为100%：

tinymce.init({
身高：“100%”
})

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

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

.bq editor.mce容器体{高度：100%；}

.bq editor.mce编辑区域{位置：绝对；顶部：57px；底部：0；宽度：100%；高度：自动；}

注意：我有一个工具栏行，顶部：57px；在.bq editor.mce中，编辑区域是工具栏填充。
在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();
}

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。无论您使用它做什么，它都可以工作。
对于版本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:

不需要jquery或其他依赖项，并且它现在100%填充父项。
这些解决方案对我来说都不是100%有效。我需要在初始化和编辑时调整高度。我所做的是获取iFrame中HTML元素的高度，然后用额外的100px将该高度应用于iFrame

以下是我的解决方案：（为响应图像添加了img最大宽度）

关于初始化
更改节点时（编辑）
这是一个老生常谈的问题，但显然它在如今（2020年下半年）仍然吸引了很多注意力

遗憾的是，随着TinymceV5的发布，我发现的大多数变通方法都不再有效。我确信他们曾经工作过，但是每一个TinyMCE版本似乎都带来了新的“限制”，削弱了这些工作区

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

因此，考虑到这一点，在尝试了很多（失败的）解决方案之后，我决定深入研究源代码（TinyMCE v5.4）以更好地理解它。总体而言，我发现这是一款非常优秀的产品，而且每个人都在寻找的解决方案比我预期的要简单得多

不再拖延，这里是我的解决方案，简单有效。它实现了一个编辑器，可以获取整个文档区域（或您想要的任何区域），该编辑器将随浏览器调整大小，不需要脚本、黑客和可能导致交叉浏览的技巧
window.onresize = function() {
    resizeEditor();
}

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

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

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

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

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

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

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