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

本文介绍了CKEditor - Webkit浏览器中的编辑器宽度溢出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我发现工具栏。

解决方案

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

更新（2013年1月11日）

我创建了这样的示例：

 <！DOCTYPE html> 
< html> 
< head> 
< title>示例< / title> 
< meta charset =utf-8> 
< script src =../ ckeditor.js>< / script> 
< style> 
 #content {
 width：50％; 
 overflow：hidden; 
} 
< / style> 
< / head> 
< body> 
< div id =content> 
< textarea cols =80id =editor1name =editor1rows =10> 
& lt; p& gt; Foo foo！& lt; / p& gt; 
< / textarea> 
< script> 
 CKEDITOR.replace（'editor1'，{
 toolbar：//您的工具栏
}）; 
< / script> 
< / div> 
< / body> 
< / html>

一切仍然适用于我。我可以更改浏览器的宽度和工具栏正确调整大小。所以我的猜测是，你的一些样式是打破编辑器，或者你有一些非默认CKEditor的设置，导致这一点。

I discovered that the toolbars don't automatically wrap in WebKit browswers (Safari, Chrome). There is a three year old bug reported for CKEditor 3, but it was closed. Maybe this is a regression?

I'm not setting a width in my configuration. I want the editor to expand to the available width automatically. The editor is inside a div element that has the overflow: hidden; style applied to it.

Here's my toolbar configuration:

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']}
];

Firefox:

Chrome (cuts off editor because of the container):

I don't want to add hard breaks, because I use the same editor configuration at varying widths. How do I resolve this without using manual wrap "buttons"?

UPDATE

I use fieldset elements in my forms. I found that adding the fieldset is what triggers the layout issue. This code reproduces the issue:

<!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>

UPDATE 2

I have filed a bug report. I will accept an answer that provides a work-around for this bug.

解决方案

I can't reproduce this issue. Neither on 4.0 nor on 4.0.1. I just copied your toolbar configuration + { resize_dir: 'both', resize_minWidth: 300, width: 500 } to have better chance to observe if it works and this is the result:

Update (11 Jan 2013)

I created such a sample:

<!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>

And everything still works fine for me. I can change browser's width and toolbar is correctly resizing. So my guess is that some of your styles are breaking editor or you've got some non default CKEditor's settings that cause this.

这篇关于CKEditor - Webkit浏览器中的编辑器宽度溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！