Question

I am trying to catch a form submission with jquery that is submitted via pressing save in ck editor.

My javascript code is

$(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;

    });

});

But for some reason the submit handler doesn’t even seem to be called (tested via alert('called'); as first line), instead the form is submitted normally.

What am I doing wrong?

---

Based on the answer below I have updated my code to be

$(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'],
    ...

But now I have no save button, whats up?

Answer 1

Yeah, you can’t. You need a different save module. I wrote this for this exact purpose:

(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'
            });
        }
    });
})();

Now just change your command from save to SafeSave. Not sure why I called it SafeSave, maybe I was tired like I am now 🙂

Note that this depends on jQuery. If you aren’t using jQuery, change the exec function.