vue项目引入vue-ueditor-wrap富文本编辑器

第一个步当然就还是引入第三方依赖

npm i vue-ueditor-wrap

引入成功后 我们需要一个UEditor包

这里我上传了这个资源给大家下载

UEditor下载地址

然后我们将下载的文件解压出来

放在项目跟目录下 的 public文件夹 下的 lib文件夹 中

然后在main.js中引入

import VueUeditorWrap from 'vue-ueditor-wrap'ponent('vue-ueditor-wrap', VueUeditorWrap)

然后在App.vue根组件中引入

import Vue from 'vue'import VueUeditorWrap from 'vue-ueditor-wrap'ponent('VueUeditorWrap', VueUeditorWrap)

然后在需要用这个组件的vue文件中可以直接使用

参考代码如下

<template><div><vue-ueditor-wrap v-model="formInline.content" :config="myConfig"></div></template><script>export default {name:"addUser",data(){return {myConfig: {UEDITOR_HOME_URL: `${process.env.BASE_URL}lib/UEditor/`,// 编辑器不自动被内容撑高autoHeightEnabled: false,// 初始容器高度initialFrameHeight: 200,// 初始容器宽度initialFrameWidth: '100%',// 关闭自动保存enableAutoSave: false,imagePopup: true,imageScaleEnabled: true,// toolbarTopOffset:400,autoFloatEnabled: false,serverUrl: ''},formInline:{content: ''}}}methods:{}}</script><style scoped></style>

然后我们的富文本编辑器自然就会出现啦