CKEditor と TinyMCE はどちらも 10 年以上前から広く使用されています。 Quill は、これらの従来のエディターとは異なるいくつかの新しいアイデアを導入しています。
治療しますcontenteditable完全なエディターや API ではなく、入力として。ブラウザーは、完全な範囲について完全に合意したり、指定したりすることはありませんでした。contenteditable。独自の解釈に任され、それぞれが独自の癖とバグの急増を特徴とする異なる実装で終了し、収益を上げました。contenteditable悪名に値する。現在でも、次を使用してブラウザ全体をクラッシュさせる可能性があります。contenteditableAPI。
DOM 上に実質的な API を提供します。 CKEditor と TinyMCE の API のほとんどは、既存の DOM API に加えて糖衣構文を提供するだけです。 Quill は内部ドキュメント モデルを維持し、信頼できる情報源として DOM に依存しないため、テキスト編集のためのはるかに強力で関連性の高い API を提供できます。
フォーマットやコンテンツのカスタマイズや新規追加が可能です。 Quill は紙だけでなくウェブもターゲットの出力と考えています。したがって、Quill では、ワード プロセッサで一般的に見られる従来の形式 (太字、斜体、リストなど) をサポートするだけでなく、これまで想像できなかったまったく新しい形式やコンテンツを定義できます。 Quill のユーザーはすでに、スライドデッキ、インタラクティブなチェックリスト、3D モデルを埋め込むためのカスタマイズを追加しています。
両者には違いがありますが、CKEditor と TinyMCE は Quill と同様の点で異なるため、一緒に比較されます。それでも、次の場合には CKEditor または TinyMCE の方が良い選択となる可能性があります。
非常に古いブラウザをサポートする必要があります。 Quill は、各主要ブラウザの最新 2 つのバージョンをサポートするという他の多くの Javascript ライブラリのポリシーに従います。
任意の HTML を使用して、基になる HTML を直接設定または編集する必要があります。 Quill は、コンテンツに対する任意の変更をサポートしていません。innerHTMLそれは驚くべきバグのある動作につながるからです。代わりに、一貫したAPI変更が可能であり、新しいフォーマットやコンテンツを定義する機能も備えています。羊皮紙。
Draft は Quill とよく比較されますが、Draft 自体の説明によると、「React 用のリッチ テキスト エディター フレームワーク」です。これはエディタを作成するための構成要素を提供しますが、それ自体ですぐに使用できるものではありません。しかし、それでも Quill の内部を Draft と比較する価値はあります。
Quill 1.0 より前の Draft では、コンテンツとドキュメント モデルをさらにカスタマイズできましたが、現在はそうではありません。 Quill は現在、そのドキュメント モデルと呼ばれるモデルを公開しています。羊皮紙であり、現時点ではドラフトよりもさらに深いレベルまでカスタマイズできます。羊皮紙を使ったクローニング培地これは、Parchment で何が可能であるかを示す優れたデモンストレーションです。
ドラフトでは、ノードがブロックとインラインの 2 つのレベルに編成されます。 Parchment にもブロック層とインライン層がありますが、インライン ノードはネストでき、次のようなセマンティック出力が可能になります。<strong><em>Stronger</em></strong>一方、ドラフトの同等のものは、インライン形式ノードを 1 つだけ使用し、インライン スタイルを使用する必要があります。
<span data-offset-key="1oo4h-0-0" style="font-weight: bold; font-style: italic;">
<span data-text="true">Stronger</span>
</span>
Draft の API は、一般的な Web サイトにより適したプリミティブとアイデアを React から継承しています。 Quill の唯一の使用例は、その使用例に特化したよりシンプルな API を可能にするリッチ テキスト コンテンツです。 API の単純さは主観的なものであるため、テキスト範囲を太字にするなどの一般的なタスクを考えて、それを Quill で行う方法と Draft で行う方法を理解してみることが最適な指標となるでしょう。
React、React DOM、immutable.js は Draft の依存関係であり、まだ React を使用していないユーザーにとっては大きな負担となります。
主な違いは、依然として Quill がすぐに使用できるリッチ テキスト エディターであり、ユーザー インタラクションが考慮され、インターフェイスが考え抜かれて実装されていることです。ドラフトでは構成要素が提供されますが、データ層より上のすべての部分を自分で実装する必要があります。
ProseMirror は比較的新しいものですが、CodeMirror と同じ作者によって構築されており、すでに大きな注目を集めています。とはいえ、README に記載されているように、ProseMirror はまだ開発段階にあるため、製品と実装をしっかりと比較するのは時期尚早です。
注: このプロジェクトはベータ段階にあります。完全にテストされていないため、API は 0.x リリース間で変更される可能性があります。使用しても構いませんが、まだそれほど安定しているとは期待しないでください。
代わりに、アイデアと目標を比較します。
Quill と ProseMirror はどちらも、ユーザーが DOM を直接変更できるようにするのではなく、API を使用して操作するデータ モデルを実装および維持します。
リアルタイムのコラボレーションをサポートします。 Quill ユーザーはすでに実稼働環境でそうしています。
Quill のアーキテクチャはよりモジュール化されており、内部のカスタマイズが容易になります。コピー/ペーストや元に戻す/やり直しなどの基本的な機能を処理するコア モジュールは、Quill で交換できます。
ProseMirror は、API メソッド、構成、変数を幅広く公開することを好みます。 Quill は開発者をユーザーとして扱い、何を公開するかを慎重に検討しながら、時には混乱を招くメソッドを隠したり、複数の内部操作を統合する新しいメソッドを作成したりして、整理された API サーフェスを設計します。
Trix も新しくリリースされたエディタで、リッチ テキスト編集に多くの最新のアイデアを採用しています。これには、DOM 上のデータ モデルと処理が含まれます。contenteditableQuill や他の現代の編集者もこれを取り入れています。さらに、Quill には Trix に比べていくつかの重要な利点があります。
もっとフォーマットサポート。 Quill は Trix にあるすべての形式をサポートし、Trix ではサポートされていないテキストの色、フォント、背景、サイズ、上付き文字、下付き文字、下線、テキストの配置、テキストの方向、構文強調表示されたコード、ビデオ、および数式もサポートします。
既存の形式やコンテンツをカスタマイズしたり、新しい形式やコンテンツを追加したりできます。 Trix は各形式を 1 つの方法で実装し、それ以上のカスタマイズは許可しません。
内部はモジュール化されており、構成したり交換したりすることもできます。 Trix はモノリスとして設計されています。
Trix は 1 つの UI を提供しますが、ユーザーはおそらくカスタム CSS で磨きをかける必要があります。 Quill は、すぐに使用できる 2 つの美しいテーマを提供します。1 つは永続的なテーマを中心としています。ツールバーもう1つはミディアムのようなものですツールチップのテーマ。