Floating-Tools is a smart addition to CKEditor that gives your users a floating toolbar whenever they select some text!
Description
A very effective and intuitive way to make text-formating tasks (and a lot of other things) easier!
Every time you select some text there is a toolbar displayed. Right there, at your mouse-cursor. The toolbar is smart enough to always keep your selected text visible. Yes, it loves to help you and never wants to distract you. If it still does not behave in some situation, then please let me know. I will have a word with it...
Oh, and you should also check out the live-demo at the bottom of this page! Its really cool to see the toolbar in action ;-)
Installation
Using this plugin is very easy! It just takes two simple steps:
1) First you need to download the plugin-code and save it to your ckeditor/plugin directory.
2) To fianlly use the plugin you only need to add a new setting to your existing CKEditor initialitation:
CKEDITOR.replace( 'editor', {extraPlugins: 'floating-tools'});Configuration
When you simply follow the above steps to use the floating-tools plugin you will see the default toolbar as pictured in the image in the top. It contains the tools: Change font, Change size, Bold, Italic, Centre text, Outdent, Indent, Numbered list, Bullet list.
However, you can define your own toolbar configuration to display other buttons or even display two button-rows (or more...) The configuration is identical to the configuration-options of the native CKEditor toolbar.
For example add the following configuration to create the displayed toolbar:
CKEDITOR.config.floatingtools = 'Basic';
CKEDITOR.config.floatingtools_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link']
];Additional notes
The floating toolbar actually uses the same setup and functions as the native CKEditor toolbar. So all the buttons that are available on the main toolbar can also be used inside the floating toolbar. There is no language, no images, no CSS that comes with the plugin - the floating toolbar uses same look-and-feel as your current CKEditor theme.
Also note, that the toolbar is only displayed when text is selected using the mouse, as the toolbar-buttons can be accessed only via mouse. On any keypress the toolbar is hidden again.
Live demo
Download this example project as .zip archive!
Like it?
I offer this plugin free for anybody - to use in private or commercial projects. But still I spent a lot of time to research, code, test, improve, document and publish this plugin. When you find that my contribution is useful for you, then I am more than grateful when you also show me :-)
Just try it, and see how happy you will make me!
I am also very fond of chocolate, thank-you cards, flowsers, ... or a short email telling me where you use the plugin. Or any other feedback.
Tweet