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

Question

我有以下自定义 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);
                }
            });
        }
    });
})();

当我使用 ckeInstance.getData() 方法时，将返回整个代码(小部件模板)。

有什么方法可以定义 widget/getData() 应返回什么内容？

我不想解析 .getData() 方法返回的代码。我认为应该用ckeditor来完成。

Answer 1

你必须扩展你的downcast小部件定义中的函数。它应该返回 element或text您可以在此处控制小部件在数据中的表示形式。当然，一旦定义了它，请确保 upcast函数能够将此类表示形式从数据解码回 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>

一旦您调用editor.getData()。如果您编写相应的 upcast 来提取 data-content 并重新构建 DOM，使其再次看起来像您的小部件模板，那么您就有了一个完整的状态机，可以将数据和 DOM 之间的小部件。

简而言之，downcast 函数是一种编码器(DOM->data)，upcast 是一种解码器(data->DOM)。