我发现工具栏 don't automatically wrap in WebKit browswers (Safari, Chrome)。 CKEditor 3 有一个 three year old bug 报告，但它已关闭。也许这是一种回归？
我没有在我的配置中设置宽度。我希望编辑器自动扩展到可用宽度。编辑器位于应用了 div 样式的 overflow: hidden; 元素内。
这是我的工具栏配置:
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']}
];
火狐:
Chrome(因为容器而截断编辑器):
我不想添加硬中断，因为我以不同的宽度使用相同的编辑器配置。如何在不使用手动换行“按钮”的情况下解决此问题？
更新
我在表单中使用
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"><p>Foo foo!</p></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 。我会接受一个为这个错误提供解决方法的答案。
最佳答案
我无法重现这个问题。无论是 4.0 还是 4.0.1。我只是复制了您的工具栏配置 + { resize_dir: 'both', resize_minWidth: 300, width: 500 } 以便更好地观察它是否有效，结果如下:
更新(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">
<p>Foo foo!</p>
</textarea>
<script>
CKEDITOR.replace( 'editor1', {
toolbar: // your toolbar
} );
</script>
</div>
</body>
</html>
一切对我来说仍然正常。我可以更改浏览器的宽度，并且工具栏可以正确调整大小。所以我的猜测是您的某些样式破坏了编辑器，或者您有一些非默认的 CKEditor 设置导致了这种情况。
关于google-chrome - CKEditor - Webkit 浏览器中的编辑器宽度溢出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14261708/