エディタライブラリの変更について
こんにちは！
テイラーワークス プロダクトチームの谷本です。
最近、自社プロダクトで使用しているWYSIWYGエディタのライブラリを変更しました。
変更にあたり、ライブラリ比較や機能拡張、新旧エディタの互換対応を行ったので、複数回の記事に分けてご紹介していきます。
本連載の構成
#1：概要 ←本記事です📝
#2：エディタライブラリ比較、選定
#3：エディタコンポーネント実装（UIカスタマイズと機能拡張）
#4：旧エディタとの互換性対応、まとめ
なぜライブラリ変更したか？
弊社では、自社プロダクトとしてコミュニティプラットフォームTailor Works（テイラーワークス）の開発を行っています。
▼ TailorWorksについてはこちら ▼
ライブラリ依存の不具合が多かった...
TailorWorksのコミュニティ管理者向け機能として、マガジンやイベントなどの作成・編集時のエディタにリッチテキストエディタ（WYSIWYGエディタ）を使用しています。
エディタにはQuillを使用していたのですが、不具合が多く、ライブラリ内の不具合はブラックボックス化していて改修が難しい点が多くあること、かつライブラリのアップデートも2019年から行われていないこともあり、思いきってライブラリ変更を行うこととなりました。
WYSIWYGエディタとは...📝
コンテンツ管理システムでよく使われているエディタで、実際に表示画面で出力されるコンテンツをそのまま編集するように、エディタ上でテキストの装飾や画像、動画挿入ができるようになっているエディタ
やったこと
今回の変更対応で行ったことは下記のとおりです。
- ライブラリ比較検討
- 実装
- Mantineを使用したエディタコンポーネントの作成
- 機能拡張（OGPリンク機能と画像アップロード機能の追加）
- 旧エディタとの互換性対応
- 社内検証
- リリース
事前準備
1. エディタ装飾機能の整理
旧エディタは不具合のほか、機能が多く使いづらいという声もあがっていたため、PdMチームと連携してエディタの機能整理を行いました。
整理の結果、必要な機能は下記に絞りました。
- 見出し
- 太字
- 下線
- テキストリンク
- OGPリンク
- 画像添付
- 動画添付（YouTube埋め込みでOK）
- リスト
- 引用
※フォントカラーや見出し以外の文字の大きさ、フォントの変更等は今回の要件では不要
2. ビジネスサイドとの連携
旧エディタからテキストの装飾機能を減らしたため、ビジネスサイドにも相談し、
- コミュニティ管理画面を使うユーザー向けにエディタの変更について事前に周知してもらう
- リリース前に社内検証期間を設け、ビジネスサイドのメンバーにも新エディタに触れてもらう期間を設ける
こととしました。
実装
MantineのRichTextEditorコンポーネントをベースに、UIのカスタマイズと画像アップロード及びOGPリンク機能の独自実装を行いました。
詳細は、次回以降でまとめます🏃
社内検証
１週間ほど社内でエディタ機能を使ってもらい、フィードバックを受け付ける期間を設けました。
事前の動作確認では確認しきれなかった不具合や、もっとここを改善してほしい！という意見が出てありがたかったです🥺
おわりに
新エディタは2023年4月末にリリースし、現在旧エディタとの並行利用期間中です。
次回からは、ライブラリ比較や実装対応について詳細をまとめていきます📝
また、テイラーワークスでは、エンジニア採用強化中です！
フロントエンドに限らず、バックエンド・インフラ・デザイナーなど全領域で絶賛募集中です。
▼ 少しでも興味をお持ちいただけましたら、採用ページもチェックしてみてください ▼
Discussion