分享好友教程首页教程搜索频道列表

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

2023-06-16 21:4818450
+关注32
核心提示:这个用于上传完图片后图片编辑或者 插入网址图片时使用

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

效果图

先上一张最终效果图:

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


本文标签:#编辑器#百度ueditor
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

10.0开启防盗链后,避坑编辑器不显示图片

    避坑:当服务器开了图片防盗链 , 没有放开不允许空 Refere 访问图片后,在内容编辑器里 ,是无法显示图片的 只有上面红框里的2个编辑器有问题 ,其他3个是好的

小黑 随手记2025-11-17

Sublime Text 快捷键大全

    快捷键按类型分列如下:1、通用home键:光标移动至行首end键:光标移动至行尾:↑↓← →: 上下左右移动光标Alt: 调出菜单Ctrl + Shift + P: 调出命令板(Command Palette)Ctrl + : 调出控制台Ctrl+B:执行程序【she

网络转载 工具相关2022-06-21

DESTOON后台的网站设置打不开一片空白

    再没有动admin目录的情况下,一般是网站配置文件出现了问题,找到根目录下的config.inc.php ,仔细看看文件里有没有多余的代码,不要用txt打开编辑,一定要用代码编辑器修改和保存这里,小黑推荐4款软件

小黑 destoon程序2021-09-27

Ueditor编辑器 自动过滤Style内联样式问题

    请参照教程修改代码进行测试

小黑 开发技术2021-05-07

百度编辑器UEditor关闭css,js,html过滤

    找到 ueditor.config.js 将以下4个字段设置为 false ,更新缓存后即可

小黑 开发技术2021-05-07

下一篇
我来说两句
抢沙发