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

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

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

首先引入js文件

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

而後在html中放置編輯器，爲了避免使獨立上傳圖片或者文件影響到正常的編輯器，這裏要多設置一個，myEditor是正常使用的編輯器，upload_ue爲隱藏的編輯器。

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

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

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

 1 <script type="text/javascript">
 2     //從新實例化一個編輯器，防止在上面的editor編輯器中顯示上傳的圖片或者文件
 3     var _editor = UE.getEditor('upload_ue');
 4     _editor.ready(function () {
 5         //設置編輯器不可用
 6         _editor.setDisabled();
 7         //隱藏編輯器，由於不會用到這個編輯器實例，因此要隱藏
 8         _editor.hide();
 9         //偵聽圖片上傳
10         _editor.addListener('beforeInsertImage', function (t, arg) {
11             //將地址賦值給相應的input,只去第一張圖片的路徑
12             $("#picture").attr("value", arg[0].src);
13             //圖片預覽
14             $("#preview").attr("src", arg[0].src);
15         })
16         //偵聽文件上傳，取上傳文件列表中第一個上傳的文件的路徑
17         _editor.addListener('afterUpfile', function (t, arg) {
18             $("#file").attr("value", _editor.options.filePath + arg[0].url);
19         })
20     });
21     //彈出圖片上傳的對話框
22     function upImage() {
23         var myImage = _editor.getDialog("insertimage");
24         myImage.open();
25     }
26     //彈出文件上傳的對話框
27     function upFiles() {
28         var myFiles = _editor.getDialog("attachment");
29         myFiles.open();
30     }
31 </script>

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

1 editor.fireEvent('afterUpfile', filesList);

最後別忘了添加上傳按鈕

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

配置完畢。

代碼能夠在個人小站下載：http://www.holdcode.com/web/details/72