Skip to content
Simple rich text editor (contentEditable) for jQuery UI
CoffeeScript JavaScript CSS HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.
design Add the new Hallo logo Nov 12, 2012
dist Switch to bower-installed dependencies Jan 21, 2015
examples Switch to bower-installed dependencies Jan 21, 2015
src Fix indent Dec 5, 2016
test Switch to bower-installed dependencies Jan 21, 2015
.gitignore Move deps to Bower Sep 10, 2013
.travis.yml Set up Travis autopublish Dec 5, 2016 Switch to bower-installed dependencies Jan 21, 2015 Ignore line lengths Dec 5, 2016
LICENSE Add license file, fixes #155 May 6, 2013 Move badges May 4, 2017
bower.json Remove moot `version` property from bower.json Jun 12, 2015
package.json chore(package): update grunt-contrib-uglify to version 3.1.0 Sep 11, 2017

Hallo - contentEditable for jQuery UI Build Status Greenkeeper badge

Hallo Editor logo

Cross-browser testing status

Hallo is a very simple in-place rich text editor for web pages. It uses jQuery UI and the HTML5 contentEditable functionality to edit web content.

The widget has been written as a simple and liberally licensed editor. It doesn't aim to replace popular editors like Aloha, but instead to provide a simpler and more reusable option.

Read the introductory blog post for more information.

Using the editor

You need jQuery, jQuery UI (1.10+), and Rangy loaded. An easy way to do this is to use Google's JS service:

<script src=""></script>
<script src=""></script>
<script src=""></script>

The editor toolbar is using jQuery UI theming, so you'll probably also want to grab a theme that fits your needs. Toolbar pluggins use icons from Font Awesome. Check these integration instructions for the right way to include Font Awesome depending on if/how you use Twitter Bootstrap. To style the toolbar as it appears in the demo, you'll also want to add some CSS (like background and border) to the class hallotoolbar.

<link rel="stylesheet" href="/path/to/your/jquery-ui.css">
<link rel="stylesheet" href="/path/to/your/font-awesome.css">

Then include Hallo itself:

<script src="hallo.js"></script>

Editor activation is easy:


You can also deactivate the editor:

jQuery('p').hallo({editable: false});

Hallo itself only makes the selected DOM elements editable and doesn't provide any formatting tools. Formatting is accomplished by loading plugins when initializing Hallo. Even simple things like bold and italic are plugins:

  plugins: {
    'halloformat': {}

This example would enable the simple formatting plugin that provides functionality like bold and italic. You can include as many Hallo plugins as you want, and if necessary pass them options.

Hallo has got more options you set when instantiating. See the file for further documentation.


Hallo provides some events that are useful for integration. You can use jQuery bind to subscribe to them:

  • halloenabled: Triggered when an editable is enabled (editable set to true)
  • hallodisabled: Triggered when an editable is disabled (editable set to false)
  • hallomodified: Triggered whenever user has changed the contents being edited. Event data key content contains the HTML
  • halloactivated: Triggered when user activates an editable area (usually by clicking it)
  • hallodeactivated: Triggered when user deactivates an editable area


  • halloformat - Adds Bold, Italic, StrikeThrough and Underline support to the toolbar. (Enable/Disable with options: "formattings": {"bold": true, "italic": true, "strikethrough": true, "underline": false})
  • halloheadings - Adds support for H1, H2, H3. You can pass a headings option key to specify what is going to be displayed (e.g. "formatBlocks":["p", "h2","h3"])
  • hallojustify - Adds align left, center, right support
  • hallolists - Adds support for ordered and unordered lists (Pick with options: "lists": {"ordered": false, "unordered": true})
  • halloreundo - Adds support for undo and redo
  • hallolink - Adds support to add links to a selection (currently not working)
  • halloimage - Image uploading, searching, suggestions
  • halloblacklist - Filtering unwanted tags from the content


Hallo is free software available under the MIT license.


Hallo is written in CoffeeScript, a simple language that compiles into JavaScript. You'll need Node.js to to build it. All build dependencies can be installed with:

$ npm install

To generate the JavaScript code to dist/hallo.js from Hallo sources, run Grunt:

$ grunt build

Hallo development is coordinated using Git. Just fork the Hallo repository on GitHub and send pull requests.

Unit tests

We use the Travis continuous integration service for testing Hallo. Currently we run two types of tests:

You can run the unit tests locally by opening test/index.html in your browser, or with PhantomJS by running:

$ grunt test


$ npm test

Writing plugins

Hallo plugins are written as regular jQuery UI widgets.

When Hallo is loaded it will also load all the enabled plugins for the element, and pass them some additional options:

  • editable: The main Hallo widget instance
  • uuid: unique identifier of the Hallo instance, can be used for element IDs

A simplistic plugin would look like the following:

#    Formatting plugin for Hallo
#    (c) 2011 Henri Bergius, IKS Consortium
#    Hallo may be freely distributed under the MIT license
((jQuery) ->
  jQuery.widget "IKS.halloformat",
    boldElement: null

      uuid: ''
      editable: null

    _create: ->
      # Add any actions you want to run on plugin initialization
      # here

    populateToolbar: (toolbar) ->
      # Create an element for holding the button
      @boldElement = jQuery '<span></span>'

      # Use Hallo Button
        uuid: @options.uuid
        editable: @options.editable
        label: 'Bold'
        # Icons come from Font Awesome
        icon: 'icon-bold'
        # Commands are used for execCommand and queryCommandState
        command: 'bold'

      # Append the button to toolbar
      toolbar.append @boldElement

    cleanupContentClone: (element) ->
      # Perform content clean-ups before HTML is sent out

You can’t perform that action at this time.