wang editor Vue使用 + 使用自己方法上传图片

首先附上wang editor的

npm地址 : https://www.npmjs.com/package/vue-wangeditor

使用手册 : https://www.kancloud.cn/wangfupeng/wangeditor3/332599

建议详看使用手册,所有你需要的东西,他都有写到

1. cnpm下载并引用(不再赘述)

2. 在mounted中进行配置:

const editor = new WangEditor("#demo1");// 配置 onchange 回调函数，将数据同步到 vue 中
editor.config.onchange = (newHtml) => {this.editorData = newHtml;this.$emit("change", { val: this.editorData });
};

editor的所有参数以及方法,都存放于editor.config中,可以自己打印看看

editor.config.height = 200; //设定高度
editor.config.zIndex = 500; //设定zIndex

3. 编辑器使用自己的图片上传方法(如果使用编辑器自己的上传方法 ,请参考其他文章中关于设置请求头等内容)

隐藏编辑器插入网络图片
editor.config.showLinkImg = false;let that = this; // this指向提前设定好editor.config.customUploadImg = async function (resultFiles, insertImgFn) {// resultFiles 是 input 中选中的文件列表// insertImgFn 是获取图片 url 后，插入到编辑器的方法// 这里可以判断图片的大小以及格式let data = resultFiles[0];if (data.size > 2 * 1024 * 1024) {that.$message.error("上传图片不能超过2MB!");return false;}const isJpgOrPng = /jpg|png|jpeg|gif|wmf|svg|tiff/.test(data.type);if (!isJpgOrPng) {that.$message.error("请上传图片!");return false;}function (){// 这里就是你自己上传图片的方法// 上传图片，返回结果，将图片插入到编辑器中insertImgFn(returnUrl);}  };

4. 图片上传有alert提示: 某图片大小超出5M ?

其实是编辑器的默认设置大小没有超出5M, 我们可以给他的图片大小设置大一点,这样,只用我们自己的大小校验就可以了

// 将图片大小限制为 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024我这里为了不影响自己的大小判断, 设置成了100000000   --!

5. 创建完成 ,生成

    // 创建编辑器editor.create();editor.txt.html(this.content);// 初始化this.editor = editor;

6.销毁编辑器

    this.editor.destroy();this.editor = null;

wang editor Vue使用 + 使用自己方法上传图片相关推荐

vue用阿里云oss上传图片使用分片上传只能上传100kb以内的解决办法
首先,vue和阿里云oss上传图片结合参考了这位朋友的 https://www.jianshu.com/p/645f63745abd 文章,成功的解决了我用阿里云oss上传图片前的一头雾水. 该大神 ...
vue 项目中使用wangEditor上传图片视频到oos
废话: 最近在做商城后台管理的项目, 商品详情需要使用富文本编辑器, 需要上传图片和上传视频的功能. 关于富文本: 富文本选择: wangEditor , froalaEditor 我个人是喜欢fro ...
浅析 uniapp(Vue) 的接口封装方法
浅析 uniapp(Vue) 的接口封装方法本文将详细讲解封装思路,通过对接口请求进行封装,实现接口引入即用,减少了请求复杂的属性参数,更加关注数据与业务本身. config - 请求地址及相关参数 ...
织梦引用html,html直接引用vue和element-ui的方法
短视频,站群系统,自媒体,达人种草一站服务这篇文章主要介绍了html直接引用vue和element-ui的方法,本文通过实例代码给大家介绍的非常详细,采集软件,对大家的学习或工作具有一定的参考借鉴价 ...
vscode 新建php模板,使用VSCode快速创建vue文件模版的方法介绍
VSCode怎么自定义代码模版?下面本篇文章给大家介绍一下VSCode快速创建vue文件模版的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 修改位置打开vscode首选项- ...
Vue 组件间通信方法汇总
Vue 组件间通信方法汇总 ⭐️ 更多前端技术和知识点,搜索订阅号 JS 菌订阅除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案.文章整理一下父子组件.兄弟组件.祖先后代组件间 ...
vue 中的el表达式_Vue中vue.filter()的使用方法介绍（过滤）
本篇文章给大家带来的内容是关于Vue中vue.filter()的使用方法介绍(过滤),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Vue过滤器 {{msg |msgFormat}} ...
keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处在做电商有关的项目中 ...
[vue] 怎么给vue定义全局的方法
[vue] 怎么给vue定义全局的方法第一种:挂载到Vue的prototype上.把全局方法写到一个文件里面,然后for循环挂载到Vue的prototype上,缺点是调用这个方法的时候没有提示Obj ...

wang editor Vue使用 + 使用自己方法上传图片

wang editor Vue使用 + 使用自己方法上传图片相关推荐

最新文章

热门文章