从多个CKEditor内联编辑器字段中保存数据,如模板

时间:2013-10-16 08:46:30

标签: javascript ruby-on-rails ajax ckeditor

我正在建立一个模板系统,设计师可以在其中提交HTML5设计并允许用户添加自己的内容。我正在为应用程序使用CKEditor 4.2和Rails 3。我希望用户能够加载模板页面,然后直接编辑各种内联编辑器,然后通过JS和Ajax保存。我有一切工作,但在添加iFrame插件时,我遇到了一些格式问题,因为我只是将原始HTML从内联编辑器保存到我的模板。有关详细信息,请参阅此问题:CKEditor and iFrame/YouTube/Other Embed Plugins Show Weird HTML Code

我现在知道我应该使用类似的东西:

var data = CKEDITOR.instances.editable.getData();

但是我如何管理这样的多个编辑器?我告诉我的设计师只需使用

contenteditable="true"

对于他们想要编辑的任何div。因此,我没有id为每个编辑器引用,也不知道每个模板文件将包含多少个编辑器我希望能够在最终模板中保存不可编辑的内容,当然还有可编辑的内容,这只是一个HTML5页面。

以下是我必须使用id为

的div保存整个模板文件的原始内容的解决方案
$saveButton.click(function(e) {

    // Extract contents of magboy container
    var contents = $("#page-cnt").html();

    // Send contents to server
    $.ajax({
        url: '/pages/'+PageId+'/editor_save',
        type: 'POST',
        data: {
            containerContents: contents
        },
        success: function(response){
            alert("contents saved");
        }
    });

    // prevent original click behaviour
    e.preventDefault();
    return false;

});

总结一下我的问题:

如何在完整的模板页面中实现保存多个CKEditor编辑器内容的保存功能?

非常感谢您的帮助,如果您能帮助解决这个问题,那么它也会回答同样的问题:Saving multiple inline edits with CKEditor

1 个答案:

答案 0 :(得分:5)

对于任何想要做类似事情的人来说,请看这个已回答的问题: ckeditor inline save/submit