Vue 百度富文本 多图上传顺序错乱的问题

最新推荐文章于 2024-09-12 16:22:24 发布
最新推荐文章于 2024-09-12 16:22:24 发布
阅读量1.2k 收藏
点赞数 2
分类专栏： 项目问题 文章标签： ueditor 百度富文本 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hailangtuteng/article/details/102958962
版权

最近使用Vue工程+百度富文本ueditor碰到一个需求 需要解决多图上传图片排序的问题  参考一篇文章可以完美解决 文章连接丢失。。。

多图上传写入文本框的图片顺序和上传的顺序不一致

修改两个地方第一个 ueditor/dialogs/image/image.js 把 _this.imageList.push(json);改为_this.imageList[$file.index()] = json

第二个地方ueditor/dialogs/attachment/attachment.js 把_this.fileList.push(json) 改为_this.fileList[$file.index()] = json;

这样就ok了 

树沙&
关注
专栏目录
vue2editor富文本编辑器（图片拖拽）
落下香樟树
10-23 2136
富文本编辑器vue2-editor 在后台管理系统开发的过程中，富文本编辑器是经常会用到的一种文本编辑工具。目前主流的富文本编辑器有很多，但总有一款是符合自己需求的。在周末花费了大约半天的时间，尝试了许多富文本编辑器，大体上功能都相差无几。主要是对富文本中图片的处理，各个种类的富文本对图片的处理差异还是挺大的。此处的所说的图片处理指的是图片的大小调整、位置调整、是否可以拖拽等。此次我使用的富文本编辑器是vue2-editor ,并结合实际情况进行了相应调整。 vue2-editor 富文本编辑器是基于 vu
富文本图片怎么上传_百度ueditor富文本插件多图片上传顺序混乱问题
weixin_39999222的博客
01-27 442
问题：上传后，图片的顺序和预期的不一致，需要修改ueditor的源码。百度富文本编辑器是按照图片先上传完成先显示来排序，显然跟我们选择好排序不一致（因为图片有大小）。解决：显示以及上传窗口涉及到编辑器的两个文件image.js和attachment.js这两个JS文件。一、找到editor/dialogs/attachment/attachment.js文件，将_this.fileList.pus...
vue中使用富文本编辑器
m0_56344834的博客
09-10 2664
封装富文本编辑器，使用的是第三方插件。
百度ueditor富文本--配置图片上传
热门推荐
直到世界的尽头
08-24 4万+
我们在之前的文章中已经学习了如何 初始化百度ueditor富文本编辑器:百度ueditor富文本--PC端单个，PC端多个，mobile单个，mobile多个官网对编辑器的初始化和使用文档是比较详细的，这里就不多说了。本小节 主要记录一下 在初始化完编辑器之后  配置启用 编辑器中的 图片上传插件。项目路径如图:引用jar包在ueditor的资源包中我们看到jsp文件夹里有lib文件夹和jar包。
vue 富文本编辑器多图上传按顺序排列
qq_49552046的博客
11-25 1079
因为我是在原有老项目上开发的使用的组件库是ant-design-vue 1x版，当然使用其他组件库也可以。然后还有重要的一步需要引入jquery后面有地方需要用到（后面因为找到更好的方法不引入也可以）首先我使用的富文本编辑器是vue-quill-editor。排序使用图片拖动来排序使用vuedraggable。组件库用的Ant Design Vue。最后的效果会按照图片顺序排列在富文本框。当然也可以按照官方的方法下载，使用npm进行下载jquery。
vue element-ui的table排序错乱问题,完美解决
weixin_47426048的博客
04-16 4353
表格组件排序是依赖绑定的prop的 我这里prop是自定义的数据,解决思路,修改数据本身,添加自定义字段绑定prop如图:
详解vue中使用vue-quill-editor富文本小结（图片上传）
10-17
通过这种方式，我们不仅能够利用vue-quill-editor创建富文本，还能与Element UI的Upload组件配合，实现在富文本编辑器中上传图片的功能，同时解决了图片数据过大可能导致的提交问题。在实际开发中，你可能还需要处理...
vue-quill-editor富文本编辑器实现多图片上传到服务器
weixin_30243533的博客
06-24 3883
vue-quill-editor是一个简单实用的富文本编辑器（官网），内置提供quill-image-extend-module模块（地址）支持图片上传图片到服务器而不是生成base64，但是有个明显的缺陷是只能上传一张（即使不用这个插件也只能上传一张生成base64 =。=）, 这是个明显缺陷，而且操作后台的运营肯定不干（我™辛辛苦苦整理好的商品详情图片列表你让我一个个上传？），所以还是要多图片...
超详细！在vue 中二次封装 wangEditor 富文本
小白菜的博客
07-02 1773
在vue 中二次封装 wangEditor 富文本 wangEditor真的非常简洁好用，而且一直有更新，缺点就是文档内容比较少。 wangEditor文档链接 看网上很多二次封装都把逻辑放到 mounted 中，对于新手的我不太友好，逻辑不太清晰。决定自己封装一个。将各配置以方法分割，在初始化调用。 //以下是封装的组件 SimpleEditor <template> <div> <div ref="editor" style="text-align:
百度编辑器多图上传后顺序错乱
king2wang的博客
05-09 679
使用百度编辑器进行多图上传时，发现上传完成后的顺序错乱了， 这时我们需要修改一下百度编辑器的两个文件，一个ueditor/dialogs/image/image.js，一个ueditor/dialogs/attachment/attachment.js 1.image.js 2.attachement.js ...
若依(ruoyi)前后端分离版实现图片上传拖拽修改图片大小（公告页面）
12-17
在公告页面中，这样的功能可以提高用户编辑公告时的便捷性，特别是当需要上传多张图片并调整布局时。不过，需要注意的是，拖拽修改大小仅是前端的显示效果，实际存储在服务器上的图片大小并不会改变。如果需要服务器...
vue+nodejs实现图片上传并顺序浏览
GSF的博客
01-06 673
话说前面,此篇是为了给我个人笔记,也给朋友们做个思路参考 前端部分用了vue+elementUI 后端部分用了nodejs,expre ss框架,multer中间件,cors中间件消除跨域 想了半天不知道咋写 直接贴代码吧 前端部分 <template> <div> <el-upload ref="upload" action="http://119.91.217.109:8887/upload" list-ty
vue-quill-editor 多个富文本编辑器 点击上传图片所遇到的坑
weixin_39078894的博客
03-12 1237
<template> <div> <el-row> <!-- myQuillEditor --> <quill-editor v-model="content" class="qediter" ref="myQuillEditor" :options="editorOption" @change="onEditorChange($event)" @focus="onEdi.
vue 解决遍历对象显示的顺序不对问题
10-16
今天小编就为大家分享一篇vue 解决遍历对象显示的顺序不对问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue push时对象错乱_谈谈Vue.use的原理
weixin_39775976的博客
11-21 251
前言❤️文章最后有福利哦！使用过 Vue 的童鞋都见过这个 Vue.use() 的方法,但是有没有想过为什么这个方法需要这个方法来使用插件呢？ 官方 介绍有4中四种为Vue添加全局功能的方法:1.添加全局方法或 propertyVue.myGlobalMethod = function () { // 逻辑... } 复制代码2. 添加全局资源Vue.directive('my-dir...
百度ueditor富文本插件多图片上传顺序混乱问题
最新发布
ivneptune的博客
09-12 104
考虑上传失败的情况，加上一个判断，避免在上传失败后，数组中出现undefined项，需要修改getInsertList方法。同样考虑上传失败的情况，加上一个判断，避免在上传失败后，数组中出现undefined项，需要修改getInsertList方法。（毕竟Js一些奇葩bug或者问题就是缓存惹的），笔者使用过程中就遇到过，修改代码保存后没有任何效果的情况。是按照图片先上传完成先显示来排序，显然跟我们选择好排序不一致（因为图片有大小）。（备注）方法实现有效，不过测试的过程需要注意清除项目缓存或者。
Vue2 - 详细实现解析富文本内容生成侧边栏Toc目录索引，识别富文本内容根据标题h1~h6自动生成文章目录，点击目录导航时跳转到文章内容对应的锚点位置带过渡动画，鼠标滚动内容滑过锚点时高亮对应标题
王佳斌
08-26 3273
vue2，nuxt2，文章目录锚点，滚动高亮导航文字，根据页面滚动高亮显示目录的侧边栏，自动提取标题生成右侧目录，实现监听滚动，锚点定位，文章目录滚动跟随高亮，右边菜单点击目录滚动到对应标题，滚动页面的时候文章目录跟着选中效果，侧边栏滚动跟随页面，右边目录固定,左边内容可以滚动并且与左边目录联动，富文本，h1-h6，文章内容，根据文章h标签，自动生成一个目录树，自动生成Toc目录，博客内容生成目录索引，资讯文章，生成锚点目录树TOC，详细示例代码教程，识别文章的大标题，解析生成目录导航，目录菜单点击定位到指
Vue Element UI 之富文本图片上传服务器 + 图片地址插入富文本
倚树探星的博客
03-17 3379
该案例的情况 vue版本：vue cli3 插件：vue-quill-editor vue-quill-editor的增强模块：quill-image-extend-module quill-image-extend-module功能： 提供图片上传到服务器的功能 复制插入 显示上传进度 显示上传成功或者失败 文章目录一、选择这种方式的来龙去脉（读者可自行跳过）二、实现2.1 安装插件2....
【Vue】多图上传时，选择的图片顺序和展示的图片顺序不一致
baidu_hxl的博客
07-21 4194
问题分析： 上传多图时，由于上传后台的时间不同，导致上传时选择的图片和返回显示的图片顺序不一致。 栗子在现： 选择顺序依次为：花-1、花-2、花-3、花-4 返回顺序依次为：花-2、花-4、花-3、花-1 解决方法： 上传开始时：记录下上传时的图片信息顺序 uploadFiles (files) { let postFiles = Array.prototype.slice.call(files) if (!this.multiple) postFiles =
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值