3

ツールバーが WebKit ブラウザー(Safari、Chrome)で自動的にラップされないことがわかりました。CKEditor 3 について報告された3 年前のバグがありますが、クローズされました。多分これは回帰ですか？

構成で幅を設定していません。エディターを使用可能な幅に自動的に拡張したい。エディターは、スタイルが適用された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">&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

バグレポートを提出しました。このバグの回避策を提供する回答を受け入れます。

4

1 に答える 1

2

この問題を再現することはできません。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">
            &lt;p&gt;Foo foo!&lt;/p&gt;
        </textarea>
        <script>
            CKEDITOR.replace( 'editor1', {
                toolbar: // your toolbar
            } );
        </script>
    </div>
</body>
</html>

そして、すべてがまだ私のためにうまくいきます。ブラウザの幅を変更でき、ツールバーのサイズが正しく変更されています。だから私の推測では、あなたのスタイルのいくつかはエディターを壊しているか、これを引き起こすいくつかの非デフォルトのCKEditorの設定を持っていると思います。

于 2013-01-10T16:23:26.927 に答える