ブログ - JavaScript

一般的なWYSIWYGエディターにはスタイルを調整するための、ボタンがデフォルトで付いていて、文章の中の文字サイズや色などを自由に変更できてしまいます。またリストやテーブルなどのインライン以外のタグも挿入できてしまうため、余計な空白が発生したりして、デザインの統一性が損なわれることがありました。
そのためルールが徹底されていないと、記事の編集者によって全く異なったテイストの記事ができあがってしまうこともあります。そこで今回弊社が開発したJavaScriptライブラリが、 Lite Editor です。Lite EditorはブロックタイプのCMS向けに開発されたWYSIWYGでインライン要素のタグ挿入に特化しています。
a-blog cmsでは、エントリー(記事)の編集画面で、ユニットと呼ばれるブロックと組み合わせて利用されています。


a-blog cmsでの利用例

例えば上の画像で出力されるHTMLはa-blog cmsのエントリー編集画面の場合以下のようになります。

<h2>画像と見出しのレイアウト例</h2>
<p>ここは本文テキストが入る部分です。以下、サンプルテキストです。せっかくWebサイトを作っても、新しい情報が載せられないから、載ってる情報が古くなってしまう。更新する技術が無かったり、よく分からない、なんてことはありませんか?
<a href="https://www.a-blogcms.jp">a-blog cms</a>を使えば、ブログを書くように、いつも使っているWebブラウザから更新ができます。Webの専門の技術や知識が無くても、どんどん新しい情報をあなたのWebサイトに載せられます。</p>

https://appleple.github.io/lite-editor/では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説します。

  1. デモ
  2. 特徴
  3. 使い方
  4. カスタムボタンの追加
  5. イベント
  6. メソッド
  7. ダウンロード
  8. リンク

デモ

See the Pen Lite Editor - demo by appleple (@appleple) on CodePen.

特徴

  • 意図しないタグ挿入防止
  • 開業時の処理
  • カスタムボタンの設置
  • ボタングループの設定

意図しないタグ挿入防止

Lite Editorではデフォルトで用意されている要素が、aタグ、strongタグ、iタグ、uタグのため、ユーザーが意図しないコードを挿入するという問題が回避できます。もちろんカスタマイズ次第で、デフォルト以外のタグを挿入するためのボタンを用意することも可能です。

改行時の処理

また、WYSIWYGによっては、改行時に挿入されるコードが、IEではpタグ、chromeではdivタグなどブラウザによって異なることがあるのですが、Lite Editorを使うと、使用しているブラウザに関わらず、brタグもしくは改行コードを挿入するといった処理を自動で行ってくれます。

カスタムボタンの設定

また下記のようなコードを書くだけでオリジナルのボタンを簡単に設置できます。下のソースコードでは、blueと書かれたボタンをクリックすると、classNameにblueが設定されたspanタグが挿入されます。

editor.registerButton({
  label: 'blue',
  tag: 'span',
  className: 'blue',
  group: 'mark'    
});

使い方

CSS及びJavaScriptの読み込み

<link rel="stylesheet" href="./css/lite-editor.min.css">
<script src="./js/lite-editor.min.js"></script>

CDNを使った読み込み

<script src="https://unpkg.com/lite-editor@1.4.0/js/lite-editor.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/lite-editor@1.4.0/css/lite-editor.css">

HTMLの記述

<textarea class="js-editor">
ここにコンテンツが入ります。
</textarea>

JavaScriptの記述

window.addEventListener('DOMContentLoaded',function(){
    new LiteEditor(".js-editor");
});

カスタムボタンの追加

下のソースコードで簡単に新たなボタンを追加できます。

var editor = new LiteEditor(".js-editor");
editor.registerButton({
  label: 'blue',
  tag: 'span',
  className: 'blue',
  group: 'mark'    
});

ボタンが押されたときにタグを挿入する代わりに独自処理を挟みたい場合は、以下のようにactionにextraを指定し、onClick処理を記述します。

editor.registerButton({
  label: 'custom',
  group: 'mark',
  action: 'extra',
  onClick: function (editor) {
      // ここに処理が入ります。
  }   
});

また初期状態の時点で表示されるボタン類を調整したいのであれば、以下のようにコンストラクターの引数としてbtnOptionsという配列を渡してあげれば、ごそっとデフォルトのボタンが置き替わります。

var btnOptions = [
    {
      label: '<i class="fa fa-link"></i>',
      tag: 'a',
      className: '',
      group: 'mark'
    },
    {
      label: '<i class="fa fa-bold"></i>',
      tag: 'strong',
      className: '',
      group: 'mark'
    },
    {
      label: '<i class="fa fa-italic"></i>',
      tag: 'i',
      className: '',
      group: 'mark'
    },
    {
      label: 'red',
      tag: 'span',
      className: 'red',
      group: 'mark'
    }
];

var editor = new LiteEditor('.js-lite-editor', {
    btnOptions: btnOptions
});

イベント

LiteEditor.js ではタグ挿入時などに挟み込み処理をするためのイベントリスナーが用意されています。onメソッドで幾つでも登録可能です。

// エディターのHTMLの再構築後
editor.on('render', function() {
    /* ここに処理が入ります。 */
});
// エディターのHTMLの再構築前
editor.on('prerender', function() {
   /* ここに処理が入ります。 */
});
// タグが挿入されたとき
editor.on('insertTag', function() {
    /* ここに処理が入ります。 */
});
// タグ解除時
editor.on('unwrapTag', function() {
    /* ここに処理が入ります。 */
});
// redo時
editor.on('redo', function() {
    /* ここに処理が入ります。 */
});
// undo時
editor.on('undo', function() {
    /* ここに処理が入ります。 */
});
// 貼り付け時
editor.on('paste', function() {
    /* ここに処理が入ります。 */
});

メソッド

また、外部からLite Editorを操作したい場合を考慮していくつかのメソッドをインスタンスから呼び出し可能にしています。

editor.registerButton(btnOption)

エディターにカスタムボタンを追加します。

editor. saveSelection()

現在のカーソルの選択領域を保存します。

editor.restoreSelection ()

保存しておいた選択領域を復元します。

editor.insertTag (tag, className, sampleText)

選択領域にタグを挿入します。

editor.undo();

エディターの状態を一つ前に戻します。

editor.redo();

エディターの状態を戻していた場合、その状態を一つ先に戻します。

ダウンロード

ダウンロードはこちらから行えます。
ダウンロード

もしくは、npm、yarnを使ったインストールが可能です。

npm install lite-editor --save
yarn add lite-editor

npmでのインストール後は、BrowserifyやWebpackなどのbundleツールを使ったrequireも可能です。

const LiteEditor = require('lite-editor');

Babelをお使いの方はimportもご利用いただけます。

import LiteEditor from 'lite-editor';

リンク

appleple.github.io/lite-editor


github.com/appleple/lookforward



お電話でのお問い合せはこちら(10時〜19時)

052-485-8577