安装插件
npm i vue-ueditor-wrap --save
下载文件
vue-ueditor-wrap 作者修定版(https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads)
下载完成的压缩包,修改文件名为 umedit ,并放置项目目录下的public的目录中
在后台也需要放置
后端添加json解析和ueditor
<dependency> <groupId>com.fmjava</groupId> <artifactId>json</artifactId> <version>1.0.0</version> </dependency> <dependency> <groupId>com.fmjava</groupId> <artifactId>ueditor</artifactId> <version>1.0.0</version> </dependency> </dependencies>
组件引用
import VueUeditorWrap from 'vue-ueditor-wrap' // 引用
// 注册组件 components: { VueUeditorWrap },
//html <vue-ueditor-wrap ref="ue" @ready="ready" v-model="msg" :config="config"></vue-ueditor-wrap>
//data数据 msg: '', config: { UEDITOR_HOME_URL: '/umedit/',// 需要令此处的URL等于对应 ueditor.config.js 中的配置。 initialFrameWidth: 1384, initialFrameHeight: 350, // 编辑器不自动被内容撑高 autoHeightEnabled: false, // 上传文件接口 this.API.BASE_SERVER_URL自己后台路径 umedit是复制vue中的umedit serverUrl: this.API.BASE_SERVER_URL+'/umedit/jsp/controller.jsp', },
//调用图片上传方法 ready(ue) { let vm = this; window.UE.Editor.prototype._bkGetActionUrl = window.UE.Editor.prototype.getActionUrl window.UE.Editor.prototype.getActionUrl = function (action) { if (action === 'upload/uploadImage') { return vm.API.BASE_SERVER_URL+'/upload/uploadImage' } else { return this._bkGetActionUrl.call(this, action) } } ue.addListener('ready', () => { this.$emit('getUe', this.msg) }) },
通过this.$refs.ue.value拿到富文本内容