我有一个设置在 TextArea 上的 TinyMCE，我希望此编辑器区域始终占据其父 div 的所有空间。
我有一个获取当前空间并将 textarea.style.height 设置为它的 JS 函数，但是当我启用 TinyMCE 时，它似乎停止工作。
另外，文本区域的宽度为：100%；当它使用 TinyMCE 时，它也不会通过 HTML 渲染来调整大小。
有什么想法吗？
【问题讨论】：
标签： javascript html resize tinymce autoresize
现在，您应该使用 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。
重点是 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 事件中使用代码和函数调用。
【讨论】：
在 tinymce 3.4.6 中， 设置
width:'100%'
在 init 选项中会解决问题。
【讨论】：
如果您通过 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)
【讨论】：
if(var==null){setTimeout...}，但仍然简单且有效
以上方法在 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 添加到现有样式中，应该很容易将其放入文件中。
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% 填充父项。
【讨论】：
我遇到了同样的问题，在阅读了这个帖子后我最终得到了这个代码
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 让它工作，可能是因为我有一个显示容器元素的动画。
【讨论】：
我正在使用纯 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 是工具栏填充。
【讨论】：
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。无论你用它做什么，它都有效。
【讨论】：
这是一个老问题，但显然它在今天（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. */
}
<textarea> 嵌入到<form> 对象中。无论您是否按照建议使用它，只需为其提供 ID 和以下 CCS 属性（在我的情况下，它设置为 <form method="post" id="editorBase">）：#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'.
});
但在 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; }
再简单不过了。
编码愉快！
【讨论】：
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'))
【讨论】：
这些解决方案都没有对我 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);
});
}
【讨论】：