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
效果展示