Hallo.js Web editor WYSIWYG based on the jquery UI _jquery

First look at the effect:

Hallo.js is a simple rich-text web editor based on the jquery UI and utilizes HTML5 's contenteditable to achieve WYSIWYG. The goal is not to replace today's very popular editors, such as TINYMCE or Aloha Editor, but rather to provide a simpler and more enjoyable user-editing experience for developers.

Hallo.js is a free software developed by Henri Bergius for the Iks project, using Coffeescript development, following the MIT license agreement, hosted on GitHub.

How to use

1, you need to bring jquery, jquery UI and rangy library 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 the jquery UI theme, so you might also want to customize a theme that suits your needs. Toolbar icon fonts are based on font Awesome. The Style toolbar appears in the demo and you will also want to add some CSS (such as 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 ">

Introduction of Hallo.js

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

Calling Plug-ins is very simple

JQuery (' P '). Hallo ();

You can also turn off the edit function of the label

JQuery (' P '). Hallo ({editable:false});

Hallo can only make selected DOM elements editable and provide no formatting tools. The format is initialized by loading the plug-in Hallo. Even simple things like bold and italic plugins:

JQuery ('. Editable '). Hallo ({
 plugins: {
  ' Halloformat ': {}}}
);

This example can make a simple format for plug-ins that provide functionality such as bold and italic. You can have a lot of good plugins for you to think about if necessary through their choices.

Hallo has more option settings when instantiated. See document Hallo.coffee file.

Event methods

Hallo has some events that help with consolidation and invocation. You can subscribe to them using jquery bind:

• Halloenabled:triggered when a editable is enabled (editable set to True)
  
• Hallodisabled:triggered when a editable is disabled (editable set to false)
  
• hallomodified:triggered whenever user has changed the contents being. Event Data Key content contains the HTML
  
• halloactivated:triggered when user activates a editable area (usually by clicking it)
  
• hallodeactivated:triggered when user deactivates a editable area

Plug - ins

• 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. Can pass a headings option key to specify what are 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": Tru e})
  
• 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 plugin

The Hallo plug-in writes the regular jquery UI plug-in.

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

• Editable:the Main Hallo Widget instance
• Uuid:unique identifier of the Hallo instance, can is used for element IDs
  

A simple plugin looks like the following:

 # formatting plugin for Hallo # (c) Henri Bergius, IKS Consortium # Hallo
   Reely distributed under the MIT license (jQuery)-> jquery.widget "Iks.halloformat", boldelement:null options:

  UUID: ' editable:null _create:-> # ADD Any actions your want to run on plugin initialization Populatetoolbar: (Toolbar)-> # Create A 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 to used for execcommand and Queryco mmandstate 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 about Hallo.js Rich Text Editor of the detailed introduction, I hope to help you learn.