使用tocbot根据html生成目录文档toc优化文章阅读效果(html由markdown

2020-4-2 14:09:31
学习记录
397

使用tocbot根据html生成目录文档toc优化文章阅读效果(html由markdown生成)

tocbot介绍

使用tocbot可以把html代码进行解析,并生成一个目录添加到一个容器中。注意解析代码默认只解析H标签,H1-H6,自定义的话,请到github.com/tscanlin/tocbot看具体配置方法。

使用遇到的问题

使用tocbot遇到的问题:由于后台使用的是markdown编辑器是mavonEditor,mavonEditor生成的html 上的H标签上没有id值,而id值在H标签内部a标签上。由于使用tocbot要求H1-H6的标签上必须有id。

解决mavonEditor生成的html的id不在H标签的办法

<article class="js-toc-content" v-html="artData.content" ref="artContent"></article>
<script>
export default {
  methods:{
    //给h标签添加id
    addMao(){
      let nodes = this.$refs.artContent.children;
      if (nodes.length) {
          for (let i = 0; i < nodes.length; i++) {
            let node = nodes[i];
              let reg = /^H[1-6]{1}$/;
              if (reg.exec(node.tagName)) {
                  node.id = node.firstElementChild.id;
                  node.firstElementChild.removeAttribute('id');
              }
          }
      }
    }
  }
}
</script>

先给article标签添加ref,通过node节点查找html内容中所有的标签,正则匹配到所有H标签后,对每个H标签的内部a节点元素获取到id之后传递给对应的H标签,并且删除a标签内的id

使用tocbot生成锚点目录

安装tocbot

执行命令 npm i tocbot -S安装依赖

使用tocbot

  • 在组件中引入 import tocbot from 'tocbot';

  • 初始化tocbot

    在生命周期中推荐在mounted中初始化tocbot,因为此时如果使用的是vue-ssr,可以保证服务端不报错,documentwindow 报错的问题

    <script>
    export default {
      //...其他代码
      mounted() {
          tocbot.init({
            tocSelector: "#skytoc",//要把目录添加元素位置,支持选择器
            contentSelector: ".js-toc-content",//获取html的元素
            headingSelector: "h1, h2, h3",//要显示的id的目录
            hasInnerContainers: false
          });
      },
      //..其他代码
    }
    </script>
    
  • 引入样式

    <style scoped>
    @import url('https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css');
    </style>
    

效果预览

QQ202004021407182x.png

有疑问可以在下方评论或者关注我的个人博客哈

下一片预告:

欢迎关注我的个人博客,第一时间发布最新内容:小新的个人博客,完整源码在我的github:[完整源码](

avatar

Sky(小新)

个人签名: 提升能力,创造价值!

江苏-南京
skylpz@qq.com