tiptap - Vue.js向けのリッチなWYSIWYGエディタ
WYSIWYGなエディタは開発者ではない人たちにコンテンツを作ってもらいたい時に活躍します。HTMLを手書きするのは困難ですし、編集している内容と結果が異なるので、結果を想像しながら作るのは慣れない人にとっては難しいでしょう。 もしVue.jsを使っているならば導入したいWYSIWYGエディタがtiptapになります。多機能で使い勝手が良さそうなエディタです。
tiptapの使い方
通常の表示です。上にツールバーがある一般的なWYSIWYGエディタです。
文字を選択してフローティングメニューを出す機能もあります。
新しい行に入ったタイミングでツールバーを下に表示させます。
画像の挿入。ドラッグ&ドロップでできます。
文字列を選択した時にツールバーを出します。普段は隠れています。
Todoリスト。
Twitterのような @ でメンション相手を出す機能。
Markdown記法をビジュアル化します。
コードのハイライト。
ヒストリー。ツールバー、またはショートカットキーが使えます。
YouTubeなどの外部コンテンツを埋め込み表示。
エクスポートする形式はHTMLまたはJSONとなっています。
tiptapは大抵のコンテンツ編集時において必要な機能を網羅しつつ、ニーズに応じて様々な使い方を提供します。すべての機能を使う必要はなく、自分たちのサービスに合わせて選択できるでしょう。Vue.jsを使う際には注目のソフトウェアです。
tiptapはVue/JavaScript製のオープンソース・ソフトウェア（MIT License）です。