Quill

Quillは柔軟性と拡張性を重視したクロスプラットフォーム対応のシンプルなオープンソースWYSIWYGエディターです。小規模プロジェクトから大規模なアプリ等まで対応可能、ニーズに合わせてカスタマイズできるシンプルなAPIを提供する開発者に優しい設計となっています。

従来のリッチテキストエディターとは大きく異なるアプローチとなっていて、API主導の設計となっており、現代社会に合わせてWeb上でレンダリングする事を中心に考えられています。そのため、例えば対応メディアにほぼ制限が無く、embedなスライドやインタラクティブなチェックリスト、3Dモデルなどどんな表現も可能にします。

また、モジュールの追加で容易にカスタマイズ出来るようになっており、自身で作る事でコンテンツに合わせたオリジナルのエディターも開発できるようになっています。UIもシンプルで分かりやすく、さまざまなデバイスで同等の感覚で使える様デザインされています。

Demo

<!-- Main Quill library -->
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet">

<div id="editor">
  <h2>Demo Content</h2>
  <p>Preset build with <code>snow</code> theme, and some common formats.</p>
</div>

<script>
  const quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

👆 CDNも用意されているので気軽にテストや導入が出来ます。

開発もコミュニティも活発でGithubでのStarもかなり付いているみたいで注目度も高そうですね。OSSのリッチテキストエディターで今一番盛況な印象です。

ドキュメントも豊富なのでぜひ触ってみてください。ライセンスはBSD-3との事です。

QuillGithub

QuillをAPI主導とした理由

従来のリッチテキストエディターは、基本的にはユーザーのテキスト入力をアシストするのが役割として構築されてきましたが、当然ながらエディターはユーザーがどういったテキストを書いているか把握出来ておらず、DOMを通じてコンテンツを把握します。

DOMは不均衡なツリーに構成されたノードで構成されている反面、ユーザーが書くのは行、単語、テキストで構成されているため、いわゆるインピーダンスの不一致が生じてしまいます。文字を測定単位とするDOM APIは無い為、この制限によって従来のリッチテキストエディターで編集エクスペリエンスを構築するのには限度があり、誰もがイライラした経験があると思います。

Quillは編集と文字を重視した設計となっており、自然テキスト中心のユニットの上にAPIを構築されているため、getFormatを呼び出すだけでHTMLやDOMツリーの差分を調べる必要が無いそうです。コンテンツ、変更、イベントにきめ細かくアクセスでき、入力と出力の両方でJSONを使用して変更を報告、エディターとして機能させている、との事です。

この新しいアプローチを取る事で、従来のリッチテキストエディターの制限から脱却し、より柔軟でより拡張性の高いエディターを開発者が構築出来るようになっているのだそうです。