TinyMCE富文本编辑器在Vue中的使用教程

介绍

TinyMCE是一款功能强大的富文本编辑器，本教程将指导您如何在Vue项目中集成和使用TinyMCE编辑器，从基础使用到高级功能扩展。

目录

1. 基础集成
2. 核心配置详解
3. 图片上传处理
4. 自定义功能扩展
5. 双向数据绑定
6. 样式定制
7. 常见问题解决
8. vue项目实际应用

---

1. 基础集成

安装依赖

#yarn
yarn add tinymce
yarn add @tinymce/tinymce-vue
#npm
npm install tinymce -S 
npm install @tinymce/tinymce-vue -S

基础组件封装

引入核心资源

在组件中引入TinyMCE的核心文件：

// 引入核心文件
import 'tinymce/tinymce'
import 'tinymce/icons/default/icons'
import 'tinymce/themes/silver'// 界面UI主题
import 'tinymce/models/dom' // DOM模型

// 引入插件
import "tinymce/plugins/image";// 图片插件

import "tinymce/plugins/table";// 表格插件

import "tinymce/plugins/lists"; // 列表插件

import "tinymce/plugins/wordcount"; // 文字计数

import "tinymce/plugins/preview"; // 预览

import "tinymce/plugins/emoticons"; // emoji表情

import "tinymce/plugins/emoticons/js/emojis.js"; // 必须引入这个文件才有表情图库

import "tinymce/plugins/code"; // 编辑源码

import "tinymce/plugins/link"; // 链接插件

import "tinymce/plugins/advlist"; // 高级列表

import "tinymce/plugins/codesample"; // 代码示例

import "tinymce/plugins/autoresize"; // 自动调整编辑器大小

import "tinymce/plugins/quickbars"; // 光标处快捷提示

import "tinymce/plugins/nonbreaking"; // 插入不间断空格

import "tinymce/plugins/searchreplace"; // 查找替换

import "tinymce/plugins/autolink"; // 自动链接

import "tinymce/plugins/directionality"; // 文字方向

import "tinymce/plugins/visualblocks"; // 显示元素范围

import "tinymce/plugins/visualchars"; // 显示不可见字符

import "tinymce/plugins/charmap"; // 特殊符号

import "tinymce/plugins/insertdatetime"; // 插入日期时间

import "tinymce/plugins/importcss"; // 引入自定义样式的css文件

import "tinymce/plugins/accordion"; // 可折叠数据手风琴模式

import "tinymce/plugins/anchor"; // 锚点

import "tinymce/plugins/fullscreen";

// 引入中文语言包
import 'tinymce-i18n/langs/zh_CN'

---

2. 核心配置详解

常用配置选项

const config =reactive({
 selector: "#" + tinymceId.value, // 富文本编辑器的id
  language: 'zh_CN', // 设置中文
  language_url: "/tinymce/langs/zh_CN.js", // 语言包的路径，具体路径看自己的项目
  skin_url: '/tinymce/skins/ui/oxide', // 皮肤路径
  content_css: '/tinymce/content.css', // 内容区域CSS
  plugins: 'preview image link lists table code', // 启用的插件
  toolbar: 'undo redo | styleselect | bold italic | link image | code', // 工具栏
  menubar: 'file edit view insert format tools', // 菜单栏
  branding: false, // 移除TinyMCE标识
  promotion: false, // 移除升级提示
  min_height: 400, // 最小高度
  max_height: 800, // 最大高度
  resize: true, // 是否允许调整大小
  elementpath: true, // 显示元素路径
  statusbar: true, // 显示状态栏
})

插件说明

常用插件及其功能：

• image：图片插入
• link：超链接管理
• lists：有序/无序列表
• table：表格管理
• code：源代码编辑
• preview：内容预览
• fullscreen：全屏编辑
• searchreplace：查找替换

---

3. 图片上传处理

图片上传处理器

const config = {
  images_upload_handler: (blobInfo, progress) => 
    new Promise((resolve, reject) => {
      // 检查图片大小（10MB限制）
      if (blobInfo.blob().size / 1024 / 1024 > 10) {
        reject('图片大小请控制在10M以内')
        return
      }
      
      const formData = new FormData()
      formData.append('image', blobInfo.blob())
      
      // 使用axios或其他HTTP库上传
      axios.post('/upload/image', formData, {
        onUploadProgress: (e) => {
          progress(e.loaded / e.total * 100)
        }
      })
      .then(res => {
        if (res.data.code === 10000) {
          resolve(res.data.data.path) // 返回图片URL
        } else {
          reject(res.data.message)
        }
      })
      .catch(() => {
        reject('上传失败')
      })
    })
}

图片相关配置

const config = {
  image_caption: true, // 启用图片标题
  image_advtab: true, // 显示高级图片选项
  image_dimensions: false, // 是否显示尺寸选项
  paste_data_images: true, // 允许粘贴图片
}

---

4. 自定义功能扩展

添加自定义按钮

const config = {
  setup: (editor) => {
    // 添加填空按钮
    editor.ui.registry.addButton('fillButton', {
      text: '增加填空',
      tooltip: '给填空题增加一个空',
      onAction: () => {
        editor.insertContent(' ____ ')
      }
    })
    
    // 添加解析按钮
    editor.ui.registry.addButton('changeAnalysisButton', {
      text: '更改解析',
      tooltip: '最多支持3次解析',
      onAction: () => {
        // 触发自定义事件
        emits('changeAnalysisRequested')
      }
    })
    
    // 图片行内/块级切换
    editor.addCommand('mceCustomStyle', () => {
      const img = editor.selection.getNode()
      if (img.tagName === 'IMG') {
        img.style.display = img.style?.display === 'inline-block' 
          ? 'block' 
          : 'inline-block'
      }
    })
    
    editor.ui.registry.addButton('imgInline', {
      text: '行内',
      tooltip: '切换图片为行内样式或块状样式',
      onAction: () => editor.execCommand('mceCustomStyle')
    })
  }
}

自定义公式编辑器

const config = {
// 额外引入的插件可以在public文件夹下建立一个tinymce文件夹，将相关插件放进去
  external_plugins: {
    'kityformula-editor': '/tinymce/plugins/kityformula-editor/plugin.min.js'
  },
  toolbar: '... | kityformula-editor ...',
}

---

5. 双向数据绑定

实现v-model支持

编辑器API方法

// 获取编辑器内容
const getContent = () => tinymce.activeEditor.getContent()

// 设置编辑器内容
const setContent = (content) => tinymce.activeEditor.setContent(content)

// 清空编辑器
const clearContent = () => tinymce.activeEditor.setContent('')

---

6. 样式定制

隐藏不需要的元素

/* 隐藏API密钥提示 */
.tox-notifications-container .tox-notification--warning {
  display: none !important;
}

/* 隐藏升级提示 */
.tox-promotion {
  display: none !important;
}

/* 调整编辑器层级 */
.tox {
  z-index: 9999 !important;
}

自定义编辑区域样式

const config = {
  content_style: `
    body { 
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
      font-size: 14px; 
      line-height: 1.6;
      color: #333;
    }
    p { margin-bottom: 1em; }
    h1, h2, h3, h4, h5, h6 { 
      margin-top: 1.2em;
      margin-bottom: 0.6em;
      font-weight: 600;
    }
  `,
}

---

7. 常见问题解决

1. 中文语言包不生效

确保正确引入语言文件并配置：

import 'tinymce-i18n/langs/zh_CN'

const config = {
  language: 'zh_CN',
  language_url: '/path/to/zh_CN.js', // 或使用CDN
}

2. 图片上传失败

• 检查图片大小限制
• 确认上传接口返回正确的URL格式
• 验证跨域问题

3. 只读模式切换

watch(() => props.readonly, (newValue) => {
  tinymce.activeEditor.mode.set(newValue ? 'readonly' : 'design')
})

4. 自定义插件加载失败

确保路径正确，使用绝对路径：

external_plugins: {
  'kityformula-editor': `${import.meta.env.BASE_URL}/static/tinymce7/plugins/kityformula-editor/plugin.min.js`
}

5. 样式冲突问题

使用scoped样式或深层选择器：

6. 编辑器隐藏显示内容不更新