Vue3使用tinymce富文本编辑器
tinymce中文文档：http://tinymce.ax-/
首先下载我的Demo到你的本地，Demo地址：/szxio/tinymce-editor
第一步：将我项目中的public下的tinymce文件夹复制到你的public目录中去
第二步：复制src/components下的TinymceEditor组件到你的项目中
第三步：使用，下面是一个案例代码
<template><div class="d-flex"><div style="width: 50%"><TinymceEditor v-model="content" @input="inputContent"/></div><div class="right" v-html="content"></div></div></template><script setup>import {ref} from 'vue'import TinymceEditor from "../components/TinymceEditor"const content = ref("Hello World")const inputContent = (newVal) => {console.log(newVal)content.value = newVal}</script><style scoped lang="scss">.d-flex {display: flex;gap: 10px;.right {flex: 1;box-shadow: 0 1px 10px 3px #dbdbdb;margin-right: 10px;padding: 10px;box-sizing: border-box;}}</style>
最后在你的项目中安装依赖，启动看效果
npm i @tinymce/tinymce-vue
效果展示
