summernote富文本实现图片上移下移功能
创始人
2025-05-28 23:26:25

summernote富文本实现图片上移下移功能

前言:

自己写了一套商品管理系统,商品的详情页维护是使用的summernote富文本。因为在CSDN上使用这个富文本看着还行,没想到自己使用起来太坑了,说多了都是泪啊,各种功能无法实现,但是还好,通过查看源码js,还是实现了我需要的功能。

需求:

在上传图片的时候,我实现了批量复制粘贴图片的功能,但是这样就会存在一个问题,也就是图片的顺序不是按照你选择图片时的顺序来的,而这个编辑器又是不支持移动图片更换位置的,这就会对维护商品资料的员工造成很大的困扰。

想法:

之前我的想法就是在图片上加一个 dragglabe=true属性,并且增加移动触发方法,但是这个编辑器内的图片上有一个遮罩层,无法点击到图片的,所以我就只有在他自带的图片功能上增加按钮了
在这里插入图片描述

实现:

话不多说,上代码
在js文件中搜 floatLeft ,这个是原生里面的图片左移动的按钮,我们需要把上移和下移按钮加到这个移动按钮的后面,所以搜这个按钮

增加按钮的提示

相关内容

热门资讯

记者手记|时代大潮里的笃行与担... 来源:新华社记者手记|时代大潮里的笃行与担当新华社记者韩梁 朱瑞卿 伍岳9月的新德里草木葱郁,阳光热...
被骂 “君子之贼” 高若讷有点...     ◎宋慧敏    北宋景祐三年(1036年)一个春日,谏官高若讷接到一封信,写信人是刚刚入朝任...
烂缦胡同:烟火气里涌动青春创业...     近日,在“全国文化中心建设巡礼”主题采访活动中,北京青年报记者走进北京市西城区牛街街道烂缦胡...
科技赋能实体 金融护航出海     9月9日至13日,2026年中国国际服务贸易交易会(以下简称服贸会)在北京首钢园举办,今年的...
湖北大学最新或2023(历届)...   1、考生自最新或2023(历届)4月1日起可在湖北大学招生信息网(http://zsxx.hub...