Making a custom spoiler-plugin for CKEDITOR

Smart Gamma
Jul 21, 2016 · 2 min read

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.

Image for post
Image for post
Image for post
Image for post

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:

Image for post
Image for post

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store