TinyMCE+Vue實現網頁文字編輯器，雙向綁定HTML內容即時預覽

TinyMCE介紹

專案撰寫

事前準備

• Tiny-API-Key

去官網註冊一個帳號，在後台頁面就會看到一組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。 參考資料 Using the TinyMCE package with the Vue.js framework | TinyMCE Documentation 使用程式發送email，Nodejs+Nodemailer來發送Email — 鼻爾蓋茲 — Medium