升级补丁
Ueditor网页编辑器给上传后的图片增加一个设置class样式的选项
来源:网络     阅读:1184
网站管理员
发布于 2023-06-26 13:53
查看主页

这个用于上传完图片后图片编辑或者 插入网址图片时使用

效果图

先上一张最终效果图:

1


代码修改

第一步:修改html

打开:member/editor/ueditor/dialogs/image/目录下的image.html

在这段代码下面

<div class="row">                        <label><var id="lang_input_title"></var></label>                        <span><input class="text" type="text" id="title"/></span>                    </div>

加入如图代码:

<div class="row">    <label><var id="lang_input_class"></var>class:</label>    <span><input class="text" type="text" id="class"/></span></div>


最终效果图

2


这样在修改图片的时候就有了class这个文本框可以填写了

第二步:修改js

打开:member/editor/ueditor/dialogs/image/目录下的image.js

找到RemoteImage.prototype下的initContainer: function ()方法

加入:'className': $G('class'),

如图 

3


继续找到:getInsertList: function ()方法
加入:class: data['className'] || '', 

如图 

4


使用方法

代码修改就完成了,测试效果:在编辑器里选中上传的一张图片,点击修改

5


添加class:

6


切换到html源码:

7



免责声明:本文为用户发表,不代表网站立场,仅供参考,不构成引导等用途。 升级补丁 destoon补丁
相关推荐
在宝塔面板中申请域名泛解析通配符SSL证书的解决方案
关于友价OSS远程存储的设置方法
Ueditor网页编辑器给上传后的图片增加一个设置class样式的选项
关于友价商城QQ一键登录最正确的配置方式
【微信授权登录】Scope 参数错误或没有 Scope 权限

首页

消息

购物车

我的