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

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

第一步

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

https://www.cnblogs.com/woodyblog/p/6508524.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>


<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 += '
  • '" alt="'+result[i].alt+'" height="150">
  • '
    ; } 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一直是空,下面是截图
    单独提取ueditor多图上传,解决无法获得上传后图片地址_第1张图片
    单独提取ueditor多图上传,解决无法获得上传后图片地址_第2张图片
    单独提取ueditor多图上传,解决无法获得上传后图片地址_第3张图片

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

    你可能感兴趣的:(原创,ueditor,fastDFS)