はじめに

初めまして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エディタ」で検索した時にトップにヒットしたのはTinyMCEとCKEditorの２つでした。

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

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

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

 

TinyMCEの設定方法

  1. TinyMCEのライブラリをインストールし、vueファイルで初期化することでTinyMCEを使えるようになります。
  2. VueプロジェクトでTinyMCEを使う場合、@tinymce/tinymce-vueというライブラリをインストールします。
  3. Vueバージョン２の場合は次のコマンドを実行します。
    npm install --save "@tinymce/tinymce-vue@^4"Vueバージョン3の場合は次のコマンドを実行します。
    npm install --save "@tinymce/tinymce-vue@^3"
  4. 次にTinyMCEを使いたいコンポーネントで初期化します。
    今回作成したアプリケーションではTinyMCEにapiKeyとmenubarの表示・非表示の情報などを渡しました。具体的なコードは↓こちらです。
<template>
    <Editor
        apiKey="YOUR_API_KEY"
        v-model="body"
        :init="{
            menubar: false,
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
            ],
        }"
    />
<template>

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

まとめ

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

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

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

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

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