CKEditor小部件忘记它们是小部件，变得无用 [英] CKEditor widgets forget they're widgets and become useless

问题描述

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

I have this CKEditor: http://jsfiddle.net/rudiedirkx/kwzcxrLj/ (no button image, the most right 3 buttons)

它添加了类似这样的小部件：

It adds widgets like this:

        // 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不知道它是一个小部件。

That works beautifully when you ADD a widget. But when you save the page and edit it, the widget becomes normal HTML. CKEditor doesn't know it's a widget. It doesn't have the normal edit constraints and styling that it does when it's new.

CKEditor的演示程式运作正常： http://ckeditor.com/demo#widgets ，因此它可能是我。

CKEditor's demo works fine: http://ckeditor.com/demo#widgets so it might be me.

我是什么

推荐答案

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

You need to define upcast and downcast callbacks of a widget definition which will let the Widget System know from what elements widgets of that type should be created and how widget of that type should be transformed into data.

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

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

阅读更多小部件如何成为小部件？ Widget SDK 。

这篇关于CKEditor小部件忘记它们是小部件，变得无用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！