TinyMCE+Vue實現網頁文字編輯器，雙向綁定HTML內容即時預覽封面
TinyMCE功能強大，實作起來其實比想像中還容易，官方提供的免費額度提供自己做個side project玩玩滿充足的
TinyMCE介紹
TinyMCE是一款功能齊全的網頁文字編輯器，直接使用滑鼠選取文字並且點擊功能按鈕即可對文字進行樣式編輯，在文章編輯或是撰寫Mail的時候皆是非常好用的功能。
專案撰寫
事前準備
- Tiny-API-Key
專案配置
- Nuxt3
- TinyMCE
- Nodemailer
以上為專案主要使用套件&框架，主要是因為發送Mail的部分需要後端程式，索性就改用Nuxt3作為框架一次完成。
安裝所需套件
要在Vue中使用TinyMCE其實不用特別設定，官方提供的套件算是相當便利。
npm install --save "@tinymce/tinymce-vue@^5"頁面中使用
直接在頁面中引入後使用，本身就是一個Vue元件。
<template>
<p v-html="content"></p>
<Editor :api-key="apiKey" v-model="content" :init="{
language: 'zh_TW',
height: 500,
plugins: ['emoticons', 'table']
}"></Editor>
</template>
<script setup>
import Editor from '@tinymce/tinymce-vue'
const apiKey = <API-KEY>
const content = ref(``)
</script>
傳入的內容除了 API_KEY和綁定的 v-model外，剩下的就是初始化的參數內容
初始化相關參數可參考官方初始化文檔基本是無插件狀態，如果要開啟則直接在plugins欄位中新增所需插件，可參考官方插件文檔新增。
傳送mail
傳送mail的部分可以先參考一下前面文章搭配閱讀，大致上是把編輯好的郵件內容整包丟入並且填寫正確的收件人資訊，即可在郵箱裡收到正確樣式的郵件。
開發上問題點
在NUXT上開發時熱更新有時會讓TinyMCE沒有正確初始化，但那個不影響實際使用情境，要解決這個問題可以在script中按一下enter後儲存，即可觸發TinyMCE初始化的條件。
實際使用心得
個人認為TinyMCE這款網頁文字編輯器功能相當豐富，所有功能都用插件的方式呈現，可以客製化內容多，官方套件使用起來簡單上手，最後附上GITHUB。
