问题
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:
- The problem exist only if the parent object is a table object and this is why it can increase its width.
- 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.
- 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.
- 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/
回答1:
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.
来源：https://stackoverflow.com/questions/14732959/ckeditor-4-textarea-replace-toolbar-increase-the-textarea-width