Making a custom spoiler-plugin for CKEDITOR

When we develop the admin part of our web apps in Smart Gamma, we often face a need to integrate various HTML editors. This is the best way to let the user, who is not familiar with web development, to fill his website with content and change interface. However, oftentimes we see that editors just don’t have the functionality we need.

In this article, we are going to observe popular HTML editor — CKEDITOR and show how to create a custom plugin bootstrap-spoiler.

This plugin is going to use bootstrap.css styles. That is why we need to set it for our editor and our final page with content. The structure of our plugin is next:

In the dialogs folder we create a spoiler.js file, which will create a dialogue window that inputs HTML content to our page.

The plugin is ready, but it won’t hide/unhide elements on our web page ( the editor only adds HTML) We should insert ““main page”” js code to our web page.

The only thing left is to copy and register our new plugin in our project.

If you are using Symfony2 bundle egeloen/ckeditor-bundle than you need to place a folder with your plugin inside AppBundle/Resources/public/js and app/config.yml as well.

ivory_ck_editor:
     default_config: default
     configs:
         default:
             extraPlugins: “spoiler”
             contentsCss: ‘bundles/app/css/bootstrap.min.css’
     plugins:
         spoiler:
             path: “/bundles/app/js/bootstrap-spoiler/”
             filename: “plugin.js”

Full version of this plugin could be found here:

https://github.com/smart-gamma/ck_editor-spoiler-bootstrap-plugin

Originally posted on www.smart-gamma.com