wangeditor去除菜单栏监听选中文本事件标题导航示例

最新推荐文章于 2024-04-12 15:25:47 发布

lumengabc

最新推荐文章于 2024-04-12 15:25:47 发布

阅读量195

点赞数 2

文章标签： js

本文链接：https://blog.csdn.net/webnoties/article/details/136841377

版权

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>

结束