TinyMCE編輯器是一個提供在網頁使用的所見即所得文字編輯器，但是有免費提供的GPLv2釋出版本。
商用需要與註冊官方網站並取得授權金鑰，否則部屬到網站上，編輯內容會被遮擋無法使用。
整合方式官方都已經整理好，照著作就行囉！
安裝TinyMCE編輯器
我使用的是最新版本是8.2.1
pnpm add @tinymce/tinymce-react tinymce
版本分別是
"@tinymce/tinymce-react": "^6.3.0",
"tinymce": "^8.2.1",
使用TinyMCE編輯器
廢話不多說，直接上程式碼，以下是一個設定好的Next.js元件TinyMCEEditor.tsx
'use client'
import { Editor } from '@tinymce/tinymce-react'
import type { Editor as TinyMCEEditorType } from 'tinymce'
import { useRef } from 'react'
type TinyMCEEditorProps = {
label?: string
defaultValue?: string
onChange?: (content: string) => void
height?: number
disabled?: boolean
required?: boolean
}
export default function TinyMCEEditor({
label,
defaultValue = '',
onChange,
disabled = false,
required = true,
}: TinyMCEEditorProps) {
const editorRef = useRef<TinyMCEEditorType | null>(null)
return (
<fieldset>
<div>
{label}
{required ? <span>*</span> : undefined}
</div>
<div style={{ width: '100%', height: 300 }}>
<Editor
tinymceScriptSrc="/tinymce/tinymce.min.js"
licenseKey="gpl"
onInit={(_evt, editor) => (editorRef.current = editor)}
initialValue={defaultValue}
disabled={disabled}
onEditorChange={(newValue) => onChange?.(newValue)}
init={{
language: 'zh-TW',
language_url: '/tinymce-i18n/langs8/zh-TW.js',
height: 300,
width: '100%',
menubar: false,
branding: false,
toolbar: 'bold italic underline strikethrough forecolor | removeformat',
toolbar_mode: 'sliding',
content_style: `
body {
font-family: sans-serif;
font-size: 16px;
}
`,
setup: (editor) => {
// 允許 Enter 直接換行
editor.on('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
editor.execCommand('InsertLineBreak')
e.preventDefault()
}
})
},
}}
/>
</div>
</fieldset>
)
}
設定授權金鑰
官方整合說明是要求要免費使用，你必須拷貝tinymce的檔案到你自己的assets資料夾，對Next.js來說就是public目錄啦！
我們複製node_modules/tinymce內的所有檔案到public/tinymce中，這要注意一下如果你跟我一樣使用pnpm，他是透過symbolic link連結到其他位置，所以要直接去連結位置拷貝資料到public哦！
然後在props中設定
tinymceScriptSrc="/tinymce/tinymce.min.js"
licenseKey="gpl"
設定要編輯選單
所以在props的init設定toolbar就可以調整選單
toolbar: 'bold italic underline strikethrough forecolor | removeformat',
以上是設定粗體、斜體、底線、刪除線、改文字顏色，以及清除格式。
設定語系
在init中我有設定了正體中文zh-TW，它還會需要指定檔案url
語系檔可以從官網取得，或是從cdn下載語系檔
https://cdn.jsdelivr.net/npm/tinymce-i18n@25.11.3/langs8/
我是把正體中文語系檔放在public/tinymce-i18n/langs8/zh-TW.js
所以在props的init中加入了
language: 'zh-TW',
language_url: '/tinymce-i18n/langs8/zh-TW.js',
留言