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