1. 程式人生 > >獨立使用UEditor編輯器圖片和檔案上傳(呼叫內建第三方外掛swfupload)

獨立使用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>

配置完畢。