獨立使用UEditor編輯器圖片和文件上傳（調用內置第三方插件swfupload）

最近百度了一下網上的資料並看了一下ueditor的api，整理並測試了一下，發現還真好用，現在和大家分享一下

這里配置了一個正常的ueditor編輯器和編輯器外面的兩個上傳按鈕。

首先引入js文件

<script src="ueditor/ueditor.config.js"></script>
<script src="ueditor/ueditor.all.min.js"></script>

然后在html中放置編輯器，為了不使獨立上傳圖片或者文件影響到正常的編輯器，這里要多設置一個，myEditor是正常使用的編輯器，upload_ue為隱藏的編輯器。

<script type="text/plain" id="myEditor"></script>
<script type="text/plain" id="upload_ue"></script>

分別實例化兩個編輯器，這里只做簡單配置

<script type="text/javascript">
    var editor = UE.getEditor('myEditor', {
        initialFrameWidth: 800,
        initialFrameHeight: 300,
    });
</script>

<script type="text/javascript">
    //重新實例化一個編輯器，防止在上面的editor編輯器中顯示上傳的圖片或者文件
    var _editor = UE.getEditor('upload_ue');
    _editor.ready(function () {
        //設置編輯器不可用
        _editor.setDisabled();
        //隱藏編輯器，因為不會用到這個編輯器實例，所以要隱藏
        _editor.hide();
        //偵聽圖片上傳
        _editor.addListener('beforeInsertImage', function (t, arg) {
            //將地址賦值給相應的input,只去第一張圖片的路徑
            $("#picture").attr("value", arg[0].src);
            //圖片預覽
            $("#preview").attr("src", arg[0].src);
        })
        //偵聽文件上傳，取上傳文件列表中第一個上傳的文件的路徑
        _editor.addListener('afterUpfile', function (t, arg) {
            $("#file").attr("value", _editor.options.filePath + arg[0].url);
        })
    });
    //彈出圖片上傳的對話框
    function upImage() {
        var myImage = _editor.getDialog("insertimage");
        myImage.open();
    }
    //彈出文件上傳的對話框
    function upFiles() {
        var myFiles = _editor.getDialog("attachment");
        myFiles.open();
    }
</script>

最后為了能使文件上傳后把上傳的文件路徑填充到input里面去，要添加偵聽的事件到dialogs\attachment\attachment.html文件中，在editor.execCommand("insertHTML",str);前面添加，filesList是上傳的文件列表，這里只取第一個上傳的文件的地址

editor.fireEvent('afterUpfile', filesList);

最后別忘了添加上傳按鈕

<input type="text" id="picture" name="cover" /><a href="javascript:void(0);" onclick="upImage();">上傳圖片</a>
<input type="text" id="file" /><a href="javascript:void(0);" onclick="upFiles();">上傳文件</a>

配置完畢。

代碼可以在我的小站下載：http://www.holdcode.com/web/details/72