TinyMCE宽度和高度不听话！

根据TinyMCE的（冲突）文档，编辑器将采用它替换的textarea（或其他）元素的大小。它还表示，您可以通过在init方法中指定{ height: '123', width: '123' }来设置编辑器的大小。TinyMCE宽度和高度不听话！

我已经试过了，仍然只有一个结果 - 编辑器将自己调整为（它记得超出我的范围）它是用户最后一次调整它的大小。

来源

2011-06-22 Jimbo

TinyMCE的使用cookie来记住它的老大小。 –

我都知道这一点，是很烦人。

添加这对任何加载CSS文件固定宽度，我（我只是把它在全球的CSS，而不是在任何TinyMCE的CSS文件，我没有随高度测试）：

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

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

你有种做想TinyMCE的调整大小的文本区域，所以可以足够宽，以适应所有的工具栏图标。

来源

2011-06-22 09:22:08

谢谢，这对我很好用！ – Brian

其实，要添加到这个答案;调整高度添加一个高度属性到上面显示的类，然后创建另一个类'td.mceIframeContainer iframe'有一个稍小的高度值（占工具栏） – Brian

IM设置宽度和高度编辑区这样

<style> 
#content{width: 620px; height: 500px;} 
</style> 

<textarea name="content" id="content" cols="50" rows="15"></textarea>

来源

2011-06-22 08:34:33

问题是，只要手动调整了编辑器的大小（通过拖动角落），它将忽略您指定的宽度和高度：（ – Jimbo

添加此项，它将禁用手动调整大小的功能 tinyMCE.init（{ mode：“exact”， –

是的，这是很烦人的。我写了自己的函数来调整给定输入的高度。您可以修改它来设置你的高度/宽度，如你所愿：

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

来源

2011-06-22 09:05:54 Thariama

我注意到一个包含表中执行宽度，也是图标集是TD的，所以有他们将向下塌陷到最小宽度，所以如果你在一行中有很多图标 - 它可能会在你的宽度上发生混乱。

排序我的相关SO问题，最终是相当的相关问题的方法：Able to float td elements consistently?

来源

2011-06-22 09:16:35 danjah

tinyMCE.init({ 
     mode : "exact", 
     .....

模式：“确切”将禁止通过拖放

来源

2011-06-24 13:09:43

所有'mode：'exact''确实是改变TinyMCE的绑定模式 - 例如，如果你将它保留为'mode：'textareas''，它会自动绑定到所有'textarea'元素，而将其改为“精确”意味着您需要指定绑定到哪些元素（可以是任何元素fr通过将'elements：'x，y，z''添加到您的初始化程序中，将'textarea'设置为'div'）。 – Jimbo

来调整电网的能力，这是我的修正。
它也适用于TinyMCE编辑器的多个实例（init（），'height'属性仅适用于第一个实例，所以它是解决方法来实现编辑框的固定高度或最小高度）。

.mceEditor td.mceIframeContainer iframe { 
    min-height: 350px !important; 
} 
.mceEditor table { 
    height: auto !important; 
}

来源

2011-09-29 08:23:35

这个小黑客正是我所需要的！谢谢！ – DOOManiac

由于主题设置，它保存最后的尺寸。您可以通过以下

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

来源

2012-07-13 08:50:46 Stuart

更准确的解决方案，比改变全球的CSS。谢谢你的伴侣！ – strongBAD

为我工作，thnx！ –

这应该是正确的答案！谢谢！ – bang

关闭它，我发现TinyMCE的文本区域（在我的主题叫“.mceContentBody”）太小了，在新的岗位内容区域笨拙保证金。在我的主题中有一个名为editor-style的css文件。我改变了宽度（至98％），因为TinyMCE使用cookie来记住编辑器的大小，CSS变化并没有停留。 清除MY BROWSER'S CACHE后，CSS宽度/边距更改生效。最后。嘎。

来源

2013-02-04 20:39:18 Commandrea

-1

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

例如：

<div style="width:90%!important;" ><textarea name="content"cols="100" rows="15" class="mceEditor" id="content"><?php echo $content;?></textarea></div>

来源

2015-05-29 10:04:26 Nick

添加 'body_id' 使用tinymce.init，然后使用 '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; 
}

来源

2015-08-07 19:18:02 gpkamp

虽然有很多很好的建议，在这里我找到了答案通过读取问题。高度或宽度没有问题，为什么所有这些解决方法都是用CSS或者写函数，文档中的方法是有效的。

原来的挑战是关于变更，笔者从来没有说过的高度或宽度没有工作，它只是没有做什么，他/她期待 - 如下面引用它只是说：

“的编辑自我调整（它记得超出我的范围），这是用户最后一次调整它的大小。“

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

来源

2016-01-22 04:29:33 user1946891

根本不起作用 – kabrice

我面临着同样的问题，但我最终会做这个

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

来源

2017-08-13 10:58:34