CKEditor - Webkit浏览器中的编辑器宽度溢出

我发现工具栏don't automatically wrap in WebKit browswers（Safari，Chrome）。 CKEditor 3报告有一个three year old bug，但它已关闭。也许这是回归？CKEditor - Webkit浏览器中的编辑器宽度溢出

我没有在我的配置中设置宽度。我希望编辑器自动扩展到可用宽度。该编辑器位于应用overflow: hidden;样式的div元素中。

这里是我的工具栏上的配置：

config.toolbar = [ 
    {name:'clipboard', items:['Cut', 'Copy', 'Paste', 'PasteText', 
      '-', 'Undo', 'Redo']}, 
    {name:'insert', items:['Link', 'Unlink', 'Image', 'Table', 'SpecialChar']}, 
    {name:'basic', items:['Bold', 'Italic', 'Strike', 
      '-', 'NumberedList', 'BulletedList', 
      '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', 
      '-', 'Outdent', 'Indent', 
      '-', 'RemoveFormat']}, 
    {name:'styles', items:['Styles']}, 
    {name:'additional', items:['jQuerySpellChecker', 
      '-', 'Source', 
      '-', 'Maximize']} 
];

火狐：
Toolbars wrap nicely

铬（切断编辑器，因为容器的）：
Toolbars do not wrap

我不希望添加硬中断，因为我使用了不同宽度的相同编辑器配置。如何在不使用手动换行“按钮”的情况下解决此问题？

UPDATE

我用我的方式fieldset元素。我发现添加fieldset是触发布局问题的原因。此代码重现该问题：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>CKEditor</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <style> 
      html { 
       background-color: lightgray; 
      } 
      #content { 
       margin: 0 auto; 
       border: 1px solid black; 
       padding: 10px; 
       width: 400px; 
       overflow: hidden; 
       background-color: white; 
      } 
      fieldset { 
       margin: 0; 
       border: 0 none; 
       padding: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="content"> 
      <fieldset> 
       <textarea name="editor1" id="editor1">&lt;p&gt;Foo foo!&lt;/p&gt;</textarea> 
      </fieldset> 
     </div> 
     <script type="text/javascript" src="http://ckeditor.com/apps/ckeditor/4.0.1/ckeditor.js"></script> 
     <script> 
      CKEDITOR.replace('editor1'); 
     </script> 
    </body> 
</html>

更新2

我有filed a bug report。我会接受一个答案，为这个错误提供解决方法。

来源

2013-01-10 Sonny

非常感谢您的更新！这个错误让我生气了。从来没有想过产生它的字段集。 – shadowhorst

我也不会猜到'fieldset'。我只是试图创建最简单的方法来重现该错误，并以这种方式将其缩小到'fieldset'。 – Sonny

我有同样的问题。它解决了吗？ –

我无法重现此问题。无论是4.0还是4.0.1。我只是复制工具栏的配置+ { resize_dir: 'both', resize_minWidth: 300, width: 500 }有更好的机会来观察，如果它的工作原理，这是结果：

enter image description here

更新（2013年1月11日）

我创造了这样一个例子：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Sample</title> 
    <meta charset="utf-8"> 
    <script src="../ckeditor.js"></script> 
    <style> 
     #content { 
      width: 50%; 
      overflow: hidden; 
     } 
    </style> 
</head> 
<body> 
    <div id="content"> 
     <textarea cols="80" id="editor1" name="editor1" rows="10"> 
      &lt;p&gt;Foo foo!&lt;/p&gt; 
     </textarea> 
     <script> 
      CKEDITOR.replace('editor1', { 
       toolbar: // your toolbar 
      }); 
     </script> 
    </div> 
</body> 
</html>

对于我来说，一切仍然正常。我可以改变浏览器的宽度和工具栏正确调整大小。所以我的猜测是，你的一些风格是破坏编辑器，或者你有一些非默认的CKEditor的设置，导致这一点。

来源

2013-01-10 16:23:26 Reinmar

我没有在我的配置中设置宽度。我希望编辑器自动扩展到可用宽度。编辑器位于一个容器'div'中，该容器具有'overflow：hidden''。我会将这些信息添加到我的OP中。 – Sonny

我会尽力在以后复制你的病例。 BTW。假设这是可重复的，您应该在http://dev.ckeditor.com上报告这一点。浏览器之间的这种差异绝对是一个错误，在这种情况下非常重要。 – Reinmar

我更新了我的答案。我无法重现您的问题。 – Reinmar

CKEditor - Webkit浏览器中的编辑器宽度溢出

回答

相关问题