はじめに

初めまして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エディタで記入した内容がそのまま画面に表示されるシンプルなアプリケーションです。

使用した技術の紹介

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

Vue.js (composition-api)
TypeScript
Firebase
TinyMCE
Vuetify
GitHub Actions

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

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

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

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

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

TinyMCEの設定方法

TinyMCEのライブラリをインストールし、vueファイルで初期化することでTinyMCEを使えるようになります。
VueプロジェクトでTinyMCEを使う場合、@tinymce/tinymce-vueというライブラリをインストールします。
Vueバージョン２の場合は次のコマンドを実行します。
npm install --save "@tinymce/tinymce-vue@^4"Vueバージョン3の場合は次のコマンドを実行します。
npm install --save "@tinymce/tinymce-vue@^3"
次に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>