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

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

npm i vue-ueditor-wrap

引入成功后 我们需要一个UEditor包
这里我上传了这个资源给大家下载
UEditor下载地址
然后我们将下载的文件解压出来
放在项目跟目录下 的 public文件夹 下的 lib文件夹 中
然后在main.js中引入

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

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

import Vue from 'vue'
import VueUeditorWrap from 'vue-ueditor-wrap'
Vue.component('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>

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！