您的当前位置:首页>全部文章>文章详情

【Vue】Antd Pro Vue的使用(十一) —— 富文本编辑器wangeditor的使用(避坑)

CrazyPanda发表于:2024-05-10 20:01:49浏览:273次TAG:

我承认,antd pro vue2是免费的,已经是老版本了,有多老呢,自带的wangeditor竟然是V3.1.1版本的,两年前我用wangeditor的时候已经是V5版本了,V3简直是上古的东西,官网都没有找到V3版本的资料。。。。,

好在最后还是找到了一份V3版本的资料,要不然又要花时间去用新版本了。

wangeditor V3参考资料:https://www.kancloud.cn/wangfupeng/wangeditor3/335782

下面是框架组件的配置:

无标题.png

问题出现的原因:

做商品详情的时候,使用了框架自带的wangeditor,但是V3版本的编辑器,默认只有网络图片,没有本地图片上传,

image.png

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()
    }

配置好后,上传图片直接就出来了

无标题.png

服务端返回数据结构也与新版本编辑器不同

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

无标题.png

猜你喜欢

【Vue】Vue刷新页面的7中方法总结
vue使用中经常会用到刷新当前页面,下面总结一下几种常用的刷新方法,供大家参考。1、 使用 location.reload() 方法进行页面刷新使用 location.reload() 方法可以简单地实现当前页面的刷新,这个方法会重新加载当前页面,类似于用户点击浏览器的刷新按钮。在 Vue 中,可以将该方法绑定到 Vue 实例上,比如在 Vue 的 methods 中添加如下的方法:methods: {   refresh() { &n
发表于:2024-05-07 浏览:412 TAG:
【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模板编译为虚
发表于:2024-04-21 浏览:304 TAG:
【Vue】Vue 单文件组件 (SFC) 规范
简介.vue 文件是一个自定义的文件类型,用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>,还允许添加可选的自定义块:
发表于:2024-03-29 浏览:272 TAG:
【Vue】vue中sync作用
vue 中的 sync 修饰符用于在父组件和子组件之间实现双向数据绑定。它通过生成一个 v-model 指令,将子组件的 prop 与父组件的 prop 绑定在一起,从而实现数据同步。用法如下:1. 在子组件中使用 v-bind:prop.sync="parentprop",其中 prop 是子组件的 prop 名称,parentprop 是父组件绑定的 prop 名称。Vue 中 sync 作用在 Vue 中,sync 修饰符是一种特殊的语法糖,它允许在父组件和子组件之间进
发表于:2024-05-16 浏览:236 TAG:
【Vue】vue中destroy应用于什么场景
vue 中 destroy 方法用于销毁 vue 实例,释放其资源,应用场景有:组件销毁;页面路由切换;手动释放资源;避免内存泄漏。Vue 中 destroy 的应用场景Vue 中的 destroy 方法用于销毁一个 Vue 实例,释放其占用的资源。以下是一些常见的 destroy 应用场景:1. 组件销毁当一个组件不再需要时,可以使用 destroy 方法将其销毁,例如:this.$destroy();登录后复制2. 页面路由切换当页面路由切换时,旧的 Vue 实例需要被销毁,以释放其资源。可
发表于:2024-05-16 浏览:249 TAG:
【Vue】vue中哪些属性可以写异步方法
vue 中可以利用 methods 和 computed 属性定义异步方法。methods: 1. 定义异步方法,使用 async/await 处理异步请求。2. 返回一个 promise 对象。computed: 1. 定义异步计算属性,使用 async/await 处理异步请求。2. 返回派生数据的 promise 对象。Vue 中支持异步方法的属性在 Vue 中,可以使用 methods 和 computed 属性来定义异步方法。methodsmethods 属性中定义的方法可以包含异步操
发表于:2024-05-16 浏览:207 TAG:
【Vue】Antd Pro Vue的使用(十二) —— 菜单选中高亮显示问题
Antd Pro Vue2这套框架的路由菜单有两个问题,1、页面迁移子页面,父页面对应的菜单未能选中高亮显示2、登录后默认的菜单或页面刷新后原来的菜单未选中高亮显示网上查到的一些菜单配置都是新版本的,老版本并不支持这些方法,这里总结一下我的解决方法,如果大家有更好的解决方案,欢迎交流。一、解决第一个问题以我的菜单为例商品列表是菜单页面,添加编辑商品是隐藏菜单,我把他们做成了兄弟菜单,而不是子菜单/src/config/router.config.js配置如下然后再/src/layouts/Bas
发表于:2024-05-14 浏览:261 TAG:
【Vue】vue.js怎么定义一个组件
vue.js 中定义组件有三种方法:直接定义在 <script> 标签中并导出组件对象、使用组件工厂函数和 definecomponent 辅助函数创建、使用类定义组件并继承 vue.extend 创建。</script>如何在 Vue.js 中定义组件一、直接定义1. 在 <script></script> 标签中,使用 export default {} 导出组件对象:<code class="html"&g
发表于:2024-04-21 浏览:236 TAG:
【Vue】Vue定义全局变量的方法
在Vue项目中我们需要使用许多的变量来维护数据的流向和状态,这些变量可以是本地变量、组件变量、父子组件变量等,但这些变量都是有局限性的。在一些场景中,可能需要在多个组件中共享某个变量,此时全局变量就派上了用场。定义全局变量的方法1. 使用Vue.prototype定义全局变量通过在 vue 的原型上定义属性,可以在所有组件中访问该属性。在main.js定义全局变量// main.jsVue.prototype.baseUrl = "https://www.example.com/api
发表于:2024-04-22 浏览:352 TAG:
【Vue】Vue 前后端分离部署方案
方案 1:Docker创建两个 Docker 容器,一个用于后端,一个用于前端。在后端容器中运行 API 代码。在前端容器中运行 Vue 应用程序并将其打包为静态文件(如 HTML、CSS 和 JS)。方案 2:Nginx 代理安装 Nginx Web 服务器作为反向代理。将后端 API 路由到 Nginx。Nginx 将前端静态文件提供给客户端。方案 3:Node Express使用 Node Express 作为后端框架,它可以将静态文件与 API 路由一起托管。在 Express 应用程序
发表于:2024-05-19 浏览:248 TAG: