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 );
    }
} );

在How does a widget become a widget?的Widget SDK部分了解详情。

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

1 个答案: