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 and downcast 小部件定义的回调，这将使小部件系统知道应从哪些元素创建该类型的小部件以及应如何将该类型的小部件转换为数据。

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

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

在 How does a widget become a widget? section of the Widget SDK 阅读更多内容。

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

CKEditor widgets forget they're widgets and become useless

javascript

widget

ckeditor