## 简介

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>

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>

注意：上面代码无法编辑，需要注册申请 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>

const advancedContent = ref("");

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",
],

// 内容样式
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;
}
`,
};
```