はじめに

初めまして2021年4月に新卒でbravesoftに滑り込み入社しましたtaroです。

4月からTypeScriptなVue.jsでWYSIWIGエディタを実装していました!
今回紹介する内容は、TypeScriptなVue.jsでWYSIWIGエディタを実装する方法です。

リッチなエディタを実装したい方、TypeScriptにチャレンジしたい方の参考になれば嬉しいです!☀️

コードは↓こちらから。
https://github.com/TaroHiraishi/ts-task-manager

デプロイしたものは↓こちらのURLから確認いただけます。
ts-task-manager-d1065.web.app/

WYSIWIGエディタで記入した内容がそのまま画面に表示されるシンプルなアプリケーションです。

 

使用した技術の紹介

使用した主な技術は↓こちらです。

  1. Vue.js (composition-api)
  2. TypeScript
  3. Firebase
  4. TinyMCE
  5. Vuetify
  6. GitHub Actions

今回の記事の目玉はTinyMCEというWYSIWIGエディタのライブラリです。

「Vue.js WYSIWIGエディタ」で検索した時にトップにヒットしたのはTinyMCECKEditorの2つでした。

今回の開発ではTinyMCEを選択しています。

なぜなら、TypeScriptに対応していて、ドキュメントが読みやすかったからです。

次のセクションでTinyMCEの設定方法を紹介します。

 

TinyMCEの設定方法

  1. TinyMCEのライブラリをインストールし、vueファイルで初期化することでTinyMCEを使えるようになります。
  2. VueプロジェクトでTinyMCEを使う場合、@tinymce/tinymce-vueというライブラリをインストールします。
  3. Vueバージョン2の場合は次のコマンドを実行します。
    npm install --save "@tinymce/tinymce-vue@^4"Vueバージョン3の場合は次のコマンドを実行します。
    npm install --save "@tinymce/tinymce-vue@^3"
  4. 次にTinyMCEを使いたいコンポーネントで初期化します。
    今回作成したアプリケーションではTinyMCEにapiKeyとmenubarの表示・非表示の情報などを渡しました。具体的なコードは↓こちらです。

APIキーはこちらから取得できます。
https://www.tiny.cloud/auth/signup/

まとめ

静的型付け言語への挑戦とWYSIWIGエディタの実装は以前からチャレンジしたいテーマでした。
TypeScriptは最高の開発体験を提供してくれました。

開発が後半に行くにつれて、開発体験はより良いものになりました。

また、TinyMCEはドキュメントも非常に分かりやすく、簡単な設定でWYSIWIGエディタを表現できました!

WYSIWIGエディタ開発にチャレンジしている方はぜひ参考にしてみてください!🤗

最後までありがとうございました!

★会社紹介★

私達bravesoft(ブレイブソフト)は「最強のものづくり集団」を目指し、
新しいものへの果てしない挑戦を日々繰り広げております!
その中で一緒に働いてくれる仲間も積極採用中ですので、是非お問い合わせください!

<基本情報>
bravesoft オフィシャルホームページ
採用情報
受託開発紹介
UI/UXデザイン紹介

<自社事業>
eventos
Live!アンケート
Appvisor Push