vue3 使用tinymce/tinymce-vue
时间: 2025-05-27 07:12:31 浏览: 30
### 配置和初始化 TinyMCE 富文本编辑器
在 Vue3 项目中集成 `tinymce-vue` 插件并配置和初始化 TinyMCE 编辑器的过程如下:
#### 1. 安装依赖
通过 npm 或 yarn 安装所需的包:
```bash
npm install --save @tinymce/tinymce-vue tinymce
```
或者使用 yarn:
```bash
yarn add @tinymce/tinymce-vue tinymce
```
如果需要支持中文语言或其他功能模块,可以额外安装对应的资源文件[^1]。
---
#### 2. 创建富文本编辑器组件
创建一个新的 Vue 组件用于封装 Tinymce 编辑器的功能。以下是完整的实现代码示例:
```vue
<template>
<editor
api-key="your-api-key"
v-model="content"
:init="editorInitConfig"
/>
</template>
<script>
import { ref } from 'vue';
import Editor from '@tinymce/tinymce-vue';
export default {
components: {
Editor,
},
setup() {
const content = ref('<p>初始内容</p>');
const editorInitConfig = {
height: 500, // 设置高度
menubar: true, // 显示菜单栏
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar:
'undo redo | formatselect | bold italic underline strikethrough | fontselect fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | link image | code', // 工具栏按钮配置[^2]
language: 'zh_CN', // 使用中文语言包
};
return {
content,
editorInitConfig,
};
},
};
</script>
```
---
#### 3. 获取 API Key
TinyMCE 提供了一个免费的基础版本,但仍需注册获取一个 API Key。如果没有提供有效的 API Key,则会显示警告提示。可以通过访问官网 [https://www.tiny.cloud/](https://www.tiny.cloud/) 注册账号并生成 API Key。
将其替换到模板中的 `api-key` 属性位置即可生效。
---
#### 4. 加载本地化语言包(可选)
为了加载特定的语言包(如中文),可以在项目的入口文件中引入对应的语言文件:
```javascript
// main.js
import 'tinymce/langs/zh_CN'; // 引入中文语言包
```
也可以动态加载语言包,在初始化配置中设置 `language_url` 和 `language` 参数:
```javascript
const editorInitConfig = {
...
language_url: '/path/to/langs/zh_CN.js', // 自定义路径
language: 'zh_CN',
};
```
---
#### 5. 动态调整工具栏和插件
可以根据需求自定义工具栏和启用的插件列表。例如,增加表格操作、代码高亮等功能时,只需扩展 `plugins` 和 `toolbar` 的配置项。
---
### 注意事项
- 如果未指定 `v-model`,则无法实现双向绑定。
- 确保网络环境允许访问 TinyMCE CDN 资源;若离线部署,需手动下载相关静态资源并修改配置指向本地路径。
---
阅读全文
相关推荐


















