So this plugin allows to define as many new toolbar buttons as desired just by specifiying their properties in a config object.
After adding the "htmlbuttons" plugin you can add to your configuration a new entry "htmlbuttons" (yes, the same name I didn't want to think today). That entry must be an array of javascript objects, and each object has four properties; here's one example:
{
name:'button1',
icon:'icon1.png',
html:'<a href="http://www.google.com">Search something</a>',
title:'A link to Google'
},
First, the name for the command and button that you can use in the toolbar. Then the icon to use (place them in the plugin folder), next is the block of HTML that you want to insert, and finally a title to show up while hovering the button.So now you can add those new buttons to your toolbar and when you reload the editor you can use those buttons to insert the HTML.
This sample shows the plugin in action with the default sample buttons (icons picked randomly from the Tango! project, if someone has some suggestions about better code samples and icons they're welcome).
The buttons (the three smileys) are from left to right:
- Insert a link pointing to Google
- Insert a 2x2 table
- Insert a nested list
Download:
Edit 2016: go to CKEditor plugins repository:
HTML Buttons plugin
11 comments:
Is it possible to add a button to REPLACE text? I mean, if I select a portion of text and I click on a custom button, that text is replaced by something else. This would allow me to use this extension to actually WRAP portions of text into custom tags.
Is this possible?
Yes, you can do lots of things as long as you understand how CKEditor works, but usually using custom tags is too complex and you have to face too many problems at once.
Thanks for creating HTMLButtons! It's great and easy to understand. I hope it's OK, but I made it better:
http://blog.eamster.tk/?p=100
Now it does replace text. Hope that helps!
Here's the working link:
Replace Text Version of HTMLButtons
Hi Eric
The idea is interesting, but I don't like too much the way that you have chosen:
It will keep only the selected text, so if the user select something with a link, a span with a style, bold, an image... all of that will be lost so it would be much better to preserve that HTML.
I don't understand why you're removing the <br /> from the code: if they are in the provided HTML snippet I think that they should be used, and strip them if you don't want but the plugin itself shouldn't alter that.
And lastly I'm not sure about using only '> </' as a way to find the place where the current selection should be placed. Usually some marker is used to know that place, and that has the advantage that it can allow to insert different kinds of templates (eg: <h1>Section @selection@</h1> but its simplicity it's nice, no need for magic markers just find a tag with a plain space (vs no space or a nbsp entity)
I would like to publish your changes as an update for everyone, but at the very least I would like to see the first issue (preserve HTML not only the text) fixed.
thank you
Hi Alfonso,
I would save the HTML content if that were currently possible in version 3.x of the CKEditor. I did some searching, and it doesn't look like this can be done anymore? That, or no one knows how to do it properly and the documentation is missing.
Please correct me if I'm wrong. I'm removing the
because it seems that WordPress is continually adding some for no reason. I agree that '> </' is probably not the best way to determine where the selection should be placed, but I can't think of any cases where it will fail. I specifically coded that so that it hopefully won't interfere with anything else...
Here's hoping to a better solution!
Hi Alfonso,
Could you please look at and test version 1.2? What do you think of this version?
http://www.dinofly.com/archived/files/htmlbuttons1.2.zip
I fixed it so that HTML is preserved in a selection. Once I receive some feedback, I think I'll update my blog and offer this version.
I've fixed more bugs, and I think it now works a lot better. Partial selections work properly, inline HTML is not lost when selections are modified, mouse pointer positions are maintained properly, and I turned off debug mode.
HTML Buttons Version 1.3
I've made a quick clean up because it looked really strange to build an array that way or to have a debug option that includes an alert instead of using a breakpoint and debugging with the console.
The new version is available here: http://www.martinezdelizarrondo.com/ckplugins/htmlbuttons1.4.zip
I still have to find a good example about how to use this functionality because the sample that just wraps the content with a paragraph and a class can be done much better through the Styles system.
I'll try to think about it and add the code to github because it seems that this is what is cool today. If you don't publish your code in github some people think that it's not open source, but once it's there you're free to ignore all the bug reports.
For the life of me I can't get this to work. I am using CKEditor as a Module on a Drupal site. I've followed all of the directions tho and still I can't get my custom buttons to display...
Installing plugins in Drupal seems to be harder than in other environments.
You can try to follow these notes that I wrote down based on some comments, but I've never used Drupal.
http://alfonsoml.blogspot.com.es/2012/12/installing-ckeditor-plugin-inside.html
Post a Comment