テキストエディタ比較（前編）react-quill/Editor.js

react-quillとEditor.jsを中心に、テキストエディタライブラリの特徴・利点・懸念点を比較。選定のポイントを詳しく解説！

以前、ノート共有型SNSの投稿フォーム実装についてご紹介という記事でreact-quillのことについて紹介させていただきました。今回は、Reactに対応している複数のテキストエディタライブラリがあった中で、どのように比較検討しQuillを選定することになったのか書いていきたいと思います。

比較したテキストエディタライブラリ

比較項目

react-quill

データ構造

Delta形式

{
  ops: [
    { insert: 'Gandalf', attributes: { bold: true } },
    { insert: ' the ' },
    { insert: 'Grey', attributes: { color: '#cccccc' } }
  ]
}

利点

懸念点

Editor.js

データ構造

BlockとInlineという概念があり、Block単位でオブジェクトが管理される。

{
   "time": 1550476186479,
   "blocks": [
      {
         "type": "header",
         "data": {
            "text": "Editor.js",
            "level": 2
         }
      },
      {
         "type": "paragraph",
         "data": {
            "text": "Hey. Meet the new Editor. On this page you can see it in action — try to edit this text. Source code of the page contains the example of connection and configuration."
         }
      },
      {
         "type": "header",
         "data": {
            "text": "Key features",
            "level": 3
         }
      },
      {
         "type": "list",
         "data": {
            "style": "unordered",
            "items": [
               "It is a block-styled editor",
               "It returns clean data output in JSON",
               "Designed to be extendable and pluggable with a simple API"
            ]
         }
      }
   ],
   "version": "2.8.1"
}

太字やハイパーリンク,文字の色・背景色はInlineで定義され、HTMLタグで表現される。

{
    "type" : "list",
    "data" : {
    "style" : "unordered",
    "items" : [
    "Hey. <b>Meet</b> the new Editor. On this page you can see it in action — try to edit this text."
        ]
    }
}

対応形式

公式で用意されているスタイルは以下の通りです。自作したスタイルを設定することも可能。

Block

Inline

利点

懸念点

その2へ