您好!欢迎来到大秦朝旭资源站
安全运营5

Ueditor网页编辑器给上传后的图片增加一个设置class样式的选项

分类:升级补丁 时间:2023-06-26 13:53 浏览:574
概述
这个用于上传完图片后图片编辑或者 插入网址图片时使用效果图先上一张最终效果图:代码修改第一步:修改html打开:member/editor/ueditor/dialogs/image/目录下的image.html在这段代码下面<div class="row">           &nb
内容

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

效果图

先上一张最终效果图:

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



评论
资讯正文页右侧广告
联系我们
Q Q:1005618718
电话:17792038992
邮箱:1005618718@qq.com
时间:09:00 - 24:00
联系我们