Webのテキストエリアの貧弱さには皆が辟易しています。だからこそツールバーを付けたり、中でHTMLが使えるようなWYSIWYGエディタに人気が集まります。しかしそうしたソフトウェアは柔軟性が高くなく、自分好みにならないケースもあるでしょう。 そこで紹介したいのがQuillです。リッチなテキストエディタとAPIというのが売りの柔軟なカスタマイズ性が売りのWYSIWYGエディタです。

Quillの使い方

こちらがサンプルです。テキストエリア内でHTMLが表示されています。

コードは次のようになります。

var basicEditor = new Quill('#basic-editor');
basicEditor.addModule('toolbar', {
  container: '#basic-toolbar'
});

ツールバーはモジュールとして追加するイメージです。

全部載せ。文字の背景色を変更することもできます。

リンクはこんな感じにインラインで変更します。アラートで入力しないのが良いかも!

文字色の選択はパレット風UIで。

リンクはフローティング表示。ここがGoogleドキュメント風で良いですよね。

APIはテキストエリア内の文字をテキストやHTMLでの取得に加えて、文字の追加や削除をしたり、フォーカスの変更もできます。ツールバーの各機能もAPIを叩いているので外部から文字装飾を実装するのも簡単です。

動作も軽量でアイコンを使ったりカスタマイズする要素が大きいそうです。ユーザにHTMLコンテンツを入力してもらう際に使ってみると良さそうです。

QuillはJavaScript製、BSD Licenseのオープンソース・ソフトウェアです。

Quill - An Open Source Rich Text Editor with an API quilljs/quill