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.

Solution 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.