summernote富文本实现图片上移下移功能
前言:
自己写了一套商品管理系统,商品的详情页维护是使用的summernote富文本。因为在CSDN上使用这个富文本看着还行,没想到自己使用起来太坑了,说多了都是泪啊,各种功能无法实现,但是还好,通过查看源码js,还是实现了我需要的功能。
需求:
在上传图片的时候,我实现了批量复制粘贴图片的功能,但是这样就会存在一个问题,也就是图片的顺序不是按照你选择图片时的顺序来的,而这个编辑器又是不支持移动图片更换位置的,这就会对维护商品资料的员工造成很大的困扰。
想法:
之前我的想法就是在图片上加一个 dragglabe=true属性,并且增加移动触发方法,但是这个编辑器内的图片上有一个遮罩层,无法点击到图片的,所以我就只有在他自带的图片功能上增加按钮了
实现:
话不多说,上代码
在js文件中搜 floatLeft ,这个是原生里面的图片左移动的按钮,我们需要把上移和下移按钮加到这个移动按钮的后面,所以搜这个按钮
增加按钮的提示
效果:
添加按钮方法
注意我圈出来的地方,也可以完全按照我写的来
//秦二少增加-上移
this.context.memo('button.qkUp', function () {