Hallo.js jQuery UI_jquery に基づく WYSIWYG Web エディター

まず効果を見てみましょう:

Hallo.js は、jQuery UI に基づくシンプルなリッチ テキスト Web エディターであり、HTML5 contentEditable を使用して WYSIWYG を実現します。目標は、TinyMCE や Aloha Editor などの今日の非常に人気のあるエディターを置き換えることではなく、開発者に、よりシンプルで楽しいユーザー編集エクスペリエンスを提供することです。

Hallo.js は、IKS プロジェクト用に Henri Bergius によって開発されたフリー ソフトウェアであり、CoffeeScript を使用して開発され、MIT ライセンス契約に従い、GitHub でホストされています。

使用方法

1. jQuery、jQuery UI、Rangy ライブラリをプロジェクトに導入する必要があります。

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

エディターのツールバーでは jQuery UI テーマが使用されているため、ニーズに合わせてテーマをカスタマイズすることもできます。ツールバーのアイコンのフォントは Font Awesome に基づいています。デモではスタイル付きツールバーが表示されますが、いくつかの CSS (背景や境界線など) を Hallotoolbar クラスに追加することもできます。

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

Hallo.js の紹介

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

プラグインの呼び出しは非常に簡単です

jQuery('p').hallo();

タグの編集機能をオフにすることもできます

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

Hallo 自体は、選択した DOM 要素を編集可能にすることしかできず、書式設定ツールは提供しません。プラグインを読み込んでHalloを初期化する形式になります。太字や斜体のプラグインなどの単純なものも:

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

この例では、太字や斜体などの機能を提供する単純な書式設定プラグインを作成します。優れたプラグインは必要なだけ用意でき、必要に応じてその中から選択できます。

Hallo にはインスタンス化時に設定できるオプションがさらにあります。ドキュメントの Hallo.coffee ファイルを参照してください。

イベントメソッド

Hallo には、統合と通話を支援するいくつかのイベントがあります。 jQuery バインドを使用してサブスクライブできます:

• halloenabled: 編集可能が有効になったときにトリガーされます (編集可能が true に設定されている)
  
• hallodisabled: 編集可能が無効になっている (編集可能が false に設定されている) 場合にトリガーされます
  
• hallomodified: ユーザーが編集中のコンテンツを変更するたびにトリガーされます。イベント データ キーのコンテンツに HTML
  が含まれています。
• halloactivated: ユーザーが編集可能領域をアクティブ化すると (通常はクリックして) トリガーされます
  
• hallodeactivated: ユーザーが編集可能領域を非アクティブ化するとトリガーされます

プラグイン

• halloformat – 太字、斜体、取り消し線、および下線のサポートをツールバーに追加します (オプションで有効/無効にします: "formattings": {"bold": true, "italic": true, "strikethrough" ”: true、”下線”: false})
  
• halloHeadings – H1、H2、H3 のサポートを追加します。見出しオプション キーを渡して、表示される内容を指定できます (例: “formatBlocks”:[“p”, “h2″, "h3"])
  
• hallojustify – 左揃え、中央揃え、右揃えのサポートを追加します
  
• hallolists – 順序付きリストと順序なしリストのサポートを追加します (オプションで選択: “lists”: {“順序付き”: false, “順序なし”: true})
  
• halloreundo – 元に戻すとやり直しのサポートを追加します
  
• hallolink – 選択範囲にリンクを追加するサポートを追加します (現在機能していません)
  
• halloimage – 画像のアップロード、検索、提案
  
• halloblacklist – コンテンツから不要なタグをフィルタリングします
  

プラグインを作成する

Hallo プラグインは通常の jQuery UI プラグインを作成します。

Hallo がロードされると、ユニットの有効なプラグインもすべてロードされ、追加のオプションがいくつか渡されます:

• 編集可能: メインの Hallo ウィジェット インスタンス
• uuid: Hallo インスタンスの一意の識別子。要素 ID に使用できます
  

単純なプラグインは次のようになります:

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

上記は Hallo.js リッチ テキスト エディターの詳細な紹介です。皆さんの学習に役立つことを願っています。