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

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

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

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

效果图

先上一张最终效果图:

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
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

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

百度编辑器(ueditor)添加自定义代码语言格式

    ueditor编辑器中有代码语言支持的功能但有时我们后台使用代码语言把代码加上标签后前端显示的时候可能为用另一个js语言根据pre标签中的语言来显示代码,这个时候就需要在后台自定义一些代码标签标识啦如:我想添加一个

小黑 开发技术2021-05-07

下一篇
我来说两句
抢沙发