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" />