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>
傳入的內容除了 API_KEY和綁定的 v-model外，剩下的就是初始化的參數內容
初始化相關參數可參考官方初始化文檔基本是無插件狀態，如果要開啟則直接在plugins欄位中新增所需插件，可參考官方插件文檔新增。
初始化相關參數可參考官方初始化文檔基本是無插件狀態，如果要開啟則直接在plugins欄位中新增所需插件，可參考官方插件文檔新增。
傳送mail
傳送mail的部分可以先參考一下前面文章搭配閱讀，大致上是把編輯好的郵件內容整包丟入並且填寫正確的收件人資訊，即可在郵箱裡收到正確樣式的郵件。
開發上問題點
在NUXT上開發時熱更新有時會讓TinyMCE沒有正確初始化，但那個不影響實際使用情境，要解決這個問題可以在script中按一下enter後儲存，即可觸發TinyMCE初始化的條件。
實際使用心得
個人認為TinyMCE這款網頁文字編輯器功能相當豐富，所有功能都用插件的方式呈現，可以客製化內容多，官方套件使用起來簡單上手，最後附上GITHUB。
參考資料
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
Vue 3을 사용한 소프트웨어 개발
최근 웹 개발에서 Vue.js는 매우 인기 있는 JavaScript 프레임워크 중 하나입니다. Vue 3은 그 이전 버전인 Vue 2에 비해 많은 기능 개선과 성능 향상이 이루어졌습니다. 이번 글에서는 Vue 3을 사용하여 소프트웨
Vue 3을 사용한 소프트웨어 개발
최근 웹 개발에서 Vue.js는 매우 인기 있는 JavaScript 프레임워크 중 하나입니다. Vue 3은 그 이전 버전인 Vue 2에 비해 많은 기능 개선과 성능 향상이 이루어졌습니다. 이번 글에서는 Vue 3을 사용하여 소프트웨
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟，包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置，及如何創建類型聲明文件來正確識別 .vue 文件。
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
因為最近想嘗試編碼風格，於是就選了一套比較"不嚴格"的輔助工具來摸索。
編輯器 VS CODE
框架 VUE3
打包工具 VITE
編碼風格 Standard
環境 version
{
"nodejs":"v18.18.0",
"npm":"9.8.1"
}
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
Vue 3을 사용한 소프트웨어 개발
최근 웹 개발에서 Vue.js는 매우 인기 있는 JavaScript 프레임워크 중 하나입니다. Vue 3은 그 이전 버전인 Vue 2에 비해 많은 기능 개선과 성능 향상이 이루어졌습니다. 이번 글에서는 Vue 3을 사용하여 소프트웨
Vue 3을 사용한 소프트웨어 개발
최근 웹 개발에서 Vue.js는 매우 인기 있는 JavaScript 프레임워크 중 하나입니다. Vue 3은 그 이전 버전인 Vue 2에 비해 많은 기능 개선과 성능 향상이 이루어졌습니다. 이번 글에서는 Vue 3을 사용하여 소프트웨
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟，包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置，及如何創建類型聲明文件來正確識別 .vue 文件。
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
因為最近想嘗試編碼風格，於是就選了一套比較"不嚴格"的輔助工具來摸索。
編輯器 VS CODE
框架 VUE3
打包工具 VITE
編碼風格 Standard
環境 version
{
"nodejs":"v18.18.0",
"npm":"9.8.1"
}
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。