百度Ueditor多图片上传控件

时间：2014-05-09 19:43:02 阅读：371 评论：0 收藏：0 [点我收藏+]

发现百度的Ueditor富文本编辑器中的多图片上传控件很不错，于是便想着分享出来使用，费了老劲，少不了无名朋友的帮助，也查了不少资料，终于搞定了

发代码给大家，请大家多多指正

1.首先要在html页面中添加对ueditor的脚本引用

<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="../public/ueditor/editor_all_min.js" type="text/javascript"></script>
    <script src="../public/ueditor/editor_config.js" type="text/javascript"></script>
    <link href="../public/ueditor/themes/default/css/ueditor.css" rel="stylesheet" type="text/css" />

2.添加多图片上传控件的单独调用，最原始的代码是无名朋友写的，缺少在线预览。这是加上以后的代码，尽量写得完整一点。

<table id="table_edit" cellpadding="0" cellspacing="0">
        <tr>
            <td class="td_left">
                文章主图
            </td>
            <td>
                <input type="button" id="btn_uploadimgs" onclick="upImage();" value="上传图片" style="width: 153px;
                    height: 30px;" />                
　　　　　　　　　<script type="text/javascript">
                    var myEditorImage;
                    var d;
                    function upImage() {
                        d = myEditorImage.getDialog("insertimage");
                        d.render();
                        d.open();
                    }
                    myEditorImage = new UE.ui.Editor();
                    myEditorImage.render(‘myEditorImage‘);
                    myEditorImage.ready(function () {
                        myEditorImage.setDisabled();
                        myEditorImage.hide();
                        myEditorImage.addListener(‘beforeInsertImage‘, function (t, arg) {
                            if (arg.length > 0) {
                                var tr = document.getElementById("tr_Article_Img");
                                $("#tr_Article_Img").show();
                                $("#img_Article_Img").attr("src", arg[0].src);
                                var imgsrc = arg[0].src;
                                var src = imgsrc.substr(imgsrc.indexOf("uploadfiles"), imgsrc.length);
                                $("#Article_Img").val(src);
                            }
                        });
                    });
                </script>
            </td>
        </tr>
        <tr id="tr_Article_Img" style="display: none;">
            <td valign="top" class="td_left">
                文章主图
            </td>
            <td style="padding: 7px; padding-left: 15px;">
                <img id="img_Article_Img" alt="" src="" />
                <input id="Article_Img" name="Article_Img" type="hidden" />
            </td>
        </tr>
    </table>