Как переопределить обработчик для кнопки в ckeditor?

Question

Я хотел бы иметь собственный обработчик для кнопки сохранения.

Как мне переопределить команду по умолчанию?

Answer 1

Текущий верхний ответ испортил группировку панели инструментов для меня (поставьте кнопку сохранения в конце), а другой ответ не работал в ckeditor v4.

Вот как это сделать в ckeditor 4:

html:

<textarea id="CKEditor1"></textarea>

javascript:

<script>
    // Need to wait for the ckeditor instance to finish initialization
    // because CKEDITOR.instances.editor.commands is an empty object
    // if you try to use it immediately after CKEDITOR.replace('editor');
    CKEDITOR.on('instanceReady', function (ev) {

        // Create a new command with the desired exec function
        var editor = ev.editor;
        var overridecmd = new CKEDITOR.command(editor, {
            exec: function(editor){
                // Replace this with your desired save button code
                alert(editor.document.getBody().getHtml());
            }
        });

        // Replace the old save's exec function with the new one
        ev.editor.commands.save.exec = overridecmd.exec;
    });

    CKEDITOR.replace('CKEditor1');

</script>

Answer 2

CKEDITOR.plugins.registered['save']=
    {
     init : function( editor )
     {
        var command = editor.addCommand( 'save',
           {
              modes : { wysiwyg:1, source:1 },
              exec : function( editor ) {
                 //YOUR CODE
              }
           }
        );
        editor.ui.addButton( 'Save',{label : 'YOUR LABEL',command : 'save'});
     }
    }

Answer 3

Если вы хотите переопределить команду save только для одного экземпляра, вы можете попробовать следующий код:

var editor = $('#myTextarea').ckeditorGet(); // Retrieving CKeditor instance with jQuery
editor.getCommand('save').exec = function(editor) { 
    // Do whatever you need to
    ...
    return true;
};

Это должно работать для любой команды CKEditor.

Answer 4

В CKEditor 4 плагин сохранения предназначен для отмены. Если не уверены, всегда можно взглянуть на источник . Вы можете отменить событие и применить свою собственную логику в обработчике, как в этом примере:

//assuming editor is a CKEDITOR.editor instance
editor.on('save', function (event) {
    event.cancel();
    //your custom command logic
    //(you can access the editor instance through event.editor)
});

Я бы не советовал создавать новую команду и заменять ее по умолчанию, поскольку это ненужный обходной путь.

Answer 5

function configureEditor(id) {
    var editor = CKEDITOR.replace(id);
    editor.on("instanceReady", function () {
        // overwrite the default save function
        editor.addCommand("save", {
            modes: { wysiwyg: 1, source: 1 },
            exec: function () {
                // get the editor content
                var theData = editor.getData();
                alert("insert your code here");
            }
        });
        editor.ui.addButton('Save', { label: 'My Save', command: 'save', enabled: 'true' });
        var saveButton = $('#cke_' + id).find('.cke_button__save');
        saveButton.removeClass('cke_button_disabled');
    });
}