Fork of the HTML5 Editor made by Nuno Baldaia to add some options for the toolbar.
HTML5 Editor is a jQuery plugin that transforms any textarea
into a WYSIWYG editor. It is simply based on the HTML5's contenteditable
attribute, a tiny layer of JavaScript and CSS. As such, it is NOT COMPATIBLE WITH OLDER BROWSERS!!
http://nilsine.fr/html5_editor/demo/demo.html
Include the plugin JavaScript and CSS files and add the plugin to any textarea
element(s) on the DOM:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.html5_editor.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$('textarea').html5_editor();
});
</script>
The plugin will replace each textarea by a contenteditable
based editor counterpart. The textareas will just be hidden and the plugin will read/write the contents from/to them so, you don't need to change anything on your original forms.
You may choose which toolbar items to include:
$('textarea').html5_editor({
'toolbar-items': [
[
['h1', 'H1', 'Heading 1'],
['h2', 'H2', 'Heading 2'],
['h3', 'H3', 'Heading 3'],
['h4', 'H4', 'Heading 4'],
['h5', 'H5', 'Heading 5'],
['p', '¶', 'Paragraph'],
['blockquote', '❝', 'Blockquote'],
['code', 'Code', 'Code']
],
[
['ul', '• list', 'Unordered list'],
['ol', '1. list', 'Ordered list']
],
[
['link', 'Link', 'Insert Link'],
['image', 'Image', 'Insert Image'],
['video', 'Video', 'Insert Video']
],
[
['bold', 'B', 'Bold'],
['italic', 'I', 'Italicize'],
['underline', 'U', 'Underline'],
['strike', 'Abc', 'Strikethrough'],
['sup', 'X<sup>2</sup>', 'Superscript'],
['sub', 'X<sub>2</sub>', 'Subscript'],
['remove', '⌫', 'Remove Formating']
]
]
});
Auto fix toolbar
The toolbar will be fixed on the top of the bowser window when the editor scrolls out by default.
To disable this behavior set the fix-toolbar-on-top
option to false
:
$('textarea').html5_editor({
'fix-toolbar-on-top': false
});
Left toolbar
The toolbar is on top by default, to put it on the left set the left-toolbar
option to true
:
$('textarea').html5_editor({
'left-toolbar': true
});
Auto-hide toolbar
To make the toolbar hidden by default and show it when user click the editor, set the auto-hide-toolbar
option to true
:
$('textarea').html5_editor({
'auto-hide-toolbar': true
});
Custom function
You can add your custom functions in the toolbar by adding a function in the fourth parameter in the toolbar items array lines:
[...]
['underline', 'U', 'Underline'],
['remove', '⌫', 'Remove Formating'],
['custom', 'Cust', 'Custom function', function() { alert('My custom function'); }]
[...]
This editor was originally developed as an editor to the Active Admin Rails plugin. As such, its integration on Active Admin is seamless:
On active_admin.js
:
//= require jquery
//= require jquery.html5_editor
$(function() {
$(".html5-editor").html5_editor();
});
On active_admin.css.scss
:
@import "jquery.html5_editor";
@import "jquery.html5_editor.activeadmin"; /* Active Admin dedicated styles */
On app/admin/posts.rb
ActiveAdmin.register Post do
form do |f|
f.inputs do
f.input :body, :as => :text, :input_html => { :class => 'html5-editor' }
end
end
end
This editor is on its most raw state, and needs to be improved.
HTML5 Editor is Copyright © 2012 Nuno Baldaia. It is free software, and may be redistributed under the terms specified in the LICENSE file.