wangeditor去除菜单栏监听选中文本事件标题导航示例
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>wangEditor catalog</title>
<link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
<!-- <link href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet"> -->
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
<link href="./css/layout.css" rel="stylesheet">
<script src="./js/custom-elem.js"></script>
<style>
#header-container {
list-style-type: none;
padding-left: 20px;
}
#header-container li {
color: #333;
margin: 10px 0;
cursor: pointer;
}
#header-container li:hover {
text-decoration: underline;
}
#header-container li[type="header1"] {
font-size: 20px;
font-weight: bold;
}
#header-container li[type="header2"] {
font-size: 16px;
padding-left: 15px;
font-weight: bold;
}
#header-container li[type="header3"] {
font-size: 14px;
padding-left: 30px;
}
#header-container li[type="header4"] {
font-size: 12px;
padding-left: 45px;
}
#header-container li[type="header5"] {
font-size: 12px;
padding-left: 60px;
}
</style>
</head>
<body>
<div class="page-container">
<div class="page-right" style="display: flex;">
<!-- 编辑器 DOM -->
<div style="border: 1px solid #ccc; flex: 1; width: calc(100vw - 370px);">
<div id="editor-text-area" style="height: 600px"></div>
</div>
<!-- 标题目录 -->
<div style="width: 200px; background-color: #ffffff;">
<ul id="header-container"></ul>
</div>
</div>
</div>
<!-- <script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.min.js"></script> -->
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
const E = window.wangEditor
// 切换语言
const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
E.i18nChangeLanguage(LANG)
// 标题 DOM 容器
const headerContainer = document.getElementById('header-container')
headerContainer.addEventListener('mousedown', event => {
if (event.target.tagName !== 'LI') return
event.preventDefault()
const id = event.target.id
editor.scrollToElem(id) // 滚动到标题
})
window.editor = E.createEditor({
selector: '#editor-text-area',
html: '<h1>标题</h1><h2>标题A</h2><p>文本</p><p>文本</p><p>文本</p><h3>标题A1</h3><p>文本</p><p>文本</p><p>文本</p><h3>标题A2</h3><p>文本</p><p>文本</p><p>文本</p><h2>标题B</h2><p>文本</p><p>文本</p><p>文本</p><h3>标题B1</h3><p>文本</p><p>文本</p><p>文本</p><h3>标题B2</h3><p>文本</p><p>文本</p><p>文本</p>',
config: {
placeholder: 'Type here...',
MENU_CONF: {
uploadImage: {
fieldName: 'your-fileName',
base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
}
},
onChange(editor) {
// 选中文字
const selectionText = editor.getSelectionText()
console.log("选中的文字:",selectionText);
// 全部文字
const text = editor.getText().replace(/\n|\r/mg, '')
//document.getElementById('total-length').innerHTML = text.length
console.log("全部文字:",text);
const headers = editor.getElemsByTypePrefix('header')
headerContainer.innerHTML = headers.map(header => {
const text = E.SlateNode.string(header)
const { id, type } = header
return `<li id="${id}" nn='666' type="${type}">${text}</li>`
}).join('')
}
}
})
</script>
</body>
</html>
结束