Specifying allowedContent for widgets in CKEditor

0
votes

I'm implementing a new widget that will be very similar to the simplebox example, so I'm trying to make that work first.

In the tutorial, it is said that specifying allowedContent is enough to include additional elements, classes, styles that we need, so that it is not filtered out. In the main editor configuration I have

div(simplebox);

This successfully enables the widget but still, if I switch to source and back to wysiwyg, things inside like the class for the inner div - "simplebox-content" is deleted and the widget no longer works properly. I haven't changed the code for simplebox.

Am I doing something wrong here?

2
ckeditor

2 Answers

1
votes

Take a look on widget definition in Simplebox plugin:

editor.widgets.add( 'simplebox', {
    // Allow all HTML elements, classes, and styles that this widget requires.
    // Read more about the Advanced Content Filter here:
    // * http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
    // * http://docs.ckeditor.com/#!/guide/plugin_sdk_integration_with_acf
    allowedContent:
        'div(!simplebox,align-left,align-right,align-center){width};' + 
        'div(!simplebox-content); h2(!simplebox-title)',

    // Minimum HTML which is required by this widget to work.
    requiredContent: 'div(simplebox)',

    ...
} );

It says that the minimal requiredContent for the widget to work is div(simplebox). By "minimal", it means that it will run but with a limited set of features.

And this is exactly what happens when you set config.allowedContent = 'div(simplebox)'. If you compare it with allowedContent property in widget definition, you'll notice that by default, the widget registers much more than that in editor's filter, like .align-left, .align-right, .align-center and .simplebox-content classes for <div> and .simplebox-title class for <h2>. Once you set config.allowedContent, you override the rules defined by the widget and if some elements/classes become disallowed because of that, the structure of the widget gets "flattened", just like described

[...] things inside like the class for the inner div - "simplebox-content" is deleted and the widget no longer works properly

So the long story short: When you define config.allowedContent on your own, you are responsible for the shape of editor features and you must understand the consequences. Only if you include all the rules from the definition of Simplebox, you'll enjoy the full functionality of the widget.

0
votes

I had the same problem. What I did was I added the classes inside editables variable like this:

editables: {
  content: {
    selector: '.static-gray-box',
    allowedContent: 'h5(first-child,last-child);h6(first-child,last-child);p(first-child,last-child)'
  }
},