VUE3.0 富文本编辑器使用教程

前端 VUE3.0
后端 .net

在下载使用的过程中 按照网上的一些教程方法直接引入是没有问题的 但是最终会出现图片无法选择上传的问题 所以这个笔记 还是重点讲一下我遇到的问题和处理解决办法。

1、安装

npm i vue-ueditor-wrap
# 或者
yarn add vue-ueditor-wrap

2、全局引入组件

//引入组件
// 在 main.js 中引入
import VueUeditorWrap from 'vue-ueditor-wrap'
// 全局注册组件
Vue.component('vue-ueditor-wrap', VueUeditorWrap)

3、页面使用

<vue-ueditor-wrap v-model="msg"  :config="myConfig"></vue-ueditor-wrap>

export default {
	data()
	{
		return{
			msg: '',
            myConfig: {
            // 编辑器不自动被内容撑高
            autoHeightEnabled: false,
            // 初始容器高度
            initialFrameHeight: 400,
            // 初始容器宽度
            initialFrameWidth: '100%',
            serverUrl: '',
            UEDITOR_HOME_URL: '/UEditor/'
            }
		}
	}
}

记得在UEditor文件下的ueditor.config.js文件内再设置一下路径

**如果你是和我一样的项目 前后端分离的话 那么 serverUrl这里就需要后端的同事自己写一个控制器 来配置UEditor的参数 **

还有在 jsp文件下的config.json文件 也需要对应的配置一下 这样编辑器的图片上传才能正常使用。

富文本编辑器还有一个很坑的地方 初次加载进来没问题 如果你是从别的页面需要带数据进来并赋值在它的里面的话 那么有时候会出现两个富文本的情况 因为它的逻辑就是 初次加载后 会加载一个富文本 你的数据会再赋值一次 会再加载一次富文本 所以会是两个

解决的方法就是给加一个定时器

setTimeout(() => {
    this.msg = res.data.data.edit_content;
}, 200);

这样就不会再出现这样的问题。