1、引入wangEditor.min.js
<script src="./jquery-2.1.4.min.js"></script>
<script src="./wangEditor.min.js"></script>
2、初始化wangEditor
<div class="min800 inline-block" style="width:800px;" id="editor"></div>
<script>
var E = window.wangEditor;
var editor = new E('#editor');
editor.create();
</script>
簡單配置富文本的dome源碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./jquery-2.1.4.min.js"></script>
<script src="./wangEditor.min.js"></script>
</head>
<body>
<!-- 富文本編輯器 -->
<div class="min800 inline-block" style="width:800px;" id="editor"></div>
<script>
var E = window.wangEditor;
var editor = new E('#editor');
editor.customConfig.showLinkImg = false; //隱藏‘網絡圖片’的按鈕
editor.customConfig.uploadImgServer = '/upload/image.do' // 上傳圖片到服務器
editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 將圖片大小限制為 2M
editor.customConfig.uploadImgMaxLength = 5; // 限制一次最多上傳 5 張圖片
editor.customConfig.uploadFileName = 'file';
editor.customConfig.uploadImgTimeout = 30000; // 將 timeout 時間改為 3s
editor.customConfig.menus = [
'bold',
'italic',
'underline',
'strikeThrough',
'link', // 插入鏈接
'list', // 列表
'quote', // 引用
'image', // 插入圖片
'undo', // 撤銷
'redo' // 重復
]
editor.customConfig.onchange = function(html) {
// html 即變化之后的內容
//因為用editor.txt.text()來校驗字數，輸入一個空格的話會被識別為5個字符，所以用$('div[contenteditable]').eq(0).text()字符來判斷
$('.attip').eq(0).find('font').text($.trim($('div[contenteditable]').eq(0).text()).length);
//$.trim()
//editor.txt.text()
}
editor.customConfig.uploadImgHooks = {
before: function(xhr, editor, files) {
//校驗圖片不能超過9張
var _imgs = $('#richtext img');
if (_imgs.length >= 9) { //
alert("校驗圖片不能超過9張 ")
}
// 圖片上傳之前觸發
// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，files 是選擇的圖片文件
// 如果返回的結果是 {prevent: true, msg: 'xxxx'} 則表示用戶放棄上傳
// return {
// prevent: true,
// msg: '放棄上傳'
// }
},
fail: function(xhr, editor, result, insertImg) {
var insertImg1 = function(e) {
var t = this;
if (e) {
this.editor.cmd.do("insertHTML", '<img src="' + e + '" />'); //這里如果加上限制圖片的寬度的樣式的話，請求會報錯。
} else {
return insertImg(e);
}
}
insertImg1(result)
// 圖片上傳並返回結果，但圖片插入錯誤時觸發
// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果
},
error: function(xhr, editor) {
// 圖片上傳出錯時觸發
// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
},
customInsert: function(insertImg, result, editor) {
// 圖片上傳並返回結果，自定義插入圖片的事件（而不是編輯器自動插入圖片！！！）
// insertImg 是插入圖片的函數，editor 是編輯器對象，result 是服務器端返回的結果
// 舉例：假如上傳圖片成功后，服務器端返回的是 {url:'....'} 這種格式，即可這樣插入圖片：
var url = result.url;
//function(e){var t=this;if(e){this.editor.cmd.do("insertHTML",'<img src="'+e+'" style="max-width:100%;"/>');var n=document.createElement("img");n.onload=function(){n=null},n.onerror=function(){n=null,t._alert("插入圖片錯誤",'wangEditor: 插入圖片出錯，圖片鏈接是 "'+e+'"，下載該鏈接失敗')},n.onabort=function(){n=null},n.src=e}}
//上面函數是原生的insertImg函數
var insertImg1 = function(e) {
var t = this;
if (e) {
this.editor.cmd.do("insertHTML", '<img src="' + e + '" />'); //這里如果加上限制圖片的寬度的樣式的話，請求會報錯。
} else {
return insertImg(e);
}
}
insertImg1(url);
// result 必須是一個 JSON 格式字符串！！！否則報錯
}
}
editor.customConfig.customAlert = function(info) {
// info 是需要提示的內容
cog(info)
}
window.onload = function() {
editor.create();
};
</script>
</body>
</html>
————————————————
版權聲明：本文為CSDN博主「時間飛逝子非魚」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/lgysjfs/article/details/91984038
wangEditor富文本編輯器【超簡單教程】
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。