Braft Editor生成目录

1.最近使用Braft Editor作为富文本编辑器，但没有提供目录的接口，自己尝试写了一下

• 思路为以H标签作为目录，h1,h2...
• 由于Braft Editor编写的标签是没有className的这里统一设置

• setClassName = (total, tagName, className) => {
      let tag = total.getElementsByTagName(tagName);
      for (let i = 0; i < tag.length; i++) {
        tag[i].className = className
      }
  }

   

• let total = document.getElementById('detailContent');
  
  this.setClassName(total, 'h1', 'unusedClassName');
  this.setClassName(total, 'h2', 'unusedClassName');
  this.setClassName(total, 'h3', 'unusedClassName');
  this.setClassName(total, 'h4', 'unusedClassName');
  this.setClassName(total, 'h5', 'unusedClassName');
  this.setClassName(total, 'h6', 'unusedClassName');

  total为显示html的div

  <div className={"braft-output-content " + styles.justifyP} id='detailContent'
                       dangerouslySetInnerHTML={{__html: entryDetail['artcle_html']}}></div>

  2. 为每个title设置了className之后就可以取到初始目录数据

  let d = total.getElementsByClassName('unusedClassName');
  for (let k = 0; k < d.length; k++) {
              d[k].id = k;
  }

  并为每个标签设置id

3. 生成树结构

这里是通过二分法，首先以H1进行分割，依次H2，H3...

  splitArr = (arr, flag, resultArr) => {
    if (arr.length === 1) {
      resultArr.push({title: arr[0].innerText, key: arr[0].id});
    } else {
      let splitArr = [];
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].nodeName === flag) {
          if (splitArr.length) {
            resultArr.push({
              title: splitArr[0].innerText,
              key: splitArr[0].id,
              children: this.splitArr(splitArr.splice(1), this.returnHr(flag), [])
            });
            splitArr = []
          }
        }
        splitArr.push(arr[i])
        if (i === arr.length - 1) {
          if (splitArr.length) {
            resultArr.push({
              title: splitArr[0].innerText,
              key: splitArr[0].id,
              children: this.splitArr(splitArr.splice(1), this.returnHr(flag), [])
            });
          }
        }
      }
    }
    return resultArr;
  }

调用函数

let directory = this.splitArr(d, 'H1', [])

生成的结构为

[
    {
        title: 'title',
        key: '1',
        children: [
            title: 'title',
            key: '1',
            children: [
                title: 'title',
                key: '1',
            ]
        ]
    }
]

欢迎交流~