Hallo.js Éditeur web WYSIWYG basé sur jQuery UI_jquery

Jetons d'abord un coup d'œil à l'effet :

Hallo.js est un simple éditeur Web de texte enrichi basé sur l'interface utilisateur jQuery et utilise du contenu HTML5 modifiable pour réaliser le WYSIWYG. L'objectif n'est pas de remplacer les éditeurs très populaires d'aujourd'hui tels que TinyMCE ou Aloha Editor, mais d'offrir aux développeurs une expérience d'édition utilisateur plus simple et plus agréable.

Hallo.js est un logiciel libre développé par Henri Bergius pour le projet IKS. Il est développé avec CoffeeScript, suit l'accord de licence MIT et est hébergé sur GitHub.

Comment utiliser

1. Vous devez introduire les bibliothèques jQuery, jQuery UI et Rangy dans votre projet :

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

La barre d'outils de l'éditeur utilise des thèmes jQuery UI, vous pouvez donc également personnaliser un thème en fonction de vos besoins. La police des icônes de la barre d'outils est basée sur Font Awesome. La barre d'outils stylisée apparaît dans la démo, vous souhaiterez également ajouter du CSS (comme l'arrière-plan et les bordures) à la classe hallotoolbar.

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

Présentation de Hallo.js

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

Appeler le plug-in est très simple

jQuery('p').hallo();

Vous pouvez également désactiver la fonction d'édition des balises

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

Hallo lui-même ne peut rendre modifiables que les éléments DOM sélectionnés et ne fournit aucun outil de formatage. Le format est d'initialiser Hallo en chargeant le plug-in. Même des choses simples comme les plugins gras et italique :

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

Cet exemple crée un plugin de formatage simple qui fournit des fonctionnalités telles que le gras et l'italique. Vous pouvez avoir autant de bons plugins que vous le souhaitez et choisir parmi eux si nécessaire.

Hallo a plus d'options à définir lors de l'instanciation. Voir la documentation du fichier hallo.coffee.

Méthode événementielle

Hallo propose quelques événements pour aider à l'intégration et aux appels. Vous pouvez vous y abonner en utilisant jQuery bind :

• halloenabled : déclenché lorsqu'un élément modifiable est activé (modifiable défini sur true)
  
• hallodisabled : Déclenché lorsqu'un modifiable est désactivé (modifiable défini sur false)
  
• hallomodifié : déclenché chaque fois que l'utilisateur a modifié le contenu en cours de modification. Le contenu de la clé de données d'événement contient le HTML
  .
• halloactivated : Déclenché lorsque l'utilisateur active une zone modifiable (généralement en cliquant dessus)
  
• hallodeactivated : déclenché lorsque l'utilisateur désactive une zone modifiable

Plugin

• halloformat – Ajoute la prise en charge des caractères gras, italique, barré et souligné à la barre d'outils (Activer/Désactiver avec les options : "formatages" : {"gras" : vrai, "italique" : vrai, "barré). » : vrai, « souligner » : faux})
  
• halloheadings – Ajoute la prise en charge de H1, H2, H3 Vous pouvez passer une touche d'option de titres pour spécifier ce qui va être affiché (par exemple « formatBlocks » :[« p », « h2″, "h3"])
  
• hallojustify – Ajoute un support d'alignement à gauche, au centre et à droite
  
• hallolists – Ajoute la prise en charge des listes ordonnées et non ordonnées (Choisissez avec des options : « listes » : {« ordonnée » : false, « non ordonné » : true})
  
• halloreundo – Ajoute la prise en charge de l'annulation et du rétablissement
  
• hallolink – Ajoute la prise en charge pour ajouter des liens à une sélection (ne fonctionne actuellement pas)
  
• halloimage – Téléchargement d'images, recherche, suggestions
  
• halloblacklist – Filtrage des balises indésirables du contenu
  

Écrire un plug-in

Le plug-in Hallo est utilisé pour écrire des plug-ins jQuery UI classiques.

Lorsque Hallo se charge, il charge également tous les plugins activés de l'unité et leur transmet quelques options supplémentaires :

• modifiable : l'instance principale du widget Hallo
• uuid : identifiant unique de l'instance Hallo, peut être utilisé pour les ID d'éléments
  

Un plugin simple ressemble à ceci :

#  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)

Ce qui précède est une introduction détaillée à l'éditeur de texte riche Hallo.js. J'espère qu'il sera utile à l'apprentissage de chacun.