天天看點
傳回

wangEditor3 - v3.1.1版本 環境搭建-本地圖檔、本地視訊上傳功能實作

前文介紹 - 綱要

寫這篇文章主要是因為最近項目所需，涉及到使用富文本編輯器生成HTML文本，同時實作PC的解析HTML文本的編輯功能及微信小程式端的HTML的富文本解析，然後看到荼蘼2018 的部落格說wangEditor很不錯，介于百度的UEditor已經停止維護多年，且比較臃腫、麻煩，就直接上手了wangEditor。

荼蘼2018：幾種知名開源富文本編輯器記錄和對比（僅供參考）

https://www.cnblogs.com/yoga21/p/9215000.html

使用工具：（本文就着重講wangEditor的本地圖檔、視訊上傳功能）

PC端：wangEditor - v3.1.1版本

微信小程式端：WxParse

用了才發現，富文本編輯器還是比較麻煩的，并不是所有内容都可能直接生成轉譯，還要涉及與背景資料互動，而恰巧wangEditor官網對這一塊的描述比較少，是以就分享一下個人達成的一些解決方案（綜合網絡各個大神的分享點撥才實作~）

先走一波原作者的辛苦成果

wangEditor —— 輕量級 web 富文本編輯器，配置友善，使用簡單。支援 IE10+ 浏覽器。

官網：www.wangEditor.com

文檔：www.kancloud.cn/wangfupeng/wangeditor3/332599

源碼：github.com/wangfupeng1988/wangEditor

正文 - 編輯器的建立（本地圖檔、視訊上傳功能） 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>
    <div id="editor">
        <p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p>
    </div>

    <!-- 注意， 隻需要引用 JS，無需引用任何 CSS ！！！-->
    <!-- 注意， 圖檔、視訊等所有方法的原型都在裡面配置，這裡僅做調用配置-->
    <!-- 注意， 我這裡在原wangEditor.js基礎上，根據項目重寫了些方法-->
    <script type="text/javascript" src="../js/wangEditorMore.js"></script>
    
    <!--配置編輯器 配置本地圖檔上傳 配置本地視訊上傳-->
    <script type="text/javascript">
        // 生成編輯器
	    var E = window.wangEditor
	    var editor = new E('#editor')

	    // 忽略粘貼内容中的圖檔 ： 建議加上，防止盜鍊産生資源跨域問題
	    editor.customConfig.pasteIgnoreImg = true;
	    
	    //設定檔案上傳的參數名稱
	    editor.customConfig.uploadFileName = 'uploadPic'; 
	    
	    // 上傳圖檔到伺服器
	    editor.customConfig.uploadImgServer = 'http://.../uploadImage.do';
	    
	    // 将圖檔大小限制為 3M  也可以背景做大小限制
	    // editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; 
		
		//自定義上傳圖檔事件editor.customConfig.pasteIgnoreImg = true;
	    editor.customConfig.uploadImgHooks = {
	        before: function (xhr, editor, files) {
	        },
	        success: function (xhr, editor, result) {
	            console.log("上傳成功");
	        },
	        fail: function (xhr, editor, result) {
	            console.log("上傳失敗,原因是" + result);
	        },
	        error: function (xhr, editor) {
	            console.log("上傳出錯");
	        },
	        timeout: function (xhr, editor) {
	            console.log("上傳逾時");
	        },
	        customInsert: function (insertImg, result, editor) {
	            // insertImg 是插入圖檔的函數，editor 是編輯器對象，
	            // result 是伺服器端傳回的結果必須是一個JSON格式字元串,多個圖檔位址組成的數組
	            for (var j = 0; j < result.data.length; j++) {
	                insertImg(result.data[j]);
	            }
	        }
	    };
		
		// 上傳視訊到伺服器
	    editor.customConfig.uploadVideoServer = 'uploadVideo'
		//自定義上傳視訊事件
	    editor.customConfig.uploadVideoHooks = {
	        before: function (xhr, editor, files) {
	        },
	        success: function (xhr, editor, result) {
	            console.log("上傳成功");
	        },
	        fail: function (xhr, editor, result) {
	            console.log("上傳失敗,原因是" + result);
	        },
	        error: function (xhr, editor) {
	            console.log("上傳出錯");
	        },
	        timeout: function (xhr, editor) {
	            console.log("上傳逾時");
	        },
	        customInsert: function (insertVideo, result, editor) {
	            // insertVideo 是插入圖檔的函數，editor 是編輯器對象，
	            // result 是伺服器端傳回的結果必須是一個JSON格式字元串
	            insertVideo(result.data);
	        }
	    };
	
	    // 自定義菜單配置
	    editor.customConfig.menus = [
	        'head',  // 标題
	        'bold',  // 粗體
	        'fontSize',  // 字号
	        'fontName',  // 字型
	        'italic',  // 斜體
	        'underline',  // 下劃線
	        'strikeThrough',  // 删除線
	        'foreColor',  // 文字顔色
	        'backColor',  // 背景顔色
	        'link',  // 插傳入連結接
	        'list',  // 清單
	        'justify',  // 對齊方式
	        'quote',  // 引用
	        'emoticon',  // 表情
	        'image',  // 插入圖檔
	        'table',  // 表格
	        'video',  // 插入視訊
	        'undo',  // 撤銷
	        'redo'  // 重複
	    ]
	    editor.create()
    </script>
</body>
</html>

相關參考博文

①本地圖檔上傳問題：

fly_雞肉：https://blog.csdn.net/qq_37936542/article/details/81172364

······································································································

②本地圖檔背景java配置

weixin_38296857：https://bbs.csdn.net/topics/392328970

······································································································

③本地視訊上傳問題：

賴胖子的csdn：https://blog.csdn.net/I_am_Yong_Ge/article/details/100118109

·······································································································

④本地視訊上傳菜單原型方法**(特别注意文末作者的提醒，替換别放錯了位置)**

前端小獅：https://blog.csdn.net/m0_37885651/article/details/83660206

由于項目原因，背景源碼就不太友善拿出來了，故做如下點撥：
  1. 要實作圖檔上傳功能，結合上文前端代碼，進行圖檔路徑配置，背景源碼參考博文②，即可實作本地圖檔上傳功能，因為官方有對本地圖檔的函數配置，是以前台直接調用即可。
官網相關文檔：https://www.kancloud.cn/wangfupeng/wangeditor3/335782
  1. 要實作視訊上傳功能，結合上文前端代碼，同時修改wangEditor.js的原型，js修改參考博文④，背景源碼參考博文③，即可實作本地視訊上傳功能，因為官網沒有相關的本地視訊上傳，是以才要自己改寫。
特别注意，本地視訊配置中，在wangEditorMore.js的4631行進行相關背景路徑配置 
// ------------------------------ 擷取配置資訊 ------------------------------
            var editor = this.editor;
            var config = editor.config;
            //不需要帶域名 ...替換成你的路徑 上傳位址
            var uploadVideoServer = ".../uploadVideo.do";

            var maxSize = 100 * 1024 * 1024;       //100M
            var maxSizeM = maxSize / 1000 / 1000;
            var maxLength = 1;
            var uploadFileName = "file";
            var uploadVideoParams = config.uploadVideoParams || {};
            var uploadVideoHeaders = {};
            var hooks =config.uploadVideoHooks || {};
            var timeout = 5 * 60 * 1000;        //5 min
            var withCredentials = config.withCredentials;
            if (withCredentials == null) {
                withCredentials = false;
            }

個人做了些優化的wangEditor.js => wangEditorMore.js

  • 實作wangEditor本地圖檔上傳
  • 實作wangEditor本地視訊上傳
  • 部分顯示樣式bug的調整

wangEditorMore.js 下載下傳位址：

https://download.csdn.net/download/qq_37592561/11983697

最後鳴謝wangeditor開發者及上文所提各位部落客。

**

個人wx公衆号：小帽集團

**

後續關于wangEditor及相關實作微信小程式的wxparse元件的資料對接，有機會再來寫~

技術分享 wangEditor3 wangEditor wangEditor3本地視訊上傳 wangEditor3本地圖檔上傳
上一篇: php顯示本地上傳圖檔,js如何擷取本地圖檔顯示到浏覽器并上傳至伺服器
下一篇: android上傳本地圖檔到伺服器,Android 圖檔上傳 伺服器端（一）

繼續閱讀