web-dev-qa-db-ja.com

CKEditorツールバーを動的に変更する

CKEditorツールバーを動的に（事前定義されたツールバーを使用せずに）どのように変更しますか？

CKEditor 開発者ガイド は、初期化中にツールバーを設定する方法のみを説明しています。

CKEditor3.6.4を使用しています。

ckeditor
15
hpique

mb21 の提案に従って、エディター全体を再初期化することで、新しいツールバーをロードすることができました。

CKEDITOR.instances.editor.destroy();
CKEDITOR.replace('editor', configWithNewToolbar);
9
hpique
var editor = CKEDITOR.instances['text_id'];
if (editor) { editor.destroy(true); }

CKEDITOR.config.toolbar_Basic = [['Bold','Italic','Underline',
'-','JustifyLeft','JustifyCenter','JustifyRight','-','Undo','Redo']];
CKEDITOR.config.toolbar = 'Basic';
CKEDITOR.config.width=400;
CKEDITOR.config.height=300;
CKEDITOR.replace('text_id', CKEDITOR.config);
7
shasi kanth

次のコードを使用すると、エディターを再読み込みせずに、ツールバーを再読み込みまたは変更できます。

  CKEDITOR.editor.prototype.loadToolbar = function(tbName) {
    // If the 'themeSpace' event doesn't exist, load the toolbar plugin
    if (!this._.events.themeSpace) {
      CKEDITOR.plugins.registered.toolbar.init(this);
    // causes themeSpace event to be listened to.
    }
    // If a different toolbar was specified use it, otherwise just reload
    if (tbName) this.config.toolbar = tbName;

    // themeSpace event returns a object with the toolbar HTML in it
    var obj = this.fire( 'themeSpace', { space: 'top', html: '' } );

    // Replace the toolbar HTML 
    var tbEleId = "cke_"+this.config.toolbarLocation+"_"+this.name;
    var tbEle = document.getElementById(tbEleId);
    tbEle.innerHTML = obj.html;
  } // end of loadToolbar

Editor.prototype関数を追加すると、任意のエディターインスタンスのメソッドになります。あなたのエディタオブジェクトはおそらくCKEDITOR.instances.editor1です

LoadToolbarの引数は、ロードするツールバーの名前です。nullの場合は、現在のツールバーが再ロードされます。現在のツールバーの名前はCKEDITOR.instances.editor1.config.toolbarにあります。ツールバー「foo」を指定する場合は、ツールバーの内容を定義するCKEDITOR.instances.editor1.config.toolbar_foo配列が必要です。

配列変数の現在のツールバー配列に追加または削除してから、次のコマンドで再読み込みできます。edObj.loadToolbar（null）;

（上記のメソッドに影響を与えないメタの問題：エディターが最初にテーマをロードした後、「themeSpace」イベントのリスナーが消える理由がわかりません。（ツールバープラグインのinit（）メソッドがevent.on（ "themeSpace"を実行します） ...）しかし、エディターが初期化された後、リッスンは消えます。removeListener（）がどこで実行されたかはわかりませんでした。したがって、これらのイベントリスナーを再確立するには、... toolbar.init（this）を呼び出す必要があり、ツールバーがコードは新しいツールバーを再構築します。）

3
Ribo

私にとっては、少なくともこれは少し複雑になりました。

そして、私が作業コードを共有すると思った質問に答えるために。

ユーザー定義のテキストスニペットがあります。これは、ロードする必要のあるckeditor用語ではテンプレートと呼ばれます。また、ウィンドウの幅に応じてツールバーを動的に変更し、ウィンドウのサイズ変更時に動的にサイズ変更します。各ブラウザサイズには、独自のカスタムツールバーがあります。 （XS、SM、MD）。 CKEDITORを持つすべての要素には、.ckeditorのクラスがあり、IDが割り当てられていると思います。さらに、オンブラーajax保存ハンドラーを設定しているので、フォーカスが失われると、必要に応じてコントロールが自動的に保存されます（ajax_post関数を使用）。

SetupCKEditを使用してプロシージャを呼び出します。古いオブジェクトを削除して新しいインスタンスを作成するインスピレーションを与えてくれたhpiqueに感謝します。サイズ変更イベントでは、わずかな遅延（resizeTimeout = 200msec）でこれを行うため、ウィンドウサイズを変更している間はそれほど頻繁に起動しません。

// ********* ck editor section starts **************

var resizeTimeout;
var ckeditorXSToolbar = Array(
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste','-', 'Undo', 'Redo' ] },
    { name: 'document', groups: [ 'mode' ], items: [ 'Source'] },
    { name: 'tools', items: [ 'Maximize'] },
    { name: 'styles', items: [ 'Format', 'Font', 'FontSize'] ,class:'hidden-xs'},
    { name: 'basicstyles', groups: [ 'basicstyles'], items: [ 'TextColor','Bold', 'Italic'] }

);

var ckeditorSMToolbar = [
    { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize'] ,class:'hidden-xs'},
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
    { name: 'editing', groups: [ 'find', 'selection' ], items: [ 'Find', 'Replace', '-', 'SelectAll' ] },
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print'] },

    { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'TextColor','Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
    { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] }
];
var ckeditorMDToolbar = [
    { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize'] ,class:'hidden-xs'},
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
    { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print'] },

    { name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'TextColor','Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
    { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },

    { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] },
    { name: 'others', items: [ '-' ] },
    { name: 'about', items: [ 'About' ] }
];

function setupCKEdit(selector){
    if (typeof(o.snippets) == 'object'){
        var template = {
            imagesPath:url_img ,
            templates: o.snippets
        };
        CKEDITOR.addTemplates('myTemplate', template);
    }   
    resizeCKEdit();

    $('.ckeditor',selector).not('.hasCKEDITOR').each(function(index,element){
        $(this).addClass('hasCKEDITOR');
        var ckConfig = {
            templates_replaceContent:false,
            scayt_slang:'en_GB',
            scayt_autoStartup:scayt_autoStartup,
            toolbarCanCollapse:true,
            extraPlugins:'templates,colorbutton',
            toolbar:getCKtoolbar(),
            toolbarStartupExpanded:getCKToolbarStartup()
        };
        // inject the snippets after the toolbar[].name = 'document'
        if (typeof(o.snippets) == 'object'){
            ckConfig.templates = 'myTemplate';
            for(var i = 0 ; i < ckConfig.toolbar.length ; i++){
                if (ckConfig.toolbar[i].name == 'document'){
                    // iterate throught each document element to make sure template is not already there.
                    var hasTemplate = false;
                    for ( var j = 0 ; j < ckConfig.toolbar[i].items.length; j++){
                        if (ckConfig.toolbar[i].items[j] == 'Templates'){
                            hasTemplate = true;
                        }
                    }
                    if (hasTemplate == false){
                        ckConfig.toolbar[i].items.Push('-'); // add to documents group.
                        ckConfig.toolbar[i].items.Push('Templates');
                    }

                }
            }           
        }
        $(this).ckeditor(ckConfig);
        var editor = CKEDITOR.instances[this.id];
        if(typeof(editor) == 'object'){
            editor.on('blur',function(event){
                if (event.editor.checkDirty()){
                    var ta = $('#'+event.editor.name); // ta = textarea
                    if ( (typeof(ta) == 'object')
                        && (typeof(ta[0]) == 'object')
                        && ( $(ta[0]).hasClass('noajax') == false )
                        && ( $(ta[0]).data('id')) 
                        && ( ta[0].name)) {
                        var data = {
                            field_name:ta[0].name,
                            field_value:event.editor.getData(),
                            id:$(ta[0]).data('id')
                            };
                        data[ta[0].name]=event.editor.getData();
                        ajax_post(url_ajax + 'update_field', data);
                        event.editor.resetDirty();
                    }
                }
            });
        }
    });
}
function getCKtoolbar(){
    // returns the CK editor toolbar array based on window width
    var dw = $(document).width();
    if (dw < 768){
        return ckeditorXSToolbar;
    } else if(dw < 991){
        return ckeditorSMToolbar;
    }
    else {
        return ckeditorMDToolbar;
    }
}

function getCKToolbarStartup(){
    // returns the toolbarStartupExpanded parameter, based on window width
    var dw = $(document).width();
    if (dw < 768){
        return false;
    } else if(dw < 991){
        return true;
    }
    else {
        return true;
    }
    return true;
}
function resizeCKEdit(){
    // when there is a document resize, update the toolbar buttons.
    if ($('body').data('resize_enabled') == undefined){
        $('body').data('resize_enabled',true);
        $(window).resize(function(event){
            // only do the reize 100msec after the resizing finishes.
            window.clearTimeout(resizeTimeout);
            resizeTimeout = window.setTimeout(function(){

            // iterate through all CKEDITOR instances, and update their toolbars.
                var ckConfig = {
                    templates_replaceContent:false,
                    scayt_slang:'en_GB',
                    scayt_autoStartup:scayt_autoStartup,
                    toolbarCanCollapse:true,
                    extraPlugins:'templates,colorbutton',
                    toolbar:getCKtoolbar(),
                    toolbarStartupExpanded:getCKToolbarStartup()
                };
                if (CKEDITOR.editor.length){
                    // need to get all instances before deleting them,
                    var instances = Array();
                    var i = 0;
                    for (var instance in CKEDITOR.instances) {
                        instances[i] = instance;
                        i++;
                    }
                    for (i = 0 ; i < instances.length ; i ++){
                        CKEDITOR.instances[instances[i]].destroy();
                        $('#'+instances[i]).removeClass('hasCKEDITOR');
                        setupCKEdit($('#'+instances[i]).parent());
                    }
                }
            },200);

        });
    }
}
// ********* ck editor section ends **************
1
pgee70

簡単なものです。

ツールバーにtextcolorボタンやbackgroundcolorボタンが含まれている場合は、この行をloadToolbar関数に追加する必要がある場合があります。

//Need to call init for colorbutton so that we can re-draw the color buttons
CKEDITOR.plugins.registered.colorbutton.init(this);
1
user2173985

または：

   $(document).ready(function() {
      CKEDITOR.config.customConfig = 'configSimple';
   }); 

   //the configSimple.js file is the same folder with config.js
1
ThangTD

ツールバーは好きなように動的に作成できます。最善のアプローチは、インスタンスの作成に関するCKEイベントをリッスンすることであることがわかりました。

CKEDITOR.on('instanceCreated', function(event) {
    var editor = event.editor;
    editor.config.toolbar = [
        { name: 'basicstyles', groups: [ 'basicstyles'], items: [ 'Bold', 'Italic','Subscript', 'Superscript' ] },
    ]; // could be from synchronous!!! XHR as well 
});

CKEDITOR.on('instanceReady', function(event) {
    var editor = event.editor;
    editor.config.toolbar = [
        { name: 'basicstyles', groups: [ 'basicstyles'], items: [ 'Bold', 'Italic','Subscript', 'Superscript' ] },
    ];
});
0
Mitja Gustin

さまざまな領域でツールバーを交換する簡単な方法が必要な場合は、ツールバーを構成に追加し、エディターをインスタンス化するときに必要なツールバーを選択するだけです。

Config.jsの場合：

CKEDITOR.editorConfig = function(config)
{
// default toolbar
config.toolbar = [
    { name: 'source',       items: [ 'ShowBlocks', 'Source' ] },
    { name: 'clipboard',    items: [ 'Undo', 'Redo', '-', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'  ] },
    { name: 'editing',      items: [ 'Find', 'Replace', 'SelectAll', 'Scayt' ] },

    { name: 'p2',           items: [ 'Blockquote', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
    { name: 'links',        items: [ 'Link', 'Unlink', 'Anchor' ] },
    { name: 'paragraph',    items: [ 'NumberedList', 'BulletedList' ] },
    { name: 'insert',       items: [ 'CreatePlaceholder', 'CreateDiv', 'Image', 'Table', 'HorizontalRule', 'SpecialChar', 'Iframe' ] },

    //{ name: 'styles',         items: [ 'Styles', 'Format' ] },
    { name: 'basicstyles',  items: [ 'Bold', 'Italic', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
    { name: 'styles',       items: [ 'Format' ] },
    { name: 'morestyles',   items: [ 'Font', 'FontSize' ] },
    { name: 'colors',       items: [ 'BGColor', 'TextColor' ] }
];

// here is one custom toolbar
config.toolbar_mycustom1 = [
    { name: 'source',       items: [ 'ShowBlocks', 'Source' ] },
    { name: 'clipboard',    items: [ 'Undo', 'Redo', '-', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'  ] },
    { name: 'editing',      items: [ 'Find', 'Replace', 'SelectAll', 'Scayt' ] }
];

// here is another custom toolbar
config.toolbar_mycustom2 = [
    { name: 'styles',       items: [ 'Format' ] },
    { name: 'morestyles',   items: [ 'Font', 'FontSize' ] },
    { name: 'colors',       items: [ 'BGColor', 'TextColor' ] }
];

// ...other config vars here

エディタインスタンスをインスタンス化するページでは、次のようにします。

<script>
    CKEDITOR.replace('MyObject', {toolbar: 'mycustom2'});
</script>
0
jnl

プラグインファイルを介してボタンを追加したいと思います。方法は次のとおりです。ボタンをUIに追加します。

editor.ui.addButton('ButtonName', {
  label: lang.lockediting.locked,
  icon: this.path + 'icons/locked.png',
  command: 'lockediting'});

次に、ButtonNameをツールバーにプッシュできます。

//Here it is pushed as a new group
editor.config.toolbar.Push(['ButtonName']);

Console.log（editor.config.toolbar）;を確認した場合ツールバーは、配列[Array [10]、Array [2]、Array [5]]としてツールバーグループを持つオブジェクトであることがわかります。 [配列[10]は、最初のグループに10個のボタンがあることを意味します。ボタンをこれらのアレイのいずれかに押すことができます。

0
Guest