CODEWITHSUNDEEP
javascriptdrupal-7ckeditorckeditor4.x
Alex
Alex

Reputation: 10216

Why does CKEditor's nesting widgets not work in my Drupal build?

I was very excited to read that nesting widgets is now possible with CKE 4.4+. I read through this question and tried it out - wonderful. Strangely, it does not work with my Drupal site using the CKEditor module.

So, what I got:

The module uses the CDN, delivering CKE 4.5.1 (//cdn.ckeditor.com/4.5.1/full-all).
I set up a module to provide the simplebox plugin (taken from the working dev repo example):

function mymodule_ckeditor_plugin() {
  $plugins = array();
  $plugins['simplebox'] = array(
    'name' => 'simplebox',
    'desc' => t('simplebox Plugin'),
    'path' => drupal_get_path('module', 'mymodule') . '/plugins/simplebox/',
    'buttons' => array(
      'Simplebox' => array('label' => 'Simplebox', 'icon' => 'icons/simplebox.png'),
    )
  );
  return $plugins;
}

which offers me the plugin to activate:

enter image description here enter image description here

And the plugin button is available on my toolbar: enter image description here

Clicking it, the markup gets created. But strangely, adding another one, nested inside, is not possible:

enter image description here

Any ideas what I am doing wrong?

Upvotes: 2

Views: 634

Answers (1)

oleq
oleq

Reputation: 15895

I'm not quite sure where did you get the Simplebox plugin from. I assume that you downloaded it from the official "Creating a Simple CKEditor Widget (Part 2)" guide.

If so, I got to tell you that there's a minor difference between the plugin attached to the guide and that one in plugins/widget/dev/assets/simplebox/plugin.js in ckeditor-dev repository.

The later is up–to–date and enables any kind of rich HTML within content nested editable: 

editor.widgets.add( 'simplebox', {
    ...
    editables: {
        ...
        content: {
            selector: '.simplebox-content'
        }
    }   
} );

while the old is very restrictive:

editor.widgets.add( 'simplebox', {
    ...
    editables: {
        ...
        content: {
            selector: '.simplebox-content',
            allowedContent: 'p br ul ol li strong em'
        }
    }   
} );

See API docs to know more about the definition of nested editables. The introduction to Advanced Content Filter in CKEditor should also prove helpful.

The solution: copy simplebox plugin from the GitHub repository and enjoy nested widgets, with drag and drop, etc. Or just remove allowedContent restriction from content nested editable.

And sorry for the inconvenience, we're doing our best to keep our documentation up–to–date but it's such a massive task that sometimes we're unable to catch up ;)

Upvotes: 0

Related Questions