CKEditor widgets forget they're widgets and become useless

问题

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

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's demo works fine: http://ckeditor.com/demo#widgets so it might be me.

What am I doing wrong?

回答1:

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

Read more in the How does a widget become a widget? section of the Widget SDK.

来源：https://stackoverflow.com/questions/29216218/ckeditor-widgets-forget-theyre-widgets-and-become-useless