tinymce vue3（手把手讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代 Web 开发中，富文本编辑器是用户交互体验的重要组成部分。无论是博客平台、内容管理系统（CMS），还是在线表单工具，一个功能强大且易用的编辑器都能显著提升用户的创作效率。TinyMCE 是一款广受欢迎的开源富文本编辑器，而 Vue 3 则是前端框架领域的佼佼者。本文将深入探讨如何在 Vue 3 项目中集成 TinyMCE，并通过循序渐进的方式，帮助开发者快速上手这一组合。

TinyMCE 的优势在于其丰富的功能和高度可定制性，例如支持图片插入、表格操作、代码高亮等。而 Vue 3 作为新一代前端框架，通过响应式数据绑定、组件化设计等特性，能够与 TinyMCE 实现无缝协作。两者的结合，既能让开发者专注于业务逻辑，又能为用户提供流畅的编辑体验。

步骤 1：安装 TinyMCE 和 Vue 插件

在 Vue 3 项目中使用 TinyMCE，首先需要安装官方提供的插件包。通过以下命令安装：

npm install @tinymce/tinymce-vue tinymce  

这里，@tinymce/tinymce-vue 是 Vue 3 的适配层，而 tinymce 包则包含 TinyMCE 的核心功能。

步骤 2：引入 TinyMCE 组件

在 Vue 3 组件中，通过 import 语句引入 TinyMCE 组件：

import { defineComponent } from "vue";  
import Tinymce from "@tinymce/tinymce-vue";  

export default defineComponent({  
  components: {  
    Tinymce  
  },  
  // ...  
});  

注意：如果使用 Vue 的 Options API，可以直接在 components 选项中注册。

步骤 3：基础配置与渲染

在模板中使用 <Tinymce> 组件时，需通过 v-model 绑定内容，并配置基础选项。例如：

<template>  
  <div>  
    <Tinymce  
      v-model="content"  
      :init="tinyInit"  
    />  
  </div>  
</template>  

对应的 setup 函数或 data 配置中，需定义 content 和 tinyInit：

setup() {  
  const content = ref("");  
  const tinyInit = {  
    height: 500,  
    menubar: false,  
    plugins: "link image code",  
    toolbar: "undo redo | bold italic | alignleft aligncenter alignright | image code"  
  };  
  return { content, tinyInit };  
}  

配置项解析

• height: 编辑器的高度（单位：像素）。
• menubar: 是否显示顶部菜单栏。
• plugins: 需要加载的插件，如 image 用于插入图片，code 用于查看源代码。
• toolbar: 工具栏按钮的排列顺序，使用 | 分隔功能组。

实时内容绑定与双向更新

通过 v-model，TinyMCE 的内容会与 Vue 的响应式数据 content 实现双向绑定。例如，当用户在编辑器中输入文字时，content 的值会自动更新。开发者可以通过监听 content 的变化，实现如实时预览、内容校验等功能。

插件与工具栏的扩展

TinyMCE 的强大之处在于其插件系统。例如，若需添加表格功能，只需在 plugins 中添加 table，并在工具栏中配置 table 相关按钮：

plugins: "link image code table",  
toolbar: "undo redo | bold italic | table | code"  

此时，用户即可通过工具栏的 table 按钮插入表格。

自定义按钮与插件

若需完全自定义按钮，可通过 TinyMCE 的 API 实现。例如，添加一个按钮来插入当前时间戳：

plugins: "my_custom_plugin", // 假设插件名为 my_custom_plugin  
setup(editor) {  
  editor.ui.registry.addButton("insert_timestamp", {  
    text: "Insert Time",  
    onAction: () => {  
      editor.insertContent(new Date().toLocaleString());  
    }  
  });  
}  

此代码需放在 tinyInit 的 setup 函数中，通过 editor.insertContent() 将内容插入到编辑器中。

TinyMCE 提供了丰富的事件钩子，开发者可通过 setup 函数监听这些事件。例如，监听内容变化事件：

setup(editor) {  
  editor.on("change keyup", () => {  
    // 此时 content 的值已更新  
    console.log("Current content:", content.value);  
  });  
}  

通过这种方式，可以实现实时字数统计、内容格式校验等功能。

本地图片插入

默认情况下，TinyMCE 允许用户通过工具栏的 image 按钮插入本地图片。若需自定义图片插入逻辑（例如上传到服务器），可通过 images_upload_handler 实现：

images_upload_handler: (blobInfo, success, failure) => {  
  const xhr = new XMLHttpRequest();  
  xhr.open("POST", "/api/upload");  
  xhr.onload = () => {  
    if (xhr.status === 200) {  
      success(xhr.responseText); // 响应需包含图片 URL  
    } else {  
      failure("上传失败");  
    }  
  };  
  xhr.send(blobInfo.blob());  
}  

此代码需放在 tinyInit 的配置中，通过 images_upload_handler 替换默认的图片处理逻辑。

内容过滤与 XSS 防护

在生产环境中，需对用户输入的内容进行过滤，避免 XSS 攻击。TinyMCE 提供了 valid_elements 配置项，用于限制允许的 HTML 标签和属性：

valid_elements: "p,b,i,em,strong,a[href|target],img[src|alt]"  

此配置仅允许使用 <p>、<b>、<i> 等标签，并限制 <a> 标签只能包含 href 和 target 属性。

问题 1：编辑器初始化时空白

原因：未正确配置 init 参数或未导入 TinyMCE 主题。
解决方法：在 tinyInit 中添加 skin_url 指向主题路径，或检查是否遗漏了 plugins 和 toolbar 的配置。

问题 2：内容更新不触发响应式数据

原因：未使用 v-model 或未正确绑定数据。
解决方法：确保在 <Tinymce> 组件中通过 v-model 绑定 Vue 的响应式变量，并检查数据流是否正确。

问题 3：自定义插件不生效

原因：插件名称拼写错误，或未在 plugins 配置中声明。
解决方法：检查插件名称是否与 plugins 数组中的字符串完全匹配，并确保插件逻辑在 setup 函数中正确注册。

减少冗余配置

通过按需加载插件和工具栏按钮，避免加载不必要的功能。例如，若项目仅需要基础格式化功能，可移除 code 和 table 等插件。

使用 CDN 加速加载

TinyMCE 的核心库体积较大，可通过 CDN 引入以减少项目打包体积：

tinymce.init({  
  ...  
  // 在 init 配置中添加 CDN 地址  
  external_plugins: {  
    "my_plugin": "https://example.com/my_plugin.js"  
  }  
});  

内容缓存与持久化

在大型应用中，可结合 Vue 的状态管理库（如 Pinia）将编辑器内容持久化到本地存储或后端数据库。例如：

// 监听内容变化，将内容存入 localStorage  
watch(content, (newVal) => {  
  localStorage.setItem("editor_content", newVal);  
});  

通过本文的讲解，开发者应已掌握在 Vue 3 项目中集成 TinyMCE 的核心方法，并能够处理常见场景下的功能扩展和性能优化。TinyMCE 的灵活性与 Vue 3 的响应式特性相结合，为开发者提供了一个高效且易维护的解决方案。无论是构建个人博客、企业级 CMS，还是需要富文本编辑的 SaaS 产品，这一组合都能显著提升开发效率和用户体验。

建议读者通过官方文档和社区资源进一步探索高级功能，例如自定义主题、与第三方 API 集成等。实践是掌握技术的最佳途径，不妨尝试在现有项目中引入 TinyMCE，感受其带来的开发便利性。