CKEditor,AJAX Save

Question

您能否提供一个示例,说明如何使用CKEditor工具栏中的"保存"按钮设置C​​KEditor以通过AJAX进行保存？

我有兴趣创建一个CKEditor AJAX保存页面,但我们没有在他们的网站上看到任何示例.

谢谢!

Answer 1

您可以使用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()方法的save事件:

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

Answer 2

尝试直接从_source/plugins/save/plugin.js复制并根据需要进行更改.在/ path/to/ckeditor/plugins中创建新插件(即不在/ path/to/ckeditor/_source/plugins中).例如,在/ path/to/ckeditor/plugins中创建一个新目录"AjaxSave",然后在该目录中创建一个文件"plugin.js".然后在该文件中做这样的事情(改编自源文件夹中的正常"保存"插件):

(function()
{
  var saveCmd =
  {
    modes : { wysiwyg:1, source:1 },
    exec : function( editor )
    {
      var $form = editor.element.$.form;
      if ( $form )
      {
          try
          {
            editor.updateElement();
//Here is where you put your ajax submit function. For example... if you are using
// jQuery and the ajaxform plugin, do something like this:
            $($form).ajaxSubmit({
               success: function(response){
                 //do something with the response
               }
            });
          } catch ( e ) {
            //alert(e);
          }
      }
    }
  }
  var pluginName = 'ajaxsave';
  CKEDITOR.plugins.add( pluginName,
  {
     init : function( editor )
     {
        var command = editor.addCommand( pluginName, saveCmd );
        command.modes = { wysiwyg : !!( editor.element.$.form ) };
        editor.ui.addButton( 'AjaxSave',
         {
            label : editor.lang.save,
            command : pluginName,
            icon: "/img/save.png"
         });
     }
   });
})();

然后在定义工具栏的配置中,将"AjaxSave"更改为"Save".

编辑:你还必须添加config.extraPlugins ="ajaxsave"; 到配置.