template.js.ckeditor.plugins.htmlbuttons.docs.install.html Maven / Gradle / Ivy
HTML Buttons plugin
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.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!