uEditor独立图片上传

项目中。上传图片，非常希望有一款比较兼容的查件。

网上找了一些，图片上传立刻显示的js代码，还有uploadify。都会碰到这样那样的不兼容和其它头疼的问题。

后来想，干脆就用php的上传类最干脆。但是却不美观。

觉得ueditor的图片上传不错。

于是到网上搜索了一番。发现，确实有。不过，看不太懂，就照搬了。

不过，ueditor的图片上传其实不是完全的独立。还是需要实例化ueditor这个家伙的，只不过是隐藏了而已。仅仅显示了图片功能。

网上一搜“ueditor独立图片”，很多的，我就不多说了。我只记录我自己理解的，方便以后自己使用。

因为我的是thinkphp框架开发的。所以代码如下：

<include file="Common:header" />
<js file="__ROOT__/Data/ueditor/ueditor.config.js"/>
<js file="__ROOT__/Data/ueditor/ueditor.all.min.js"/>

<script type="text/javascript">
//这个是图片上传的，网上还有附件上传的
    (function($) {
        var image = {
            editor: null,
            init: function(editorid, keyid) {
                var _editor = this.getEditor(editorid);
                _editor.ready(function() {
                    _editor.setDisabled();
                    _editor.hide();
                    _editor.addListener('beforeInsertImage', function(t, args) {
                        $("#" + keyid).val(args[0].src);
                    });
                });
            },
            getEditor: function(editorid) {
                this.editor = UE.getEditor(editorid);
                return this.editor;
            },
            show: function(id) {
                var _editor = this.editor;
                //注意这里只需要获取编辑器，无需渲染，如果强行渲染，在IE下可能会不兼容（切记）
                //和网上一些朋友的代码不同之处就在这里
                $("#" + id).click(function() {
                    var image = _editor.getDialog("insertimage");
                    image.render();
                    image.open();
                });
            },
            render: function(editorid) {
                var _editor = this.getEditor(editorid);
                _editor.render();
            }
        };
        $(function() {
            image.init("myeditor", "upload");
            image.show("image");
        });
    })(jQuery);
</script>
<script type="text/javascript">
//    必须有这个东西，不然，图片上传没法用。如果你独立上传图片，并且需要修改图片路径的话，你就模仿下面的代码
    var editor = UE.getEditor('myeditor', {
        imageUrl: "{:U(GROUP_NAME.'/Cases/upload/')}",
        imagePath: "__ROOT__/Uploads/",
        imageManagerUrl: "{:U(GROUP_NAME.'/cases/imagesManager/')}",
        imageManagerPath: "__ROOT__/",
    });
</script>
<form method='post' action='{:U(GROUP_NAME."/Cases/save")}' enctype="multipart/form-data">
            <table class="table">
                <tbody>
                    <tr>
                        <td class="title_td">标题：</td>
                        <td class="input_td"><input type='text' name='title' style='width: 300px'/></td>
                    </tr>

                    <tr>
                        <td class="title_td">图片：</td>
                        <td class="input_td">
                            <input id="upload" name='upload' type="text" style='width: 300px' value=""/>
                            <script id="myeditor"></script>
                            <input type="button" id='image' value='上传图片'/>

                        </td>
                    </tr>

                    <tr>
                        <td colspan="2">

                                                      <input type='submit' value="提交保存"/></td>

                    </tr>

                </tbody>
            </table>

        </form>
<include file="Common:footer" />