Javascript TinyMCE 宽高不听话！
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6436934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TinyMCE width and height disobedient!
提问by Jimbo
According to the (conflicting) documentation of TinyMCE, the editor takes on the size of the textarea (or other) element that it replaces. It also says that you can set the size of the editor by specifying { height: '123', width: '123' }in the initmethod.
根据 TinyMCE 的（冲突）文档，编辑器采用它替换的 textarea（或其他）元素的大小。它还说您可以通过{ height: '123', width: '123' }在init方法中指定来设置编辑器的大小。
I have tried BOTH and still get only one result - the editor resizes itself to (how it remembers is beyond me) what it was the last time a user resized it.
我已经尝试了这两种方法，但仍然只得到一个结果 - 编辑器将自身调整为（它的记忆方式超出我的范围）用户上次调整它的大小。
采纳答案by Wesley Murch
I know all about this, it isvery annoying.
我都知道这一点，这是很烦人的。
Adding this to any loaded CSS file fixed the width for me (I just put it in the global css, not in any of the TinyMCE css files, I did not test with height):
将此添加到任何已加载的 CSS 文件中为我固定了宽度（我只是将它放在全局 css 中，而不是任何 TinyMCE css 文件中，我没有使用高度进行测试）：
.mceEditor > table {
width:/* my width */ !important;
}
This would affect all instances, which was fine in my case. You can target the toolbar itself with .mceToolbar
这会影响所有实例，这对我来说很好。您可以使用.mceToolbar
You kind of dowant TinyMCE to resize the textarea, so it can be wide enough to fit all the toolbar icons.
您确实希望 TinyMCE 调整文本区域的大小，使其足够宽以适合所有工具栏图标。
回答by Stuart
Its saves the last size because of the theme settings. You can turn it off by using the following
由于主题设置，它会保存最后一个大小。您可以使用以下方法关闭它
$('textarea.tinymce').tinymce({
theme_advanced_resizing: true,
theme_advanced_resizing_use_cookie : false,
回答by Kamil Bednarz
Here is my fix.
It works also for multiple instances of TinyMCE editors (init() with 'height' property works only for the first instance, so it's a workaround to achieve a fixed or minimum height of the editor box).
这是我的修复。
它也适用于 TinyMCE 编辑器的多个实例（具有 'height' 属性的 init() 仅适用于第一个实例，因此它是实现编辑器框的固定或最小高度的一种解决方法）。
.mceEditor td.mceIframeContainer iframe {
min-height: 350px !important;
}
.mceEditor table {
height: auto !important;
}
回答by Gihan Lasita
tinyMCE.init({
mode : "exact",
.....
mode : "exact" will disable the ability to resize grid by drag
模式：“精确”将禁用通过拖动调整网格大小的能力
回答by Thariama
Yes, this is very annoying. I wrote my own function to adjust the height to the given input. You may modify it to set your height/width as you wish:
是的，这很烦人。我编写了自己的函数来调整给定输入的高度。您可以修改它以根据需要设置高度/宽度：
resizeIframe: function(frameid) {
var frameid = frameid ? frameid : this.editor.id+'_ifr';
var currentfr=document.getElementById(frameid);
if (currentfr && !window.opera){
currentfr.style.display="block";
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
}
else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
}
styles = currentfr.getAttribute('style').split(';');
for (var i=0; i<styles.length; i++) {
if ( styles[i].search('height:') ==1 ){
styles.splice(i,1);
break;
}
};
currentfr.setAttribute('style', styles.join(';'));
}
},
回答by danjah
I noticed that a containing table was enforcing widths, and also the icon set are td's, so there's a minimum width they'll collapse down to, so if you have many icons in a single row - it could be messing all over your widths.
我注意到一个包含表正在强制宽度，并且图标集也是 td 的，所以它们会折叠到一个最小宽度，所以如果你在一行中有很多图标 - 它可能会在你的宽度上乱七八糟。
Sort of related SO question of mine, ended up being quite related to your problem: Able to float td elements consistently?
我的一些相关的 SO 问题，最终与您的问题非常相关：能够始终如一地浮动 td 元素？
回答by Gihan Lasita
im setting width and height to editor area like this
我像这样将宽度和高度设置为编辑器区域
<style>
#content{width: 620px; height: 500px;}
</style>
<textarea name="content" id="content" cols="50" rows="15"></textarea>
回答by Commandrea
I found the TinyMCE text-area (called '.mceContentBody' in my theme) too small and awkwardly margined in the new post content area. In my theme there's a css file called editor-style. I changed the width (to 98%) yet since TinyMCE uses cookies to remember the editor size, the CSS changes weren't sticking. After CLEARING MY BROWSER'S CACHE, the CSS width/margin changes took effect. Finally. Gah.
我发现 TinyMCE 文本区域（在我的主题中称为“.mceContentBody”）太小，并且在新帖子内容区域中的边距很尴尬。在我的主题中有一个名为 editor-style.css 的文件。我更改了宽度（到 98%），但由于 TinyMCE 使用 cookie 来记住编辑器的大小，CSS 更改并没有保持不变。经过清算浏览器的缓存，CSS的宽度/保证金的变化生效。最后。嘎。
回答by gpkamp
Add a 'body_id' using tinymce.init and then use that id in 'content_css' to give the editor the desired css behavior. Like so:
使用 tinymce.init 添加“body_id”，然后在“content_css”中使用该 id 为编辑器提供所需的 css 行为。像这样：
tinymce.init({
selector: "textarea",
content_css: '/css/app.css',
body_id: 'new-journal-editor'
});
And then in app.css:
然后在 app.css 中：
#new-journal-editor {
height: 123px;
width: 123px;
}
回答by user1946891
Although there are a lot of good suggestions here I found the answer by reading the question. There is NO problem with height or width so why all these work arounds with CSS or writing functions, the method in the docs works.
虽然这里有很多好的建议，但我通过阅读问题找到了答案。高度或宽度没有问题，所以为什么所有这些都使用 CSS 或编写函数解决，文档中的方法有效。
The original challenge was about resizing, the author never said the height or width didn't work, it just didn't do what he/she expected - it was only stated as quoted below:
最初的挑战是关于调整大小，作者从来没有说高度或宽度不起作用，它只是没有达到他/她的预期 - 只是如下所述：
"the editor resizes itself to (how it remembers is beyond me) what it was the last time a user resized it."
“编辑器将自身调整为（我无法记住它的记忆方式）用户上次调整其大小时的大小。”
Saidul Islam answered the question correctly and to take it one step further Stuart went on to describe how to turn off the cookies. If you need to set the height and width do it when in init() and be done. You can read more here:
Saidul Islam 正确回答了这个问题，更进一步，Stuart 继续描述如何关闭 cookie。如果您需要在 init() 中设置高度和宽度并完成。你可以在这里阅读更多：
https://www.tinymce.com/docs/configure/editor-appearance/#min_height
https://www.tinymce.com/docs/configure/editor-appearance/#min_height
Sizing the input area in both height and width works as outlined below.
调整输入区域的高度和宽度大小的工作原理如下所述。
tinymce.init({
selector: '.profileTextArea',
plugins : 'advlist autolink link image lists charmap print preview code',
min_height: 400
});
