CKEditor 小部件忘记它们是小部件并变得无用

Question

我有这个CKEditor：http://jsfiddle.net/rudiedirkx/kwzcxrLj/（没有按钮图片，最右边3个按钮）

它添加这样的小部件：

        // Add widget.
        editor.widgets.add('ezhealth_widget_' + size, {
            "template":
                '<div class="ezhealth-ckeditor-widget size-' + size + '">' +
                    '<h3 class="header editable">Title</h3>' +
                    '<div class="left"><p>Content</p></div>' +
                    '<div class="right"><p>Content</p></div>' +
                '</div>',
            "editables": {
                "header": {
                    "selector": '.editable',
                },
                "left": {
                    "selector": '.left',
                },
                "right": {
                    "selector": '.right',
                },
            },
            "allowedContent": 'div(!ezhealth-ckeditor-widget); h3(!header); div(!left); div(!right)',
        });

添加小部件时效果很好。但是当您保存页面并对其进行编辑时，该小部件将变为普通的 HTML。 CKEditor 不知道它是一个小部件。它不像新的那样具有正常的编辑约束和样式。

CKEditor 的演示工作正常：http://ckeditor.com/demo#widgets 所以可能是我。

我做错了什么？

Answer 1

您需要定义小部件定义的 upcast 和 downcast 回调，这将使小部件系统知道应该从哪些元素创建该类型的小部件以及该类型的小部件应如何转换为数据。

editor.widgets.add( 'ezhealth_widget_' + size, {
    // ...

    upcast: function( element ) {
        return element.name == 'div'
            && element.hasClass( 'ezhealth-ckeditor-widget' )
            && element.hasClass( 'size-' + size );
    }
} );

在Widget SDK 的How does a widget become a widget? 部分了解更多信息。