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="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.3.0/rangy-core.min.js"></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.

$('selector').hallo();

6. Enable & disable Hallo's plugins.

$('selector').hallo({

  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.

$('selector').hallo({
  toolbar: 'halloToolbarFixed'
});

8. All default plugin options.

$('selector').hallo({
  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.