1.下載所需要的js文件：https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/
2.將js文件引入項(xiàng)目中，需要注意的是，后續(xù)中會(huì)存在$符號(hào)沖突的問(wèn)題，所以需要先保存這樣的引入順序。
<script src="./jquery.min.js"></script>
<script src="./wangEditor.js"></script>
3.開(kāi)始編寫(xiě)代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./jquery.min.js"></script>
<script src="./wangEditor.js"></script>
</head>
<body>
<input type="file" id="file_input"? style="display:none" accept="image/gif,image/jpeg,image/jpg,image/png" /> //此處是后續(xù)要進(jìn)行圖片上傳功能。，不需要可以不用寫(xiě)此句。
<div id="div1" style="height:800px" onkeydown="next()">
</div>
</body>
4.編寫(xiě)腳本：
<!-- 引入wangEditor.min.js -->
<script type="text/javascript">
var input =document.getElementById("file_input");
var output =document.getElementById("file_input");
const E =window.wangEditor;// CDN 引入的方式
? ? // 【注意】如果版本 <= v4.0.5 需要這樣寫(xiě)：
? ? const {BtnMenu} =E;
const editor =new E('#div1');//此處的div1與body的div的ID保持一致
? ? //他的不滿(mǎn)足我的要求，需要自定義菜單，進(jìn)行圖片上傳。
? ? const imageMenuKey ='imageMenuKey';// 菜單 key ，各個(gè)菜單不能重復(fù)
? ? class AlertMenuextends BtnMenu {
constructor(editor) {
// data-title屬性表示當(dāng)鼠標(biāo)懸停在該按鈕上時(shí)提示該按鈕的功能簡(jiǎn)述
? ? ? ? ? ? const $elem =E.$(
`<div class="w-e-menu" data-title="圖片">
`
? ? ? ? ? ? )
super($elem, editor)
}
// 菜單點(diǎn)擊事件
? ? ? ? clickHandler() {
output.value ="";
output.click();
}
// 菜單是否被激活（如果不需要，這個(gè)函數(shù)可以空著）
? ? ? ? // 1. 激活是什么？光標(biāo)放在一段加粗、下劃線(xiàn)的文本時(shí)，菜單欄里的 B 和 U 被激活，如下圖
? ? ? ? // 2. 什么時(shí)候執(zhí)行這個(gè)函數(shù)？每次編輯器區(qū)域的選區(qū)變化（如鼠標(biāo)操作、鍵盤(pán)操作等），都會(huì)觸發(fā)各個(gè)菜單的 tryChangeActive 函數(shù)，重新計(jì)算菜單的激活狀態(tài)
? ? ? ? tryChangeActive() {
// 激活菜單
? ? ? ? ? ? this.active();
// // 取消激活菜單
? ? ? ? ? ? // this.unActive()
? ? ? ? }
}
// 注冊(cè)菜單
? ? E.registerMenu(imageMenuKey, AlertMenu);
//配置文本框提示
? ? editor.config.placeholder ='請(qǐng)輸入內(nèi)容';
// 聚焦時(shí)，菜單欄的提示為上標(biāo)（默認(rèn)配置）
? ? editor.config.menuTooltipPosition ='down';
//配置字體大?。捍颂幣渲昧酥筮€需要在css樣式中配置：font[size="1"] {font-size: 18px;} size的值與value對(duì)應(yīng)
? ? editor.config.fontSizes = {
'x-small': {name:'18px',value:'1' },
'small': {name:'20px',value:'2' },
'normal': {name:'22px',value:'3' },
'large': {name:'24px',value:'4' },
'x-large': {name:'28px',value:'5' },
'xx-large': {name:'32px',value:'6' },
'xxx-large': {name:'48px',value:'7' },
};
//配置字體顏色
? ? editor.config.colors = [
'#000000',
'#eeece0',
'#eb3326',
'#4d80bf'
? ? ]
//配置文本框高度
? ? editor.config.height =800;
//創(chuàng)建文本框，此句需要寫(xiě)在設(shè)定他的配置之后，配置才生效。
? ? editor.create();
window.onload =function(){
uploadimage();
};
function uploadimage() {
if (typeof FileReader ==='undefined') {
alert("抱歉，你的瀏覽器不支持 FileReader");
input.setAttribute('disabled','disabled');
}else {
input.addEventListener('change',readFile,false);
}
}
//圖片上傳
? ? function readFile(){
var result;
if (!input['value'].match(/.jpg|.gif|.png|.jpeg/i)){ //判斷上傳文件格式
? ? ? ? ? ? return alert("上傳的圖片格式不正確，請(qǐng)重新選擇");
}
var reader =new FileReader();
reader.readAsDataURL(this.files[0]);
reader.fileName =this.files[0].name;
reader.onload =function(e){
result ='<div class="result"><img class="subPic" src="'+this.result+'" alt="'+this.fileName+'"/></div>';
var div =document.createElement('div');
div.innerHTML =result;
div['className'] ='float';
var img =div.getElementsByTagName('img')[0];
img.onload =function(){
};
editor.cmd.do('insertHTML',div.innerHTML);
}
}
//當(dāng)輸入回車(chē)時(shí)，需要在光標(biāo)處換行
? ? function next()
{
if(event.keyCode==13)
{
editor.cmd.do('insertHTML','<br/>');//此句是獲取光標(biāo)所在位置。
? ? ? ? ? ? window.event.keyCode=0;
window.event.returnValue=true;
}
}
//調(diào)整圖片大小
? ? function ReSizePic(ThisPic) {
var RePicWidth =800;//這里修改為您想顯示的寬度值
? ? ? ? var TrueWidth = ThisPic.width;//圖片實(shí)際寬度
? ? ? ? var TrueHeight = ThisPic.height;//圖片實(shí)際高度
? ? ? ? var reWidth =RePicWidth;
if(TrueWidth>RePicWidth){
ThisPic.width =reWidth;
ThisPic.height =TrueHeight*0.8;
}
if(TrueWidth>TrueHeight){
//垂直居中
? ? ? ? ? ? var nowHeight =TrueHeight * (reWidth/TrueWidth);
return nowHeight;//將圖片修改后的高度返回，供垂直居中用
? ? ? ? }
};
//將文本編輯器的內(nèi)容提交后臺(tái)處理
? ? function submit(file) {
//為了解決$符號(hào)沖突，需要重新將jQuery的$符號(hào)替換掉。
? ? ? ? jQuery.noConflict();
var fd =new FormData();
fd.append("filedata",file);
jQuery.ajax({
url:"http://localhost:8080/test",//此處填寫(xiě)ajax的請(qǐng)求方法
? ? ? ? ? ? type:'POST',
data:fd,
contentType:false,//注意上傳文件必須關(guān)閉這些，
? ? ? ? ? ? processData:false,// 還有這些
? ? ? ? ? ? dataType:'text',//返回值，視自己情況而定。返回提示信息
? ? ? ? ? ? success:function(data) {
editor.txt.html(data);
},
error:function(data) {
alert("failed");
}
});
}
</script>
6.樣式文件：
<style>
font[size="1"] {
font-size:18px;
}
font[size="2"] {
font-size:20px;
}
font[size="3"] {
font-size:22px;
}
font[size="4"] {
font-size:24px;
}
font[size="5"] {
font-size:28px;
}
font[size="6"] {
font-size:32px;
}
font[size="7"] {
font-size:48px;
}
img{
position:relative;
}
</style>
7.總結(jié)：
詳情參照官方文檔：https://www.wangeditor.com/doc/pages/01-%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94%A8/01-%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.html
和Api使用文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
