简介
TinyMCE Vue 是官方提供的 TinyMCE 富文本编辑器的 Vue 组件封装，支持 Vue 2 和 Vue 3。它让你可以在 Vue 项目中快速集成强大的富文本编辑能力，支持多种插件、主题和自定义扩展，适用于博客、内容管理、后台系统等多种场景。
主要特性：
-
📦 简单集成，支持 v-model 双向绑定
-
🧩 丰富的编辑器插件与工具栏自定义
-
🌏 多语言支持，轻松切换中文等本地化
-
🎨 支持自定义皮肤和内容样式
-
🔌 支持图片上传、表格、代码块、媒体等高级功能
-
⚡ 性能优秀，适配移动端和桌面端
安装依赖
```bash
安装 tinymce-vue
npm install @tinymce/tinymce-vue
或者使用 yarn
yarn add @tinymce/tinymce-vue
```
基本使用示例
创建基础编辑器组件
```vue
<template>
<div class="editor-container">
<h2>基础编辑器</h2>
<Editor v-model="content" :init="initConfig" @onInit="onEditorInit" />
</div>
</template>
<script setup>
import { ref } from "vue";
import Editor from "@tinymce/tinymce-vue";
const content = ref("<p>这是初始内容</p>");
const initConfig = {
height: 300,
menubar: false,
plugins: [
"advlist",
"autolink",
"lists",
"link",
"image",
"charmap",
"preview",
"anchor",
"searchreplace",
"visualblocks",
"code",
"fullscreen",
"insertdatetime",
"media",
"table",
"code",
"help",
"wordcount",
],
toolbar:
"undo redo | blocks | " +
"bold italic forecolor | alignleft aligncenter " +
"alignright alignjustify | bullist numlist outdent indent | " +
"removeformat | help",
content_style:
"body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
};
const onEditorInit = (editor) => {
console.log("编辑器初始化完成", editor);
};
</script>
<style scoped>
.editor-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
</style>
```
注意：上面代码无法编辑，需要注册申请 apikey，具体参考官网
```vue
<template>
<Editor api-key="your-api-key" />
</template>
```
高级功能示例
```vue
<template>
<div class="advanced-editor">
<h2>高级编辑器</h2>
<Editor
v-model="advancedContent"
:init="advancedConfig"
@onChange="onContentChange"
/>
</div>
</template>
<script setup>
import { ref } from "vue";
import Editor from "@tinymce/tinymce-vue";
const advancedContent = ref("");
const advancedConfig = {
height: 400,
menubar: true,
plugins: [
"advlist",
"autolink",
"lists",
"link",
"image",
"charmap",
"preview",
"anchor",
"searchreplace",
"visualblocks",
"code",
"fullscreen",
"insertdatetime",
"media",
"table",
"paste",
"help",
"wordcount",
"emoticons",
"codesample",
],
toolbar: [
"undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify",
"bullist numlist outdent indent | removeformat | help | image media table | emoticons codesample",
],
content_style: `
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px;
line-height: 1.6;
}
.mce-content-body { max-width: 100%; }
`,
// 自定义样式
style_formats: [
{ title: "标题 1", format: "h1" },
{ title: "标题 2", format: "h2" },
{ title: "标题 3", format: "h3" },
{ title: "代码", inline: "code" },
{ title: "引用", block: "blockquote" },
],
// 图片上传配置
images_upload_url: "/api/upload",
images_upload_handler: (blobInfo, progress) => {
return new Promise((resolve, reject) => {
// 模拟上传
setTimeout(() => {
resolve("https://via.placeholder.com/300x200");
}, 1000);
});
},
};
const onContentChange = (event) => {
console.log("内容变化:", event.target.getContent());
};
</script>
```
常用配置选项
基础配置
```javascript
const basicConfig = {
// 编辑器高度
height: 300,
// 是否显示菜单栏
menubar: false,
// 启用的插件
plugins: [
"advlist",
"autolink",
"lists",
"link",
"image",
"charmap",
"preview",
"anchor",
"searchreplace",
"visualblocks",
"code",
"fullscreen",
"insertdatetime",
"media",
"table",
"code",
"help",
"wordcount",
],
// 工具栏配置
toolbar:
"undo redo | formatselect | bold italic | " +
"alignleft aligncenter alignright alignjustify | " +
"bullist numlist outdent indent | removeformat | help",
// 内容样式
content_style: "body { font-family: Arial, sans-serif; font-size: 14px; }",
// 语言设置
language: "zh_CN",
// 主题
skin: "oxide",
// 占位符文本
placeholder: "请输入内容...",
};
```
高级配置
```javascript
const advancedConfig = {
// 自定义样式格式
style_formats: [
{ title: "标题 1", format: "h1" },
{ title: "标题 2", format: "h2" },
{ title: "代码", inline: "code" },
{ title: "引用", block: "blockquote" },
],
// 自定义按钮
setup: (editor) => {
editor.ui.registry.addButton("custombutton", {
text: "自定义按钮",
onAction: () => {
editor.insertContent("<p>这是自定义按钮插入的内容</p>");
},
});
},
// 图片上传
images_upload_handler: (blobInfo, progress) => {
return new Promise((resolve, reject) => {
const formData = new FormData();
formData.append("file", blobInfo.blob(), blobInfo.filename());
fetch("/api/upload", {
method: "POST",
body: formData,
})
.then((response) => response.json())
.then((result) => resolve(result.url))
.catch((error) => reject(error));
});
},
// 内容验证
setup: (editor) => {
editor.on("change", () => {
const content = editor.getContent();
if (content.length > 1000) {
editor.notificationManager.warn("内容过长，请精简");
}
});
},
};
```
事件处理
```javascript
// 编辑器事件
const editorEvents = {
onInit: (editor) => {
console.log("编辑器初始化完成");
},
onChange: (event) => {
console.log("内容变化:", event.target.getContent());
},
onBlur: (event) => {
console.log("编辑器失去焦点");
},
onFocus: (event) => {
console.log("编辑器获得焦点");
},
onKeyUp: (event) => {
console.log("按键释放:", event.keyCode);
},
};
```
自定义插件
插入当前时间插件
```javascript
// 注册插入时间插件
tinymce.PluginManager.add("inserttime", function (editor) {
editor.ui.registry.addButton("inserttime", {
text: "插入时间",
tooltip: "插入当前时间",
onAction: function () {
const now = new Date();
const timeString = now.toLocaleString("zh-CN");
editor.insertContent(`<span class="timestamp">${timeString}</span>`);
},
});
// 添加到工具栏
editor.ui.registry.addMenuItem("inserttime", {
text: "插入时间",
onAction: function () {
const now = new Date();
const timeString = now.toLocaleString("zh-CN");
editor.insertContent(`<span class="timestamp">${timeString}</span>`);
},
});
});
// 使用配置
const config = {
plugins: "inserttime",
toolbar: "inserttime",
content_style: `
.timestamp {
background-color: #f0f0f0;
padding: 2px 6px;
border-radius: 3px;
font-size: 12px;
color: #666;
}
`,
};
```
代码高亮插件
```javascript
// 代码高亮插件
tinymce.PluginManager.add("codehighlight", function (editor) {
// 添加代码高亮按钮
editor.ui.registry.addButton("codehighlight", {
text: "代码高亮",
tooltip: "插入代码块",
onAction: function () {
editor.windowManager.open({
title: "插入代码",
body: {
type: "panel",
items: [
{
type: "input",
name: "code",
label: "代码内容",
placeholder: "请输入代码...",
},
{
type: "selectbox",
name: "language",
label: "编程语言",
items: [
{ value: "javascript", text: "JavaScript" },
{ value: "html", text: "HTML" },
{ value: "css", text: "CSS" },
{ value: "python", text: "Python" },
{ value: "java", text: "Java" },
],
},
],
},
buttons: [
{
type: "submit",
text: "插入",
},
{
type: "cancel",
text: "取消",
},
],
onSubmit: function (api) {
const data = api.getData();
const code = data.code;
const language = data.language;
editor.insertContent(`
<pre class="code-block" data-language="${language}">
<code class="language-{language}"\>{editor.dom.encode(
code
)}</code>
</pre>
`);
api.close();
},
});
},
});
// 添加到菜单
editor.ui.registry.addMenuItem("codehighlight", {
text: "代码高亮",
onAction: function () {
// 同上的对话框逻辑
},
});
});
// 使用配置
const config = {
plugins: "codehighlight",
toolbar: "codehighlight",
content_style: `
.code-block {
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 4px;
padding: 10px;
margin: 10px 0;
font-family: 'Courier New', monospace;
font-size: 13px;
line-height: 1.4;
overflow-x: auto;
}
.code-block code {
background: none;
padding: 0;
}
`,
};
```
注意事项
-
**API Key**: 生产环境需要申请 TinyMCE API Key
-
**CDN**: 建议使用 CDN 加速加载
-
**国际化**: 需要下载对应的语言包
-
**主题**: 可以自定义主题样式
-
**插件**: 按需加载插件以提高性能