TinyMCE宽度和高度不听话!

根据TinyMCE的(冲突的)文档,编辑器采用它替换的textarea(或其他)元素的大小。 它还说你可以通过在init方法中指定{ height: '123', width: '123' }来设置编辑器的大小。

我已经尝试了BOTH并且仍然只得到一个结果 – 编辑器调整自身(它记得如何超出我),这是用户最后一次resize的时间。

我知道这一切,非常讨厌。

将此添加到任何加载的CSS文件为我修复了宽度(我只是将它放在全局css中,而不是在任何TinyMCE css文件中,我没有测试高度):

 .mceEditor > table { width:/* my width */ !important; } 

这会影响所有实例,在我的情况下这很好。 您可以使用.mceToolbar定位工具栏本身

确实希望TinyMCE调整textarea的大小,因此它可以足够宽以适应所有工具栏图标。

由于主题设置,它保存了最后的大小。 您可以使用以下方法将其关闭

 $('textarea.tinymce').tinymce({ theme_advanced_resizing: true, theme_advanced_resizing_use_cookie : false, 

这是我的修复。
它也适用于TinyMCE编辑器的多个实例(init(),’height’属性仅适用于第一个实例,因此它是一种解决方法,可以实现编辑框的固定或最小高度)。

 .mceEditor td.mceIframeContainer iframe { min-height: 350px !important; } .mceEditor table { height: auto !important; } 
 tinyMCE.init({ mode : "exact", ..... 

mode:“exact”将禁用通过拖动调整网格大小的function

是的,这非常烦人。 我编写了自己的函数来调整给定输入的高度。 您可以修改它以根据需要设置高度/宽度:

  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 

我像这样设置编辑区域的宽度和高度

   

我注意到一个包含的表强制执行宽度,而且图标集也是td的,所以它们会折叠到最小宽度,所以如果你在一行中有很多图标 – 它可能会在你的宽度上乱七八糟。

我的相关SO问题的排序,最终与你的问题非常相关: 能够一致地浮动td元素吗?

我发现TinyMCE文本区域(在我的主题中称为“.mceContentBody”)在新的post内容区域中太小而且难以边缘化。 在我的主题中有一个名为editor-style的css文件。 我改变了宽度(达到98%),因​​为TinyMCE使用cookie来记住编辑器大小,CSS更改并没有坚持。 清除我的浏览器缓存后 ,CSS宽度/边距更改生效。 最后。 嘎。

使用tinymce.init添加’body_id’,然后在’content_css’中使用该id为编辑器提供所需的css行为。 像这样:

 tinymce.init({ selector: "textarea", content_css: '/css/app.css', body_id: 'new-journal-editor' }); 

然后在app.css中:

 #new-journal-editor { height: 123px; width: 123px; } 

虽然这里有很多好的建议,但我通过阅读这个问题找到了答案。 高度或宽度没有问题,所以为什么所有这些都使用CSS或编写函数,文档中的方法有效。

最初的挑战是关于resize,作者从未说过高度或宽度不起作用,它只是没有做他/她预期的事情 – 它只是如下所述:

“编辑器将自己调整到(它如何记得超出我的范围),这是用户最后一次resize的时间。”

Saidul Islam正确地回答了这个问题,并进一步向Stuart继续描述了如何关闭cookie。 如果需要设置高度和宽度,请在init()中完成。 你可以在这里阅读更多:

https://www.tinymce.com/docs/configure/editor-appearance/#min_height

在高度和宽度上调整输入区域的大小如下所述。

 tinymce.init({ selector: '.profileTextArea', plugins : 'advlist autolink link image lists charmap print preview code', min_height: 400 }); 

我面临着同样的问题,但我最终还是这样做了

 #tinymce-textarea_ifr { min-height: 500px !important; } .mce-tinymce { width: 96% !important; margin: 0 auto !important; } 

我发现限制宽度tinyMCE 4+ textarea的最佳方法是将textarea包装在一个新的div或span标签中。 然后应用宽度。 这样您就可以使用百分比宽度而不是固定的px。 如果要调整高度,请编辑rows =“15”值。

例: