Javascript CKEditor-获取编辑器数据和自定义小部件

我有以下自定义ckeditor小部件代码：

(function()
{
    "use strict";

    var jQuery = require("jquery"),
        Underscore = require("underscore"),
        $template = jQuery('<div class="section-wrapper">' +
            '<div class="section-label"><span class="section-label-user"></span><span class="cricon cricon-lock"></span><span class="status-icon cricon"></span><span class="section-label-text"></span><span class="section-label-loader"></span></div>' +
            '<div class="clearfix"></div>' +
            '<div class="section-content">' +
            '</div>' +
            '</div>'),
        bindEvents = function bindEvents(editor, section)
        {
            if(typeof editor.config.sectionPlugin.handlers !== "undefined")
            {
                Underscore.each(editor.config.sectionPlugin.handlers, function(callback, eventName)
                {
                    section.on(eventName, callback);
                });
            }
        };

    CKEDITOR.plugins.add('section', {

        requires: 'widget',

        init: function(editor)
        {
            var self = this;

            // Register the section widget.
            editor.widgets.add('section', {
                inline: false,
                allowedContent: 'section[!data-cid]',
                draggable: false,
                // button is required for UPCAST processing? stupid bug?
                button: 'sectionbtn',
                init: function()
                {
                    var sectionContent;

                    this.$element = jQuery(this.element.$);

                    sectionContent = this.$element.html();

                    // create html structure
                    this.$template = $template.clone();
                    this.$template.find(".section-content").html(sectionContent);
                    this.$element.html(this.$template);

                    // set editable content
                    this.initEditable("content", {
                        selector: ".section-content"
                    });

                    bindEvents(editor, this);
                },
                bindToContract: function(contract, options)
                {
                    this.section_class = contract.get("sections").get(this.$element.attr("data-cid"));
                    if(!this.section_class)
                    {
                        this.$element.addClass("is-corrupted");
                        return false;
                    }

                    this.section_class.on("change:name", this.update, this);

                    this.update();
                },
                update: function()
                {
                    this.$element.find(".section-label-text").text(this.section_class.get("name") + " header" + Math.random());
                },
                upcast: function(element)
                {
                    return element.name === 'section';
                },
                downcast: function(widgetElement)
                {
                    return widgetElement;
                },
                destroy: function(offline)
                {
                    CKEDITOR.plugins.widget.prototype.destroy.call(this, offline);
                }
            });
        }
    });
})();

（函数（）
{
“严格使用”；
var jQuery=require（“jQuery”），
下划线=要求（“下划线”），
$template=jQuery（“”）+
'' +
'' +
'' +
'' +
''),
bindEvents=函数bindEvents（编辑器，部分）
{
if（typeof editor.config.sectionPlugin.handlers！=“未定义”）
{
下划线.each（editor.config.sectionPlugin.handlers，函数（回调，eventName）
{
第.on节（事件名称、回调）；
});
}
};
CKEDITOR.plugins.add（'section'{
需要：'widget'，
init：函数（编辑器）
{
var self=这个；
//注册节小部件。
editor.widgets.add（'section'{
内联：错，
allowedContent:“节[！数据cid]”，
可拖动：错误，
//向上投射处理需要按钮？愚蠢的错误？
按钮：“sectionbtn”，
init:function（）
{
风险价值与内容；
this.$element=jQuery（this.element.$）；
sectionContent=this.$element.html（）；
//创建html结构
此.$template=$template.clone（）；
这个.$template.find（“.section content”）.html（sectionContent）；
this.$element.html（this.$template）；
//设置可编辑内容
此.initEditable（“内容”{
选择器：“.节内容”
});
bindEvents（编辑器，本）；
},
bindToContract：功能（合同、选项）
{
this.section_class=contract.get（“sections”）.get（this.$element.attr（“数据cid”））；
如果（！此.section\u类）
{
此.$element.addClass（“已损坏”）；
返回false；
}
本节（更改：名称、本次更新、本次更新）；
这个.update（）；
},
更新：函数（）
{
this.$element.find（“.section label text”）.text（this.section_class.get（“name”）+“header”+Math.random（））；
},
上行：功能（元素）
{
return element.name==='section'；
},
向下广播：函数（widgetElement）
{
返回widget元素；
},
销毁：功能（脱机）
{
CKEDITOR.plugins.widget.prototype.destroy.call（这个，脱机）；
}
});
}
});
})();

当我使用

ckeInstance.getData（）

方法时，将返回整个代码（小部件模板）

有没有办法定义

widget/getData（）

应该返回什么

我不想分析

.getData（）

方法返回的代码。我认为应该用ckeditor来完成。

您需要在小部件的定义中扩展您的功能。它应该返回或，这是您控制小部件在数据中表示的位置。当然，一旦定义了它，请确保该函数能够将这种表示形式从数据解码回DOM（即您的模板）

例如，你的沮丧情绪可能是

function( widgetElement ) {
    var el = new CKEDITOR.htmlParser.element( 'div', {
        'data-content': this.editables.content.getData()
    } );

    el.setHtml( 'foo' );

    return el;
}

如果您只对

data

属性中嵌套的可编辑内容感兴趣。它会将您的小部件转换为

<div data-content="HTML of nested editable">foo</div>

foo

一旦调用

editor.getData（）

。如果您编写一个相应的

upcast

，提取

数据内容

并重新构建DOM，使其再次看起来像您的小部件模板，那么您就拥有了一个完整的状态机，可以在数据和DOM之间转换小部件

---

简而言之，

downcast

函数是一种编码器（DOM->data）和

upcast

–一种解码器（data->DOM）。

可以使用{var data=CKEDITOR.instances['section'].getData（）；}