Marketing

Free CKEditor 4 Bootstrap 3 Button Widget

Steven Monetti
min read
December 27th, 2015

Bootstrap 3 Buttons Ckeditor 4 Widget Demo

Introduction

If you're like me, you've researched countless hours in hopes of finding an easier way to integrate Bootstrap's buttons within CKEditor. You have probably found a paid solution. And yes, you can modify source and define the styles, but it just doesn't work right for your clients. As I continuously make my path toward easier web-design-builder-perfection, this was the next step in my never-ending journey. To make life easier on the developers and authors, I've decided to create Herosmyth's own widget. Some of the key features are outlined below, but I wanted to keep it simple and flexible. A convenient feature that I've integrated is the ability to add icons to the left AND to the right of the text. Icons can come from Bootstrap's Glyphicon set, or as I prefer, from FontAwesome. 

I've also created a Drupal module to add this button to the WYSIWYG, but I will cover that in a future article.

Demo

Features

  • Ability to insert a link as a Bootstrap 3 button widget
  • Movable between content without breaking layout
  • All Bootstrap's styles available ( btn-link, btn-default, btn-primary, btn-success, btn-warning,  btn-danger)
  • All Bootstrap's sizes available ( btn-xs, btn-sm, btn-lg)
  • Link target option
  • Ability to add a left and/or right icon ( Bootstrap Glyphicon, or FontAwesome)

Installation

Download Plugin

You may also download from the CKEditor's website.

 

  1. Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example: 
          /path/to/my/site/ckeditor/plugins/btbutton
  2. Enable the plugin by using the extraPlugins configuration setting. Example: 
          config.extraPlugins = 'btbutton';

  3. Download and configure all its dependencies, too ( lineutils ,  widget )

  4. Make sure jQuery is included before CKEditor

In order for the icons to stay when switching between Editor and Source Code, you will need to write a few more lines of code.

Your  ckeditor/config.js should looks something like this:

  CKEDITOR.dtd.$removeEmpty.i = 0; CKEDITOR.dtd.$removeEmpty.span = 0; CKEDITOR.editorConfig
    = function (config) { config.extraPlugins = 'btbutton'; config.allowedContent
    = true; // If you don't have Bootstrap and/or FontAwesome Styles config.contentsCss
    = [ 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css',
    'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'
    ]; };

Make sure you use the latest CDN links to get all the newest icons! 

Bootstrap3 Ckeditor4 Buttons Info

Bootstrap3 Ckeditor4 Buttons Target

Bootstrap3 Ckeditor4 Buttons Icons

Clear your browser's cache, and a new button will appear in your toolbar: 

A sample HTML file may look like this:

  <!DOCTYPE html> <html> <head> <meta charset="utf-8">
    <title>A Simple Page with CKEditor</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="ckeditor/ckeditor.js"></script> </head> <body>
    <form> <textarea name="editor1" id="editor1" rows="10" cols="80">
    This is my textarea to be replaced with CKEditor. </textarea> <script>
    CKEDITOR.replace( 'editor1' ); </script> </form> </body>
    </html>

Contributing & issue tracking

Please contribute to this plugin by forking this GitHub repo: https://github.com/smonetti/btbutton

Comments