Question

我正在尝试通过在ck编辑器中按“保存”来提交带有jquery的表单提交。

我的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事件＆amp; 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

您可以使用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() });
}

ckeditor - 无法抓住提交;

4 个答案:

更新