像模板一样保存多个 CKEditor 内联编辑器字段的数据

我正在建立一个模板系统，设计人员可以在其中提交 HTML5 设计并允许用户添加自己的内容。我正在为该应用程序使用 CKEditor 4.2 和 Rails 3。我希望用户能够加载模板页面，然后直接编辑各种内联编辑器，然后通过 JS 和 Ajax 保存。我一切正常，但在添加 iFrame 插件时遇到了一些格式问题，因为我只是将原始 HTML 从内联编辑器保存到我的模板中。请参阅此问题了解更多详细信息：CKEditor 和 iFrame/YouTube/其他嵌入插件显示奇怪的 HTML 代码 https://stackoverflow.com/questions/19383748/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编辑器的内容保存在一个完整的模板页面中？

非常感谢您的帮助，如果您可以帮助解决这个问题，那么我相信它也会回答同样的问题：使用 CKEditor 保存多个内联编辑 https://stackoverflow.com/questions/16108461/saving-multiple-inline-edits-with-ckeditor

对于任何想要做类似事情的人，请参阅这个已经回答的问题：ckeditor 内联保存/提交 https://stackoverflow.com/questions/13603575/ckeditor-inline-save-submit