# 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

### Sponsored by:

### Version history:

1. 1.0: 23-May-2012. First version.

## 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'
    	}
    ];

### 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

CKEditor is © CKSource.com

Sample icons from Tango!