使Ueditor的图片批量上传功能上传后自动排版

最新推荐文章于 2021-11-02 15:53:09 发布

踏平扶桑

最新推荐文章于 2021-11-02 15:53:09 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Ueditor

本文链接：https://blog.youkuaiyun.com/wdw984/article/details/80705679

Ueditor 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何修改UEditor的image.js文件实现批量上传图片后自动排版为两列多行的形式，减轻编辑人员的工作负担。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认的Ueditor批量上传，上传后是一竖溜排下来。现在想做成批量上传后，可以自动按照规则排好版，减少排版工作量。

修改内容，修改Ueditor目录下的/editor/dialogs/image/image.js

在 /* 初始化onok事件 */ 中找到

if (list)

{

……

}

修改成如下代码：

if (list) {
                var table = $("<table style=\"width:100%\"></table>")
                var i = 1;
                var tr = $("<tr></tr>");
                var td;
                var isAddTable = 0;
                $(list).each(function (index, item) {
                    td = $("<td style=\"text-align:center;height:271px\"></td>");
                    if (i % 2 == 0) {
                        //两张图片，写入tr
                        $(tr).append($(td));
                        $(table).append($(tr));
                        $(table).append($("<tr><td style=\"text-align:center;\">图片描述</td><td style=\"text-align:center;\">图片描述</td></tr>"));
                        tr = $("<tr></tr>");
                        $(td).append($("<img width='400px' height='270px' src=\"" + item.src + "\" />"));
                        i = 0;
                        isAddTable = 1;
                    }
                    else {                        
                        $(td).append($("<img width='400px' height='270px' src=\"" + item.src + "\" />"));
                        $(tr).append($(td));
                        isAddTable = 0;
                    }                    
                    i = i + 1;
                    //console.log(item);
                });
                if (isAddTable == 0) {
                    $(tr).append($(td));
                    $(table).append($(tr));
                } 
                editor.execCommand('inserthtml', $(table).prop("outerHTML")); 
                remote && editor.fireEvent("catchRemoteImage");
            }

这样批量上传图片后，点击确定，就会自动按照两列多行的模式进行自动排版。