前言
TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。
一、安装Tinymce
npm install tinymce@^5.6.2 npm install @tinymce/tinymce-vue@^4.0.1
注意：版本可根据自己项目的情况来进行选择。
二、使用步骤
1.封装组件
代码如下（仅展示部分代码）：
<template> <div class="tinymce-box"> <Editor id="myedit" v-model="content" :init="init" tag-name="div" :disabled="disabled" @onClick="onClick" /> </div> </template> <script> // import api from '../api/api.js' import Editor from "@tinymce/tinymce-vue"; import tinymce from "tinymce/tinymce"; import "tinymce/themes/silver"; import "tinymce/icons/default"; export default { name: "TEditor", components: { Editor, }, props: { modelValue: { type: String, default: "", }, disabled: { type: Boolean, default: false, }, }, emits: { "update:modelValue": null, saveContent: "", }, setup(props, context) { const $post = getCurrentInstance()?.appContext.config.globalProperties.$post; const content = ref(); const info = reactive({ content: "", myedit: 0, }); tinymce.init; // 初始化 const revert_data = (content) => { context.emit("update:modelValue", content); }; // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events onMounted(() => { // readonly(); }); return { init, }; }, }; </script>
2.组件中挂载
代码如下（示例）：
import Editor from "@/components/editor.vue";
3.应用富文本
<Editor id="data.id" v-model="data.content" />
总结
Vue中应用富文本编辑器，涉及到多个富文本时需要注意的是动态数据的绑定，建议封装组件来进行使用。tinymce整体而言插件丰富、可扩展性强、页面样式可修改
