Preview Button, plugin for CKEditor

HavaLite CMS

A new liteweight Content Management System (CMS)

Preview Button, plugin for CKEditor

The Preview tool of CKEditor creates by clicking the preview button a new window to show the content of the editor. We needed for Havalite CMS a preview button that shows the content on our main site, it must have a specific url adresse with the id of the edited post and a log number in case the post is still not public. Thats why we made our own Preview plugin and here we would like to show you how easy to create a button plugin with a specific url adresse for CKEditor:

Prepare folder and files

  1. Open the plugins folder of CKEditor and add a new folder, call it "previewbutton"
  2. add a small image for your button and call it what ever you want, but to make it easy we will name it the same as the the plugin "previewbutton.png".
  3. add a js file and name it "plugin.js"

Now we open the plugin.js file with any html- or text editor of you choice and write following lines:

CKEDITOR.plugins.add( 'previewbutton', {
    init: function( editor ) {
        editor.addCommand( 'previewbuttonDialog', {
            exec : function( editor ) {
        editor.ui.addButton( 'Previewbutton', {
            label: 'Insert Abbreviation',
            command: 'previewbuttonDialog',
            icon: this.path + 'previewbutton.png',
            toolbar: 'insert'

open the file where you implemented your editor and add the name of your new plugin:

    CKEDITOR.replace('editor1', {
        "extraPlugins": "previewbutton"

Thats it!

Hint: If your CKEditor has own defined toolbar, so you need to add the name of the new plugin = "Previewbutton".

comments powered by Disqus


    Leave a Reply

    Contact Info

    Phone: +49 941 26175

    Address: Ayman Teryaki,
    Prüfeninger Str. 48,
    93047 Regensburg, Germany

    Want more info - go to our contact page or visit Google+


    Stay up to date. Subscribe via RSS, Facebook, Twitter or Email

    Recent Comments