ck 编辑器 - 无法捕获提交；

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('used'); 作为第一行进行测试），而是正常提交​​表单。

我做错了什么？

---

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

但现在我没有保存按钮，怎么了？

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 开始，您可以使用保存 事件，使用 cancel() 方法：

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

Answer 3

您可以使用 javascript 伪协议捕获提交：

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

...

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

Answer 4

如果您需要更新 ckeditor 上的元素，请使用以下代码：

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