图1wang编辑器效果图
1、npm安装
安装过程比较简单，不做重复，说一下使用过程遇到的问题
- 如果编辑器放到了tabletd内，会发现插入分隔线（也就是插入hr）不好用，没有找到在哪里改，换一个方式去实现：直接使用editor.config.menus=[]加载我们使用的菜单，主要是为了去掉splitLine（分隔线），然后使用自定义扩展菜单创建新的分隔线菜单；
- 添加查看源码扩展；
- 弹出的窗口关闭的时候，只是切换到了后边的菜单不能关闭菜单。
插入hr
importEfrom'wangeditor'mounted(){consteditor=newE('#div1')constmenuKey='hrMenuKey'const{BtnMenu}=E//第一，菜单class，Button菜单继承BtnMenuclassclassHrMenuextendsBtnMenu{constructor(editor){//data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述const$elem=E.$(`<divclass="w-e-menu"data-title="分割线"><iclass='w-e-icon-split-line'></i></div>`)super($elem,editor)}//菜单点击事件clickHandler(){editor.cmd.do('insertHtml','<hr>')}tryChangeActive(){//激活菜单//1.菜单DOM节点会增加一个.w-e-active的cssclass//2.this.this.isActive===truethis.active()////取消激活菜单////1.菜单DOM节点会删掉.w-e-active////2.this.this.isActive===false//this.unActive()}}//注册菜单E.registerMenu(menuKey,HrMenu)editor.config.placeholder=''editor.config.uploadImgServer='/public/sss/admin.php/ajaxweb/uppic.html'editor.config.uploadImgMaxSize=1024*1024editor.config.uploadImgAccept=['jpg','jpeg','png','gif']editor.config.height=300editor.config.focus=trueeditor.config.menus=['source','head','bold','fontSize','fontName','italic','underline','strikeThrough','indent','lineHeight','foreColor','backColor','link','list','justify','quote','image','video','table','undo','redo']editor.create()}查看源码
图2查看源码效果图
实现目标：
点击查看的时候，遮盖其它的按钮，防止查看源码的时候，点击了别的按钮进行了误操作。
新加的菜单默认都是在最后全屏前边，分割线还可以，但是查看源码我个人还是习惯在最前边，使用的是jqueryprepend感觉更加简单一些，代码如下：
import$from'jquery'mounted(){$(document).ready(function(){$('#div1.w-e-toolbar').prepend('<divclass=\'w-e-menu\'style=\'z-index:991;\'data-title=\'查看源码\'><astyle=\'display:block; width:100%;height:100%;\'ct=1id=\'viewsource\'><iclass=\'fafa-file-text-o\'></i></a></div>')$(document).delegate('#viewsource','click',function(){vareditorHtml=editor.txt.html()//console.log($(this).attr('ct'))if(parseInt($(this).attr('ct'))===1){$('#div1.w-e-toolbar').prepend('<divid=\'zzc\'style=\'position:absolute;left:0;top:0;z-index:99;background-color:rgba(0,0,0,0.5); width:100%;height:40px;\'></div>')$(this).parent().parent().parent().find('.w-e-text').css(' width',$('.w-e-text'). width()+'px')editorHtml=editorHtml.replace(/</g,'<').replace(/>/g,'>').replace(//g,'')$(this).attr('ct','2')$(this).css({'background-color':'#EEE'})}else{editorHtml=editor.txt.text().replace(/</ig,'<').replace(/>/ig,'>').replace(//ig,'')$(this).attr('ct','1')$(this).parent().parent().parent().find('.w-e-text').css(' width','100%')$(this).parent().parent().find('#zzc').remove()$(this).css({'background-color':'#FFF'})}editor.txt.html(editorHtml)//editor.change&&editor.change()})})}说明：
- 使用jqueryprepend向头部插入查看源码按钮；
- ct用来判断是查看源码，还是切换回原来的格式：1查看源码2切换回原来的；
- <divid="zzc"></div>是遮罩层，用于点击查看的时候遮盖其它按钮，防止误操作，查看的时候添加，切换的时候移除；
- 查看源码的时候，如果全是英文有可能出现不换行，页面被撑开的情况（因为宽度是100%），所以这里要获取编辑器所在divw-e-text的宽度（像素），通过jquery重新设置宽度；
弹出的窗口，点击关闭无效不能关闭
图3弹出菜单无法关闭
如图，点击关闭的时候会切换到了网络图片的表单，这应该是菜单同级别，遮盖了关闭的按钮，所以我们要写css样式加上z-index使关闭的菜单在其他的上层；
css代码
.w-e-icon-close{display:block;z-index:999999!important;}2、cdn引用js
我是下载到本地的
图4多图上传F12查看效果
图片上传，如果选择多个图片，可能会出现以上图片的情况style="font-size:14px;font-family:"HelveticaNeue",Helvetica,"PingFangSC",Tahoma,Arial,sans-serif;max- width:100%;"
复制html发现是如下代码：
<img src="/public/upload/image/20211201/111.jpg"style="font-size:14px;font-family:"HelveticaNeue",Helvetica,"PingFangSC",Tahoma,Arial,sans-serif;max- width:100%;">
很明显style内的css样式，不是应该出现的，没有找到在哪里修改。
双引号换成了"如果不用查看源码，页面直接显示没有问题，但是查看源码，切换回来以后，会发现图片乱了，所以查看源码的时候，需要把"替换成空。
以下使用jquery实现自定义菜单（查看源码、插入分割线）：
import$from'jquery'mounted(){$(document).ready(function(){//查看源码菜单$('#div1.w-e-toolbar').prepend('<divclass=\'w-e-menu\'style=\'z-index:991;\'data-title=\'查看源码\'><astyle=\'display:block; width:100%;height:100%;\'ct=1id=\'viewsource\'><iclass=\'fafa-file-text-o\'></i></a></div>')//分割线菜单varmenl=$('#div1.w-e-toolbar.w-e-menu').length;$("#div1.w-e-toolbar.w-e-menu").eq(menl-1).before('<divclass=\'w-e-menu\'data-title=\'分割线\'><astyle=\'display:block; width:100%;height:100%;\'id=\'splitline\'><iclass=\'w-e-icon-split-line\'></i></a></div>')//查看源码点击$(document).delegate('#viewsource','click',function(){vareditorHtml=editor.txt.html()//console.log($(this).attr('ct'))if(parseInt($(this).attr('ct'))===1){$('#div1.w-e-toolbar').prepend('<divid=\'zzc\'style=\'position:absolute;left:0;top:0;z-index:99;background-color:rgba(0,0,0,0.5); width:100%;height:40px;\'></div>')$(this).parent().parent().parent().find('.w-e-text').css(' width',$('.w-e-text'). width()+'px')editorHtml=editorHtml.replace(/</g,'<').replace(/>/g,'>').replace(//g,'').replace(/"/g,'')$(this).attr('ct','2')$(this).css({'background-color':'#EEE'})}else{editorHtml=editor.txt.text().replace(/</ig,'<').replace(/>/ig,'>').replace(//ig,'')$(this).attr('ct','1')$(this).css('border','0pxsolid#DDD')$(this).parent().parent().parent().find('.w-e-text').css(' width','100%')$(this).parent().parent().find('#zzc').remove()$(this).css({'background-color':'#FFF'})}editor.txt.html(editorHtml)//editor.change&&editor.change()})//分割线插入hr点击$(document).delegate('#splitline','click',function(){editor.cmd.do('insertHtml','<hr>');});})}如果我们把插入分割线的代码单独拿出来，只是下面几行，相对使用官方提供的方法会简单很多
//插入分割线菜单varmenl=$('#div1.w-e-toolbar.w-e-menu').length;$('#div1.w-e-toolbar.w-e-menu').eq(menl-1).before('<divclass=\'w-e-menu\'data-title=\'分割线\'><astyle=\'display:block; width:100%;height:100%;\'id=\'splitline\'><iclass=\'w-e-icon-split-line\'></i></a></div>')//分割线插入hr点击事件$(document).delegate('#splitline','click',function(){editor.cmd.do('insertHtml','<hr>');});说明：
- menl是菜单的个数；
- $("#div1.w-e-toolbar.w-e-menu").eq(menl-1).before使用jquerybefore向最后一个菜单（也就是全屏菜单）之前插入分割线按钮，使用after也可以；
- 查看源码的替换多加了.replace(/"/g,‘’)；
- 如果是cdn引入的js可能出现菜单一些功能不好用的情况，点击了没反应，可以尝试把consteditor=newE('#div1')换成window.editor=newE('#div1')
- 注意：因为"连起来会被转换成双引号，这里没法显示，实际替换的时候要连起来，不要有空格；
editorHtml=editorHtml.replace(/</g,'<').replace(/>/g,'>').replace(//g,'').replace(/"/g,'')
附录一下jqueryafter，before，append，prepend用法：
向class=w-e-toolbar的div头部插入html
$(".w-e-toolbar").prepend("<div>头部插入html</div>")
向class=w-e-toolbar的div底部插入html
$(".w-e-toolbar").append("<div>底部插入html</div>")
向class=w-e-toolbar的div之前插入html
$(".w-e-toolbar").before("<div>之前插入html</div>")
向class=w-e-toolbar的div之后插入html
$(".w-e-toolbar").after("<div>后面插入html</div>")
可以做一下延伸：像我们上边用到的向第几个元素之后或者之前插入代码。