CKEditor 4 textarea replace - 工具栏增加textarea宽度 [英] CKEditor 4 textarea replace - Toolbar increase the textarea width

问题描述

我有一个textarea，我替换为CKEditor 4.1实例使用moono皮肤。
问题是，即使我将CKEditor实例配置为100％它的工具​​栏
增加我的宽度取决于其按钮的金额。

从我的研究我明白它的发生，因为在月皮肤
editor.css文件有一个白色空间：nowrap;对所有元素和此定义
阻止.cke_toolbar对象进入一个新行，即使是浮动。

注意：

1. 只有当父对象是表对象时，问题才存在，这就是为什么它可以增加其宽度。


2. 默认的CKEditor宽度是100％，当它说给编辑器以获得父pbject宽度所以在我的情况下，我不需要设置宽度的编辑器（或我可以设置100％），它需要得到


3. 为了证明问题来自工具栏，您可以取消SJFiddle项目中的javascript注释行，并看到编辑器获得正确的宽度。


4. 在我的示例中，我不能在工具栏上使用新行，因为textarea宽度取决于用户。

有没有办法使用CKEditor配置修复它，或者我必须编辑
editor.css并删除white-space：nowrap;从.cke_toolbar手工？
我不喜欢手动做，因为我不喜欢修复它任何时候我upgrate CKEditor版本。

jsfiddle.net/royshoa/9c2Xp/ 2 /

解决方案

CKEditor不会继承它替换的textarea的宽度。你需要明确地告诉它的宽度。

在yout JSFiddle它足够添加：

 < script> CKEDITOR.config.width = 250;< / script> 
  

，宽度为250像素。

详细了解如何设置配置： http://docs.ckeditor.com/#!/guide/ dev_configuration

更新：

CKEditor - Webkit浏览器中的编辑器宽度溢出。 / p>

已报告 http：//dev.ckeditor。 com / ticket / 9947 ，补丁应该与4.0.2一起发布，所以在大约2周内。

I have a textarea that i replace to a CKEditor 4.1 instance using the "moono" skin. The problem is that even when i configure the CKEditor instance to be 100% its toolbar increase my width depend on the its buttons amount.

From my research i understand that its happen because the in the "moono" skin "editor.css" file there is a "white-space:nowrap;" on all the element and this definition is preventing the ".cke_toolbar" object to go into a new line even if are floating.

Notes:

1. The problem exist only if the parent object is a table object and this is why it can increase its width.
2. The default CKEditor width is 100% and when its say to the editor to get the parent pbject width so in my case i do not need to set a width to the editor (or i can set 100%) and it need to get the parent width.
3. For proving that the problem is from the toolbar you can cancel the javascript note lines in the SJFiddle project and see that the editor get the correct width.
4. In my case i can not use a new line on the toolbar because the textarea width is depend on the user.

Are there is a way to fix it using the CKEditor configuration or that i must edit the "editor.css" and remove the "white-space:nowrap;" from the ".cke_toolbar" manually? I do not like to do it manually because i do not like to fix it anytime i upgrate a CKEditor version.

jsfiddle.net/royshoa/9c2Xp/2/

解决方案

CKEditor won't inherit width from textarea it replaced. You need to tell it explicitly its width.

In yout JSFiddle it's enough to add:

<script>CKEDITOR.config.width = 250;</script>

and it will be 250px wide.

Read more about setting configuration: http://docs.ckeditor.com/#!/guide/dev_configuration

Update:

You've encountered this issue CKEditor - Editor Width Overflows in Webkit Browsers.

It's already reported http://dev.ckeditor.com/ticket/9947 and the patch should be released with 4.0.2 so in about 2 weeks.

这篇关于CKEditor 4 textarea replace - 工具栏增加textarea宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！