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

鼻爾蓋茲

發佈於技術筆記

2022/12/30閱讀時間約 3 分鐘

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

TinyMCE功能強大，實作起來其實比想像中還容易，官方提供的免費額度提供自己做個side project玩玩滿充足的

TinyMCE介紹

TinyMCE是一款功能齊全的網頁文字編輯器，直接使用滑鼠選取文字並且點擊功能按鈕即可對文字進行樣式編輯，在文章編輯或是撰寫Mail的時候皆是非常好用的功能。

專案撰寫

事前準備

Tiny-API-Key

去TinyMCE官網註冊一個帳號，在後台頁面就會看到一組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>