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->数据）和upcast - 解码器（data-＆gt; DOM）。

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

1 个答案: