wangEditor是一款轻量级的富文本编辑器。使用还比较方便，但是缺少查看源码模式，需要我们自定义一个menu给增加查看源码模式
下面是wangEditor增加源码模式的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>wangEditor增加源码模式</title>
</head>
<body>
<div id="editor"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
<script type="text/javascript">
const E = window.wangEditor;
const editor = new E("#editor");
let isHTML = false;
const { BtnMenu } = E
class htmlMenu extends BtnMenu {
constructor(editor) {
const $elem = E.$(
`<div class="w-e-menu">
<button>html</button>
</div>`
)
super($elem, editor)
}
clickHandler() {
let source = editor.txt.html();
if(source){
isHTML = !isHTML;
}
if(isHTML){
source = source.replace(/</g, "<").replace(/>/g, ">").replace(/ /g, " ");
}else{
source = editor.txt.text().replace(/</ig, "<").replace(/>/ig, ">").replace(/ /ig, " ")
}
editor.txt.html(source);
this.tryChangeActive();
// console.log(source);
}
tryChangeActive() {
if(isHTML){
this.active()
}else{
this.unActive()
}
}
}
// 注册菜单
const menuKey = 'htmlMenuKey' // 菜单 key ，各个菜单不能重复
editor.menus.extend('htmlMenuKey', htmlMenu)
// 将菜单加入到 editor.config.menus 中
// 也可以通过配置 menus 调整菜单的顺序，参考【配置菜单】部分的文档
editor.config.menus = editor.config.menus.concat(menuKey)
editor.create()
</script>
</body>
</html>
此代码亲测可用，直接复制使用即可
标签：菜单,const,wangEditor,source,源码,editor,添加 From： https://www.cnblogs.com/flzs/p/17674033.html