HTML Buttons Plugin for CKEditor

Introduction

This is plugin helps creating custom buttons to insert a block of desired HTML in CKEditor.

Sample icons from Tango!

Author:

Alfonso Martínez de Lizarrondo

Version history:

1.0: 23-May-2012. First version.
1.5.1: 02-Sep-2014
Includes changes proposed by Eric Arnol-Martin to wrap the existing selection with the HTML snippet (instead of only inserting and overwritting the selection).
It includes also the proposal by Julian Ivancsuk to use a menu-button dropdown instead of individual buttons so you don't clutter the toolbar if you have a lot of buttons.
1.5.2: 29-Sep-2015. Adjusted so it doesn't break the "Toolbar configurator", although the icons won't show up below.

Installation

1. Copying the files

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

ckeditor\
	...
	images\
	lang\
	plugins\
		...
		htmlbuttons\
			plugin.js
			docs\
				install.html
		...
	skins\
	themes\

2. Adding it to CKEditor

Now add the plugin in your config.js or custom js configuration file: config.extraPlugins='htmlbuttons';

3. Define your buttons

You must add to your config a new entry defining the buttons that you want to use. For example:

config.htmlbuttons = [
	{
		name:'button1',
		icon:'icon1.png',
		html:'<a href="http://www.google.com">Search something</a>',
		title:'A link to Google'
	},
	{
		name:'button2',
		icon:'icon2.png',
		html:'<table><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr></table>',
		title:'A simple table'
	},
	{
		name:'button3',
		icon:'icon3.png',
		html:'<ol><li>Item 1 <ol><li>Sub item 1</li><li>Sub item 2</li></ol></li></ol>',
		title:'A nested list'
	},
	{
		name:'divs',
		icon:'puzzle.png',
		title:'Insert items',
		items : [
			{
				name:'button4',
				icon:'icon1.png',
				html:'<div class="wrapper"><ol><li>Item 1</li></ol></div>',
				title:'A div with a list inside'
			},
			{
				name:'button5',
				icon:'icon2.png',
				html:'<p class="heading"> </p>',
				title:'A paragraph with a class'
			}

		]
	}	
];

4. Add them to your toolbar

In your toolbar configuration, add a new button for each item in the place where you want the list to show up.

Example

config.toolbar_Basic = [["Bold","Italic","-","NumberedList","BulletedList","-","Link","Unlink","-","Maximize", "About", '-', 'button1', 'button2', 'button3']];

5. Use them

Now empty the cache of your browser and reload the editor, the new buttons should show up and you can insert the HTML that you have configured with each button

Disclaimers