User-friendly Web Content Editor With jQuery UI - Hallo

File Size: 144 KB
Views Total: 778
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
User-friendly Web Content Editor With jQuery UI - Hallo

Hallo is a convenient and user-friendly jQuery & jQuery UI plugin which generates floating or fixed text editors using the HTML5 contenteditable element.

How to use it:

1. Load the jQuery and jQuery UI libraries in your html document.

<link rel="stylesheet" href="/path/to/jquery-ui.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Load the Font Awesome for the editor icons.

<link rel="stylesheet" href="">

3. Load the rangy.js range and selection library to make the editor interact with the text selection.

<script src=""></script>

4. Load Hallo's JavaScript and CSS files in the document.

<link rel="stylesheet" href="hallo.css">
<script src="hallo.js"></script>

5. Call the function on the target web content which should be editable.


6. Enable & disable Hallo's plugins.


  plugins: {

    // Enables Bold, Italic, StrikeThrough and Underline support.
    // "formattings": {"bold": true, "italic": true, "strikethrough": true, "underline": false}
    'halloformat': {},

    // Enables H1, H2, H3 support. 
    // "formatBlocks": ["p", "h2","h3"],
    'halloheadings': {},

    // Enables align left, center, right support
    'hallojustify': {},

    // Enables ordered and unordered lists support
    // "lists": {"ordered": false, "unordered": true}
    'hallolists': {},

    // Enables image uploading, searching, suggestions support
    'halloimage ': {},

    // Enables undo and redo support
    'halloreundo': {},

    // Filters unwanted tags from the content
    'halloblacklist': {}


7. Make the editor always be fixed at the top of editable content.

  toolbar: 'halloToolbarFixed'

8. All default plugin options.

  editable: true,
  plugins: {},
  toolbar: 'halloToolbarContextual',
  parentElement: 'body',
  buttonCssClass: null,
  toolbarCssClass: null,
  toolbarPositionAbove: false,
  toolbarOptions: {},
  placeholder: '',
  forceStructured: true,
  checkTouch: true,
  touchScreen: null

9. Events available.

$('.editable').on('hallomodified', function(event, data) {
  // on modified

$('.editable').on('halloselected', function(event, data) {
  // on selected

$('.editable').on('hallounselected', function(event, data) {
  // on unselected

$('.editable').on('hallorestored', function(event, data) {
  // on restored

$('.editable').on('halloactivated', function(event, data) {
  // on activated

$('.editable').on('hallodeactivated', function(event, data) {
  // on deactivated

This awesome jQuery plugin is developed by bergie. For more Advanced Usages, please check the demo page or visit the official website.