ajax - CKEditor，AJAX 保存

Question

您能否提供一个示例，说明如何使用 CKEditor 工具栏中的“保存”按钮将 CKEditor 设置为通过 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 您可以使用 save事件与 cancel()方法:

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