【Vue】Antd Pro Vue的使用(十一) —— 富文本编辑器wangeditor的使用(避坑)
CrazyPanda发表于:2024-05-10 20:01:49浏览:273次
我承认,antd pro vue2是免费的,已经是老版本了,有多老呢,自带的wangeditor竟然是V3.1.1版本的,两年前我用wangeditor的时候已经是V5版本了,V3简直是上古的东西,官网都没有找到V3版本的资料。。。。,
好在最后还是找到了一份V3版本的资料,要不然又要花时间去用新版本了。
wangeditor V3参考资料:https://www.kancloud.cn/wangfupeng/wangeditor3/335782
下面是框架组件的配置:
问题出现的原因:
做商品详情的时候,使用了框架自带的wangeditor,但是V3版本的编辑器,默认只有网络图片,没有本地图片上传,
1、 上传本地图片配置
根据资料提示,只需要配置上图片上传接口uploadimgServer就可以了(项目时间紧,我就先不研究新版本的使用了)
找到文件 /src/components/Editor/WangEditor.vue,做如下配置
initEditor () { this.editor = new WEditor(this.$refs.editor) // this.editor.onchangeTimeout = 200 // 图片上传接口 this.editor.customConfig.uploadImgServer = '/index.php/common/common/editor_upload_file' this.editor.customConfig.onchange = (html) => { this.editorContent = html this.$emit('change', this.editorContent) } this.editor.create() }
配置好后,上传图片直接就出来了
服务端返回数据结构也与新版本编辑器不同
V3版本的返回数据
{ // errno 即错误代码,0 表示没有错误。 // 如果有错误,errno != 0,可通过下文中的监听函数 fail 拿到该错误码进行自定义处理 "errno": 0, // data 是一个数组,返回若干图片的线上地址 "data": [ "图片1地址", "图片2地址", "……" ]}
新版本的返回数据
{ // errno 即错误代码,0 表示没有错误。 // 如果有错误,errno != 0,可通过下文中的监听函数 fail 拿到该错误码进行自定义处理 "errno": 0, // data 是一个数组,返回若干图片的线上地址 "data": [ "url": '' ]}
大家有条件的还是尽早升级新版本使用
2、 隐藏网络图片
配置:
this.customConfig.showLinkImg = false
猜你喜欢
- 【Vue】Vue刷新页面的7中方法总结
- vue使用中经常会用到刷新当前页面,下面总结一下几种常用的刷新方法,供大家参考。1、 使用 location.reload() 方法进行页面刷新使用 location.reload() 方法可以简单地实现当前页面的刷新,这个方法会重新加载当前页面,类似于用户点击浏览器的刷新按钮。在 Vue 中,可以将该方法绑定到 Vue 实例上,比如在 Vue 的 methods 中添加如下的方法:methods: { refresh() { &n
- 【Vue】vue框架怎么运行
- vue.js是一个用于构建用户界面的javascript框架,其工作原理包括:模板编译:将html模板编译为vdom;响应式系统:检测数据变化并更新vdom;dom更新:有效更新dom,最小化操作次数;自动渲染:监视数据变化并自动重新渲染ui。Vue.js框架的工作原理Vue.js是一个用于构建用户界面(UI)的JavaScript框架。它采用“响应式”系统,当数据发生变化时,框架会自动更新UI,简化了Web开发过程。Vue.js框架的工作流程:1. 模板编译:Vue.js将HTML模板编译为虚
- 【Vue】Vue 单文件组件 (SFC) 规范
- 简介.vue 文件是一个自定义的文件类型,用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>,还允许添加可选的自定义块:
- 【Vue】vue中sync作用
- vue 中的 sync 修饰符用于在父组件和子组件之间实现双向数据绑定。它通过生成一个 v-model 指令,将子组件的 prop 与父组件的 prop 绑定在一起,从而实现数据同步。用法如下:1. 在子组件中使用 v-bind:prop.sync="parentprop",其中 prop 是子组件的 prop 名称,parentprop 是父组件绑定的 prop 名称。Vue 中 sync 作用在 Vue 中,sync 修饰符是一种特殊的语法糖,它允许在父组件和子组件之间进
- 【Vue】vue中destroy应用于什么场景
- vue 中 destroy 方法用于销毁 vue 实例,释放其资源,应用场景有:组件销毁;页面路由切换;手动释放资源;避免内存泄漏。Vue 中 destroy 的应用场景Vue 中的 destroy 方法用于销毁一个 Vue 实例,释放其占用的资源。以下是一些常见的 destroy 应用场景:1. 组件销毁当一个组件不再需要时,可以使用 destroy 方法将其销毁,例如:this.$destroy();登录后复制2. 页面路由切换当页面路由切换时,旧的 Vue 实例需要被销毁,以释放其资源。可
- 【Vue】vue中哪些属性可以写异步方法
- vue 中可以利用 methods 和 computed 属性定义异步方法。methods: 1. 定义异步方法,使用 async/await 处理异步请求。2. 返回一个 promise 对象。computed: 1. 定义异步计算属性,使用 async/await 处理异步请求。2. 返回派生数据的 promise 对象。Vue 中支持异步方法的属性在 Vue 中,可以使用 methods 和 computed 属性来定义异步方法。methodsmethods 属性中定义的方法可以包含异步操
- 【Vue】Antd Pro Vue的使用(十二) —— 菜单选中高亮显示问题
- Antd Pro Vue2这套框架的路由菜单有两个问题,1、页面迁移子页面,父页面对应的菜单未能选中高亮显示2、登录后默认的菜单或页面刷新后原来的菜单未选中高亮显示网上查到的一些菜单配置都是新版本的,老版本并不支持这些方法,这里总结一下我的解决方法,如果大家有更好的解决方案,欢迎交流。一、解决第一个问题以我的菜单为例商品列表是菜单页面,添加编辑商品是隐藏菜单,我把他们做成了兄弟菜单,而不是子菜单/src/config/router.config.js配置如下然后再/src/layouts/Bas
- 【Vue】vue.js怎么定义一个组件
- vue.js 中定义组件有三种方法:直接定义在 <script> 标签中并导出组件对象、使用组件工厂函数和 definecomponent 辅助函数创建、使用类定义组件并继承 vue.extend 创建。</script>如何在 Vue.js 中定义组件一、直接定义1. 在 <script></script> 标签中,使用 export default {} 导出组件对象:<code class="html"&g
栏目分类全部>