Hallo.js WYSIWYG web editor based on jQuery UI_jquery

Let’s take a look at the effect first:

Hallo.js is a simple rich text web editor based on jQuery UI and uses HTML5 contentEditable to achieve WYSIWYG. The goal is not to replace today's very popular editors such as TinyMCE or Aloha Editor, but to provide developers with a simpler and more enjoyable user editing experience.

Hallo.js is a free software developed by Henri Bergius for the IKS project. It is developed using CoffeeScript, follows the MIT license agreement, and is hosted on GitHub.

How to use

1. You need to introduce jQuery, jQuery UI and Rangy libraries into your project:

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/rangy-core.js"></script>

The editor toolbar uses jQuery UI themes, so you may also want to customize a theme to suit your needs. The toolbar icon font is based on Font Awesome. Styled toolbar appears in the demo, you will also want to add some CSS (such as background and borders) to the class hallotoolbar.

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

Introducing Hallo.js

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

Calling the plug-in is very simple

jQuery('p').hallo();

You can also turn off the editing function of tags

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

Hallo itself can only make selected DOM elements editable and does not provide any formatting tools. The format is to initialize Hallo by loading the plug-in. Even simple things like bold and italics plugins:

jQuery('.editable').hallo({
 plugins: {
  'halloformat': {}
 }
});

This example makes a simple formatting plugin that provides features like bold and italics. You can have as many good plugins as you want and choose from them if necessary.

Hallo has more options to set when instantiated. See the documentation hallo.coffee file.

Event method

Hallo has some events to help with integration and calling. You can subscribe to them using jQuery bind:

• 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

Plugin

• 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
  

Write a plug-in

The Hallo plug-in is used to write regular jQuery UI plug-ins.

When Hallo loads it also loads all enabled plugins of the unit and passes them some additional options:

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

A simple plugin looks 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

  options:
   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
   @boldElement.hallobutton
    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

)(jQuery)

The above is a detailed introduction to the Hallo.js rich text editor. I hope it will be helpful to everyone's learning.