单独提取ueditor多图上传，解决无法获得上传后图片地址

最新推荐文章于 2020-11-20 10:48:20 发布

捏捏小脸蛋

最新推荐文章于 2020-11-20 10:48:20 发布

阅读量3.7k

点赞数 1

分类专栏：原创 ueditor，fastDFS

本文链接：https://blog.csdn.net/kh717586350/article/details/79041939

版权

原创同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

ueditor，fastDFS

3 篇文章 0 订阅

订阅专栏

提取ueditor的多图上传功能整了好长时间，最后发现是官方文件错误了，感觉没爱了(╥╯^╰╥)，好了，还是先看怎么解决的吧

第一步

网上找了好多相关文章，最后发现只有两篇，大多是互相转载的。
我选的这篇，去掉了附件上传功能，保留需要的多图上传

https://www.cnblogs.com/woodyblog/p/6508524.html

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>外部调用UEditor的多图上传和附件上传</title>
    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script>
    <style>
        ul{display: inline-block;width: 100%;margin: 0;padding: 0;}
        li{list-style-type: none;margin: 5px;padding: 0;}
    </style>
</head>
<body>
<h1>外部调用UEditor的多图上传和附件上传示例</h1>

<button type="button" id="j_upload_img_btn">多图上传</button>
<ul id="upload_img_wrap"></ul>

<!-- 加载编辑器的容器 -->
<textarea id="uploadEditor" style="display: none;"></textarea>

<!-- 使用ue -->
<script type="text/javascript">

    // 实例化编辑器，这里注意配置项隐藏编辑器并禁用默认的基础功能。
 var uploadEditor = UE.getEditor("uploadEditor", {
        isShow: false,
        focus: false,
        enableAutoSave: false,
        autoSyncData: false,
        autoFloatEnabled:false,
        wordCount: false,
        sourceEditor: null,
        scaleEnabled:true,
        toolbars: [["insertimage", "attachment"]]
    });

    // 监听多图上传和上传附件组件的插入动作
    uploadEditor.ready(function () {
        uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
    });

    // 自定义按钮绑定触发多图上传和上传附件对话框事件
    document.getElementById('j_upload_img_btn').onclick = function () {
        var dialog = uploadEditor.getDialog("insertimage");
        dialog.title = '多图上传';
        dialog.render();
        dialog.open();
    };

    // 多图上传动作
    function _beforeInsertImage(t, result) {
        var imageHtml = '';
        for(var i in result){
            imageHtml += '<li><img src="'+result[i].src+'" alt="'+result[i].alt+'" height="150"></li>';
        }
        document.getElementById('upload_img_wrap').innerHTML = imageHtml;
    }
</script>
</body>
</html>

需要注意的是取result的属性值是ueditor编辑后的属性名，固定的src和alt属性，可以自行打印result查看

第二步

修改官方image.js文件(路径：ueditor/dialogs/image)
1.在107行添加我们自定义的回调函数：editor.execCommand(‘insertimage’, list);

这个和我们页面代码对应的是：_beforeInsertImage(t, result){}
修改初始化确定按钮(onok事件)函数，意思大概就是在插入图片到富文本编辑器之前执行我们自定义的函数，获得上传成功后的图片信息list

2.修改大约724行：if (json.state.toUpperCase() == ‘SUCCESS’) { //状态返回的是小写，转换成大写后比较

主要是讲json中的state属性值转换为大写(就是这个鬼东西，浪费我好长时间)，因为在调试的时候发现是小写，所以imageList一直是空，下面是截图
这里写图片描述

参考：
https://www.cnblogs.com/lhm166/articles/6079973.html
https://www.cnblogs.com/pcx105/p/7717028.html
转载请标注：http://blog.csdn.net/KH717586350

捏捏小脸蛋

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
单独提取ueditor多图上传，解决无法获得上传后图片地址

提取ueditor的多图上传功能整了好长时间，最后发现是官方文件错误了，感觉没爱了(╥╯^╰╥)，好了，还是先看怎么解决的吧第一步网上找了好多相关文章，最后发现只有两篇，大多是互相转载的。我选的这篇，去掉了附件上传功能，保留需要的多图上传 https://www.cnblogs.com/woodyblog/p/6508524.htmlhtml lang="zh
复制链接

扫一扫