UEditor調用上傳圖片、上傳文件等模塊
阿新 • • 發佈：2019-02-14
one 分享圖片 打開 java 我們 itl tps .html 技術
來源：https://www.cnblogs.com/lhm166/articles/6079973.html
說到百度富文本編輯器ueditor（下面簡稱ue），我不得不給它一個大大的贊。我們在網站建設、前端開發時，網站的內容管理就使用了它。對於它的多圖片上傳和附件上傳，個人感覺很好用，我就琢磨著是否可以外部調用多圖上傳和附件上傳組件為自己所用，並封裝成一個插件，節省單獨開發的成本。
有了這個想法後，著手操作，理下實現思路，得出實現的關鍵在於監聽這兩個組件在編輯器裏的插入動作。打開源碼，苦心研究，皇天不負苦心人，終於摸索出解決方法，現在分享出來，給擁有同樣想法的小夥伴，為網站建設屆盡一份力。
註：本文基於UEditor1.4.3.3版本。
1、引入ue相關文件，寫好初始代碼
為了更好的封裝整一個單獨的插件，這裏我們要做到示例化ue後隱藏網頁中的編輯窗口，並移除焦點。
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>外部調用UEditor的多圖上傳和附件上傳</title>
<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script>
<style>
ul{display: inline-block;width: 100%;margin: 0;padding: 0;}
li{list-style-type: none;margin: 5px;padding: 0;}
</style>
</head>
<body>
<h1>外部調用UEditor的多圖上傳和附件上傳示例</h1>
<button type="button" id="j_upload_img_btn">多圖上傳</button>
<ul id="upload_img_wrap"></ul>
<button type="button" id="j_upload_file_btn">附件上傳</button>
<ul id="upload_file_wrap"></ul>
<!-- 加載編輯器的容器 -->
<textarea id="uploadEditor" style="display: none;"></textarea>
<!-- 使用ue -->
<script type="text/javascript">
// 實例化編輯器，這裏註意配置項隱藏編輯器並禁用默認的基礎功能。
var uploadEditor = UE.getEditor("uploadEditor", {
isShow: false,
focus: false,
enableAutoSave: false,
autoSyncData: false,
autoFloatEnabled:false,
wordCount: false,
sourceEditor: null,
scaleEnabled:true,
toolbars: [["insertimage", "attachment"]]
});
// todo::some code
</script>
</body>
</html>
2、監聽多圖上傳和上傳附件組件的插入動作
uploadEditor.ready(function () {
// 監聽插入圖片
uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
// 監聽插入附件
uploadEditor.addListener("afterUpfile",_afterUpfile);
});
3、自定義按鈕綁定觸發多圖上傳和上傳附件對話框的事件
我們對id="j_upload_img_btn"和id="j_upload_file_btn"的兩個button綁定觸發ue多圖上傳和上傳附件對話框的事件，這樣我們才能夠操作ue。
document.getElementById(‘j_upload_img_btn‘).onclick = function () {
var dialog = uploadEditor.getDialog("insertimage");
dialog.title = ‘多圖上傳‘;
dialog.render();
dialog.open();
};
document.getElementById(‘j_upload_file_btn‘).onclick = function () {
var dialog = uploadEditor.getDialog("attachment");
dialog.title = ‘附件上傳‘;
dialog.render();
dialog.open();
};
4、多圖上傳
多圖上傳的核心在於“beforeInsertImage”動作，此動作返回已選圖片的信息集合。
function _beforeInsertImage(t, result) {
var imageHtml = ‘‘;
for(var i in result){
imageHtml += ‘<li><img src="‘+result[i].src+‘" alt="‘+result[i].alt+‘" height="150"></li>‘;
}
document.getElementById(‘upload_img_wrap‘).innerHTML = imageHtml;
}
5、新增“afterUpfile”動作
對於附件上傳，ue源碼中並未提供插入動作的相關事件，所以這裏我們手動添加一個觸發動作“afterUpfile”。
打開“ueditor.all.js”，搜索代碼：
me.execCommand(‘insertHtml‘, html); //在此代碼後插入以下代碼 me.fireEvent(‘afterUpfile‘, filelist);
這樣我們就新增了“afterUpfile”事件。
這裏核心在於 “fireEvent”。
6、附件上傳
上一步中我們新增了“afterUpfile”動作，這裏直接監聽就可以了。
function _afterUpfile(t, result) {
var fileHtml = ‘‘;
for(var i in result){
fileHtml += ‘<li><a href="‘+result[i].url+‘" target="_blank">‘+result[i].url+‘</a></li>‘;
}
document.getElementById(‘upload_file_wrap‘).innerHTML = fileHtml;
}
以下是完整代碼：
註：本文基於UEditor1.4.3.3版本。
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>外部調用UEditor的多圖上傳和附件上傳</title>
<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script>
<style>
ul{display: inline-block;width: 100%;margin: 0;padding: 0;}
li{list-style-type: none;margin: 5px;padding: 0;}
</style>
</head>
<body>
<h1>外部調用UEditor的多圖上傳和附件上傳示例</h1>
<button type="button" id="j_upload_img_btn">多圖上傳</button>
<ul id="upload_img_wrap"></ul>
<button type="button" id="j_upload_file_btn">附件上傳</button>
<ul id="upload_file_wrap"></ul>
<!-- 加載編輯器的容器 -->
<textarea id="uploadEditor" style="display: none;"></textarea>
<!-- 使用ue -->
<script type="text/javascript">
// 實例化編輯器，這裏註意配置項隱藏編輯器並禁用默認的基礎功能。
var uploadEditor = UE.getEditor("uploadEditor", {
isShow: false,
focus: false,
enableAutoSave: false,
autoSyncData: false,
autoFloatEnabled:false,
wordCount: false,
sourceEditor: null,
scaleEnabled:true,
toolbars: [["insertimage", "attachment"]]
});
// 監聽多圖上傳和上傳附件組件的插入動作
uploadEditor.ready(function () {
uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
uploadEditor.addListener("afterUpfile",_afterUpfile);
});
// 自定義按鈕綁定觸發多圖上傳和上傳附件對話框事件
document.getElementById(‘j_upload_img_btn‘).onclick = function () {
var dialog = uploadEditor.getDialog("insertimage");
dialog.title = ‘多圖上傳‘;
dialog.render();
dialog.open();
};
document.getElementById(‘j_upload_file_btn‘).onclick = function () {
var dialog = uploadEditor.getDialog("attachment");
dialog.title = ‘附件上傳‘;
dialog.render();
dialog.open();
};
// 多圖上傳動作
function _beforeInsertImage(t, result) {
var imageHtml = ‘‘;
for(var i in result){
imageHtml += ‘<li><img src="‘+result[i].src+‘" alt="‘+result[i].alt+‘" height="150"></li>‘;
}
document.getElementById(‘upload_img_wrap‘).innerHTML = imageHtml;
}
// 附件上傳
function _afterUpfile(t, result) {
var fileHtml = ‘‘;
for(var i in result){
fileHtml += ‘<li><a href="‘+result[i].url+‘" target="_blank">‘+result[i].url+‘</a></li>‘;
}
document.getElementById(‘upload_file_wrap‘).innerHTML = fileHtml;
}
</script>
</body>
</html>
UEditor調用上傳圖片、上傳文件等模塊