CK Editor - не могу поймать отправить;

Question

Я пытаюсь поймать отправку формы с помощью jquery, который был отправлен нажатием кнопки сохранения в редакторе ck.

Мой код JavaScript

$(function() {
    var config = {
        skin : 'office2003',
        toolbar :[
            ['Save','Preview'],
            ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print'],
            ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
            ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
            ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
            ['Link','Unlink'],
            ['Image','Table','HorizontalRule','SpecialChar','Iframe'],
            ['Format','Font','FontSize'],
            ['TextColor','BGColor', 'Bold','Italic','Underline','Strike','-','Subscript','Superscript']
        ]
    };
    $('#cont').ckeditor(config);

    $('form').submit(function() {
        var form = $(this);
        var name = form.children('#name').val();
        var desc = form.children('#desc').val();
        var cont = form.children('#cont').val();
        var id = form.children('#id').val();

        $.ajax({
            url: basePath + 'admin/ajax/pages/edit',
            type: 'POST',
            data: {
                name: name,
                desc: desc,
                cont: cont,
                id:   id
            },
            success: function(data) {
                if (data.response)
                    $('#ajaxSuccess').show('fast').delay(10000).hide('fast');
                else
                    $('#ajaxError').show('fast').delay(10000).hide('fast');

            },
            error: function(data) {
                $('#ajaxError').show('fast').delay(10000).hide('fast');
            }
        });
        return false;

    });

});

Но по какой-то причине обработчик отправки, кажется, даже не вызывается (проверено через alert('called'); в качестве первой строки), вместо этого форма отправляется нормально.

Что я делаю не так?

<ч /> Основываясь на ответе ниже, я обновил свой код до

$(function() {
    var saveCmd = {
        modes : { wysiwyg:1, source:1 },
        exec : function( editor ){
            jQuery($form = editor.element.$.form).submit();
        }
    };

    var pluginName = 'safesave';

    // Register a plugin named "save".
    CKEDITOR.plugins.add(pluginName, {
        init : function( editor ){
            var command = editor.addCommand( pluginName, saveCmd );
            command.modes = { wysiwyg : !!( editor.element.$.form ) };

            editor.ui.addButton( 'SafeSave',{
                label     : editor.lang.save,
                command   : pluginName,
                className : 'cke_button_save'
            });
        }
    });


    var config = {
        skin : 'office2003',
        toolbar :[
            ['SafeSave','Preview'],
    ...

Но теперь у меня нет кнопки сохранения, как дела?

Answer 1

Да, вы не можете.Вам нужен другой модуль сохранения.Я написал это для этой конкретной цели:

(function(){
    var saveCmd = {
        modes : { wysiwyg:1, source:1 },
        exec : function( editor ){
            jQuery($form = editor.element.$.form).submit();
        }
    };

    var pluginName = 'safesave';

    // Register a plugin named "save".
    CKEDITOR.plugins.add(pluginName, {
        init : function( editor ){
            var command = editor.addCommand( pluginName, saveCmd );
            command.modes = { wysiwyg : !!( editor.element.$.form ) };

            editor.ui.addButton( 'SafeSave',{
                label     : editor.lang.save,
                command   : pluginName,
                className : 'cke_button_save'
            });
        }
    });
})();

Теперь просто измените вашу команду с save на SafeSave.Не уверен, почему я назвал это SafeSave, может быть, я устал, как сейчас:)

Обратите внимание, что это зависит от jQuery.Если вы не используете jQuery, измените функцию exec.

Answer 2

Вы можете использовать beforeCommandExec событие & cancel () метод:

<script type="text/javascript">
$(document).ready(function () {

    $('.ckeditoriz').ckeditor(/* config */);

    $('.ckeditoriz').each(function () {
        var id = $(this).attr('id'),
            form = this.form;

        CKEDITOR.instances[id].on('beforeCommandExec', function (event) {
            if (event.data.name === 'save') {
                event.cancel();
                $(form).submit();
            }
        });

    });

    $('.ajaxForm').submit(function (event) {
        event.preventDefault();
        var $this = $(this);
        $.ajax({
            type: $this.attr('method'),
            url: $this.attr('action'),
            data: $this.serialize()
        });
    });

});
</script>

<form action="url" method="post" class="ajaxForm">
  <!-- Your textarea must have an ID! -->
  <textarea id="textarea1" name="textarea1" class="ckeditoriz"></textarea>
</form>

Обновление:

Это не работает в версиях CKEditor 4.0 , 4.1 , 4.2 , однако снова работает с версии 4.3 .

Начиная с версии CKEditor 4.2 вы можете использовать событие save с методом cancel () :

CKEDITOR.instances[id].on('save', function (event) {
    event.cancel();
    $(form).submit();
});

Answer 3

Если вам необходимо обновить элемент onchange ckeditor, используйте этот код:

for (var i in CKEDITOR.instances) {
    CKEDITOR.instances[i].on('change', function() { 
    CKEDITOR.instances[i].updateElement() });
}

Answer 4

Вы можете перехватить отправку, используя псевдопротокол javascript:

<script type="text/javascript">
    function Save() {
        // called when the save button is pressed
    }
</script>

...

<form action="javascript:Save()">...</form>