19

wayを使用して自分の Web ページに ckeditor を表示していclass="ckeditor"ます。基本的なツールバーのみを表示するように ckeditor を構成するにはどうすればよいですか。ここでは、基本的なツールバーを表示するためのサンプル ページを見つけましたが、それを表示する方法をドキュメントから取得していません。

http://ckeditor.com/demo

[カスタム ツールバー] タブをチェックして、非常に基本的なタイプのツールバーを含む最初のサンプルを確認してください。どうすれば表示できますか?

ここに私のコードがあります

<body>
    <textarea class="ckeditor" id="description" rows="5" cols="15"></textarea>
</body>

Web サイトの ckeditor のすべてのインスタンスに対して基本的なツールバーを表示したいと考えています。

4

5 に答える 5

20

前の 2 つの回答を組み合わせると、完全な解決策が得られます。最初に、「ckeditor」フォルダーの「config.js」ファイルにオプションを追加します。

 CKEDITOR.editorConfig = function( config ) {
    config.skin = 'bootstrapck';
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.toolbar_Full =
        [
            { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
            { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
            { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
            { name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
                'HiddenField' ] },
            '/',
            { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
            { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
                '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
            { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
            { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
            '/',
            { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
            { name: 'colors', items : [ 'TextColor','BGColor' ] },
            { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
        ];

    config.toolbar_Basic =
        [
            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
        ];
};

次に、HTML ファイルの「基本」構成への呼び出しを追加します。

            <textarea id="ckeditor"></textarea>
            <script type="text/javascript">
                CKEDITOR.replace( 'ckeditor',
                        {
                            toolbar : 'Basic', /* this does the magic */
                            uiColor : '#9AB8F3'
                        });
            </script>

これだけで十分です。もちろん、html ファイルで「ckeditor.js」ファイルを呼び出すことを忘れないでください。

于 2015-04-24T00:52:51.973 に答える
14

起動時に特定の構成を設定する必要があります。

<script type="text/javascript">
    CKEDITOR.replace( 'description',
    {
        toolbar : 'Basic', /* this does the magic */
        uiColor : '#9AB8F3'
    });
</script>

descriptionidあなたのウェブサイトの編集者のことを指しています。

興味深いリンク:

于 2012-11-21T17:49:39.707 に答える