1.下载所需要的js文件：https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/
2.将js文件引入项目中，需要注意的是，后续中会存在$符号冲突的问题，所以需要先保存这样的引入顺序。
<script src="./jquery.min.js"></script>
<script src="./wangEditor.js"></script>
3.开始编写代码：
<!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" /> //此处是后续要进行图片上传功能。，不需要可以不用写此句。
<div id="div1" style="height:800px" onkeydown="next()">
</div>
</body>
4.编写脚本：
<!-- 引入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 需要这样写：
const {BtnMenu} =E;
const editor =new E('#div1');//此处的div1与body的div的ID保持一致
//他的不满足我的要求，需要自定义菜单，进行图片上传。
const imageMenuKey ='imageMenuKey';// 菜单 key ，各个菜单不能重复
class AlertMenuextends BtnMenu {
constructor(editor) {
// data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
const $elem =E.$(
`<div class="w-e-menu" data-title="图片">
`
)
super($elem, editor)
}
// 菜单点击事件
clickHandler() {
output.value ="";
output.click();
}
// 菜单是否被激活（如果不需要，这个函数可以空着）
// 1. 激活是什么？光标放在一段加粗、下划线的文本时，菜单栏里的 B 和 U 被激活，如下图
// 2. 什么时候执行这个函数？每次编辑器区域的选区变化（如鼠标操作、键盘操作等），都会触发各个菜单的 tryChangeActive 函数，重新计算菜单的激活状态
tryChangeActive() {
// 激活菜单
this.active();
// // 取消激活菜单
// this.unActive()
}
}
// 注册菜单
E.registerMenu(imageMenuKey, AlertMenu);
//配置文本框提示
editor.config.placeholder ='请输入内容';
// 聚焦时，菜单栏的提示为上标（默认配置）
editor.config.menuTooltipPosition ='down';
//配置字体大小：此处配置了之后还需要在css样式中配置：font[size="1"] {font-size: 18px;} size的值与value对应
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;
//创建文本框，此句需要写在设定他的配置之后，配置才生效。
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("上传的图片格式不正确，请重新选择");
}
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);
}
}
//当输入回车时，需要在光标处换行
function next()
{
if(event.keyCode==13)
{
editor.cmd.do('insertHTML','<br/>');//此句是获取光标所在位置。
window.event.keyCode=0;
window.event.returnValue=true;
}
}
//调整图片大小
function ReSizePic(ThisPic) {
var RePicWidth =800;//这里修改为您想显示的宽度值
var TrueWidth = ThisPic.width;//图片实际宽度
var TrueHeight = ThisPic.height;//图片实际高度
var reWidth =RePicWidth;
if(TrueWidth>RePicWidth){
ThisPic.width =reWidth;
ThisPic.height =TrueHeight*0.8;
}
if(TrueWidth>TrueHeight){
//垂直居中
var nowHeight =TrueHeight * (reWidth/TrueWidth);
return nowHeight;//将图片修改后的高度返回，供垂直居中用
}
};
//将文本编辑器的内容提交后台处理
function submit(file) {
//为了解决$符号冲突，需要重新将jQuery的$符号替换掉。
jQuery.noConflict();
var fd =new FormData();
fd.append("filedata",file);
jQuery.ajax({
url:"http://localhost:8080/test",//此处填写ajax的请求方法
type:'POST',
data:fd,
contentType:false,//注意上传文件必须关闭这些，
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.总结：
详情参照官方文档：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
