CKEditor小部件忘记了它们'重新组装小部件，变得毫无用处

CKEditor widgets forget they're widgets and become useless

本文关键字：小部 新组装 毫无用处 忘记了 CKEditor      更新时间：2023-09-26

我有这个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所以可能是我。

我做错了什么？

您需要定义小部件定义的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的部分。

相关文章：