Switch branches/tags
Nothing to show
Pull request Compare This branch is 18 commits ahead of nunobaldaia:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

HTML5 Editor

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



Include the plugin JavaScript and CSS files and add the plugin to any textarea element(s) on the DOM:

<script src="" 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">

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:

		'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:

  '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:

  '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:

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


Active Admin

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() {  

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' }


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.