当前位置：首页 > news >正文

富文本 tinyMCE Vue2 组件使用简易教程

news 2025/6/23 6:58:34

参考官方教程 TinyMCE Vue.js integration technical reference

Vue2 项目需要使用 tinyMCE Vue2 组件(@tinymce/tinymce-vue)的第 3 版

安装组件

npm install --save "@tinymce/tinymce-vue@^3"

编写组件调用

<template><Editorref="editor"v-model="editorContent":id="richtextId":init="editorInit"/>
</template>
<script lang="ts">
import Vue from "vue";
import Editor from "@tinymce/tinymce-vue";export default Vue.extend({name: "RichtextView",components: { Editor },props: {richtextId: { type: String, required: true }, // 标识当前富文本内容的唯一id},data() {return {editorContent: "", // 绑定富文本编辑器内容editorInit: {height: 400, // 设置富文本编辑器高度menubar: false, // 是否显示菜单栏plugins: "lists link image table code help wordcount", // 使用的tinymce插件列表},};},
});
</script>

跳过 tinyMCE 的授权

按照官网说法，tinyMCE 是可以在 GPLv2 协议下使用的，我的理解是只要不用他们官方的云服务，是不需要授权的

但如上述代码编写运行后，会有一个提示出现在页面

如果不想麻烦去注册 API key，可以如下述操作：

由于 @tinymce/tinymce-vue 第 3 版是基于 tinymce 的第 5 版的，先下载 tinymce 第 5 版作为本地资源，解压后放到 Vue2 项目根目录的 public 文件夹里

在上述组件调用示例代码中加入 tinymce-script-src 传参，从而指定组件加载本地的 tinymce

完整正确的调用示例：

<template><Editorref="editor"v-model="editorContent":tinymce-script-src="tinyMCEPath":id="richtextId":init="editorInit"/>
</template>
<script lang="ts">
import Vue from "vue";
import Editor from "@tinymce/tinymce-vue";export default Vue.extend({name: "RichtextView",components: { Editor },props: {richtextId: { type: String, required: true }, // 标识当前富文本内容的唯一id},data() {return {tinyMCEPath: `${process.env.BASE_URL}tinymce/tinymce.min.js`,editorContent: "", // 绑定富文本编辑器内容editorInit: {height: 400, // 设置富文本编辑器高度menubar: false, // 是否显示菜单栏plugins: "lists link image table code help wordcount", // 使用的tinymce插件列表},};},
});
</script>

上述代码是在 Vue2 中的简单调用，供读者参考，详细调用方式请查阅上文的官方教程

至此能正常使用 Vue2 下的 tinyMCE