天天看點
傳回

百度編輯器（UEditor）——調用上傳圖檔、上傳檔案等子產品

說到百度富文本編輯器ueditor（下面簡稱ue），我不得不給它一個大大的贊。我們在網站建設、前端開發時，網站的内容管理就使用了它。對于它的多圖檔上傳和附件上傳，個人感覺很好用，我就琢磨着是否可以外部調用多圖上傳和附件上傳元件為自己所用，并封裝成一個插件，節省單獨開發的成本。

有了這個想法後，着手操作，理下實作思路，得出實作的關鍵在于監聽這兩個元件在編輯器裡的插入動作。打開源碼，苦心研究，皇天不負苦心人，終于摸索出解決方法，現在分享出來，給擁有同樣想法的小夥伴，為網站建設屆盡一份力。

注：本文基于UEditor1.4.3.3版本。

1、引入ue相關檔案，寫好初始代碼

為了更好的封裝整一個單獨的插件，這裡我們要做到示例化ue後隐藏網頁中的編輯視窗，并移除焦點。

<!doctype html>
<html >
<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" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank">'+result[i].url+'</a></li>';
    }
    document.getElementById('upload_file_wrap').innerHTML = fileHtml;
}

以下是完整代碼：

注：本文基于UEditor1.4.3.3版本。

<!doctype html>
<html >
<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" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank">'+result[i].url+'</a></li>';
        }
        document.getElementById('upload_file_wrap').innerHTML = fileHtml;
    }
</script>
</body>
</html>

原文位址： https://www.cnblogs.com/lhm166/articles/6079973.html

讓我們一起遨遊在代碼的海洋裡！

網頁技術 UEditor 富文本編輯器 多檔案上傳 附件上傳
上一篇: android附件上傳下載下傳（圖檔，語音，視訊）
下一篇: Dynamics CRM 附件功能設定

繼續閱讀