wangeditor：一个页面使用多个wangeditor编辑器，并对wangeditor进行组件封装以及上传图片到自己的服务器

wangeditor使用文档：https://www.kancloud.cn/wangfupeng/wangeditor3/332599
这里记录两个地方
1.如何在富文本编辑器中上传图片到自己的服务器
2.对富文本编辑器进行组件封装，并在一个页面使用多个编辑器
一、如何在富文本编辑器中上传图片到自己的服务器（只需要两步绝对可以解决问题）
①.首先，关闭网络上传接口

editor.config.showLinkImg = false;

②.完全的控制图片的上传过程，需要使用以下方法

// 自定义上传图片（根据服务端要求，我这里需要把文件流转换成base64格式，这个地方按照自己的接口要求调取接口就可以。）editor.config.customUploadImg = async (files,insertImgFn) => {// 调接口上传图片let reader = new FileReader();reader.readAsDataURL(files[0]);reader.onload = function (e) {console.log(e, 'e-------------------')let base64String = e.target.result;// 此处可对该base64进行获取赋值传入后端console.log("bese64编码：", base64String);imguploading1001({breakdownId: '2c90a7247f6c936801815adac7600143',//故障idimageType: '1',imageBase64: base64String}).then((res) => {console.log(res.data.reportedImage, 'res==>> img upload')this.bdimgurl = res.data.reportedImage.imageUrlinsertImgFn(this.bdimgurl)})}}

二、组件封装以及一个页面使用多个富文本编辑器
①、我们知道获取编辑器对象是通过ref来获取的,所以在父组件中使用子组件的时候。需要动态的把ref传递到子组件。

let editor = new wangEdit(this.$refs.ref1);

②、父传子
父组件：

<template><div><button type="button" @click="submit">提交</button><div><Edit :refmsg="ref1" ref="ref1"></Edit><Edit :refmsg="ref2" ref="ref2"></Edit><Edit :refmsg="ref3" ref="ref3"></Edit></div></div>

子组件：

<template><div style="width: 100%;height: 500px"><div class="mo-wang-editor" :ref="refmsg" ></div></div>
</template>

子组件用props接收后，在mounted钩子中获取wangeditor对象。调取自定义的上传接口，进行图片上传，并插入图片到编辑器中。
③、监听数据变化，给editor对象上添加value属性，并把当前值绑定上去。

//监听数据变化editor.config.onchange = (newHtml) => {this.$emit('change', newHtml);editor.config.value = newHtml};

④、在父组件中就可以拿到了

当点击提交时，通过refs获取子组件的vue对象，就能拿到我们刚刚绑定的值了，我这里一个页面使用了三个富文本组件。

 submit() {console.log(this.$refs.ref1.editor.config.value)console.log(this.$refs.ref2.editor.config.value)console.log(this.$refs.ref3.editor.config.value)},

⑤、拿到所有的值了，就可以定义字段给服务端传参了。

wangeditor：一个页面使用多个wangeditor编辑器，并对wangeditor进行组件封装以及上传图片到自己的服务器相关推荐

一个页面是否应该全部组件化
一个页面是否应该全部组件化颗粒化,我们知道通常我们组件化的时候是因为某一块功能可以复用,然后我们把它封装为组件,而对于一个界面中大部分属于业务的代码我们通常不会将他进行组件化,这个时候如果一个页面功 ...
SSM开发书评网29：后台二：wangEditor图片上传；（主要内容是【wangEditor图片上传的文档要求】，【Spring MVC整合FileUpload组件，以实现文件上传功能】）
说明: (1)本篇博客内容说明:[在后台系统,我们点击新增按钮后,会弹出新增图书对话框]→[该对话框中,包含一个wangEditor富文本编辑器]→[wangEditor富文本编辑器中,可以包含图片] ...
开发谷歌浏览器插件会上瘾，搞了一个JSONViewer，一个页面格式化多条JSON，提升工作效率...
最近写了一个谷歌浏览器插件(Chrome extension),拿出来分享下,希望能提升大家的工作效率. 一.背景先说痛点:日常开发中,经常需要不停的把接口输出的JSON拷贝到在线JSON格式化页面 ...
HTML做跳转另一个页面链接,html中如何链接到另一个页面
如何将一个html页面中嵌入另一个html页面将一个html页面中嵌入另一个html页面需要使用到iframe标签. iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌 ...
如何提取PDF文档中的一个页面
有的时候我们在做PDF文档觉得这个PDF文档中某一个页面很独特还很重要,就想把单独拿出来.但是那么多PDF文档我们该怎么提取出来呢?我们有的不会的,就会傻傻的去把那个重要的页面重新编辑出来做成一个新的 ...
如何解决用谷歌浏览器调试代码接口请求的时候，跳转网页切换网页的时候，上一个页面的接口请求记录被清除消失的问题
经常我们在测试接口的返回报文的时候,可能是存在于不同网页的跳转过程中,但是浏览器默认的设置是只要一跳转页面,上一个页面的请求记录就没了,是不是很烦人,有时候我们还有以迅雷不及掩耳盗铃之势把浏览器的接口 ...
商品列表选择尺寸和颜色高亮，并且把选择的数据传递到下一个页面
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 需求:商品列表选择属性,给中的属性显示高亮,并且把选择的数据记录下来传递到下一个页面. 项目下载地址:点击去下 ...
react 返回一个页面_Fiber 内部: 深入理解 React 的新 reconciliation 算法
最近在看 React, 发现一篇深度好文, 忍不住就翻译了. React 是一个用于构建用户界面的库, 它的核心是跟踪组件状态变化并将它们更新到页面上. 在 React 中, 我们称这个过程为 rec ...
php调用另一个页面内容,php怎么实现调用另一个页面
php怎么实现调用另一个页面发布时间:2020-07-03 16:57:33 来源:亿速云阅读:77 作者:Leah php怎么实现调用另一个页面?针对这个问题,这篇文章详细介绍了相对应的分析和解 ...

wangeditor：一个页面使用多个wangeditor编辑器，并对wangeditor进行组件封装以及上传图片到自己的服务器

wangeditor：一个页面使用多个wangeditor编辑器，并对wangeditor进行组件封装以及上传图片到自己的服务器相关推荐

最新文章

热门文章