Dropdown Details for CKEditor

Requirements

  • CKEditor 4.
  • Browser: It should work inside the editor with any browser supported by CKEditor 4
  • Polyfill: as not all the browsers currently support the details element, you'll have to add a polyfill to your page so that visitors that are using those browsers can open/collapse the items. Example polyfill

Installation (1/2): Copy the files

Extract the contents of the zip in you plugins directory, so it ends up like this:

ckeditor\
        ...
        images\
        lang\
        plugins\
               ...
               details\
                       plugin.js
                       docs\
                       lang\
               ...
        skins\
        themes\

 

Installation (2/2): Add the plugin to CKEditor

Now add the plugin in your config.js or custom js configuration file, adding a line like the following one:

config.extraPlugins='details';

If you're already using another extra plugin, remember that you must add the plugin to that entry, not add a new one:

config.extraPlugins='magicline,details';

If desired, you can see other options to add the plugin to CKEditor.