简单的生成文章内容目录（vue可用）

在富文本辑编器里面写文章时，我们通常会使用h1-h6标签来定义章节标题。在用户端显示时希望展示目录结构。如图；

这里生成目录结构可以借助第三方插件来实现，但某些情况下不希望引用太多的第三方资源就需要自己实现一个。
核心思路：拿到所有的h标签的节点集合，这个集合就是内容（平级）的目录，我们只需要将平级目录根据标签的（level 等级)/大小，设定一个缩进的长度乘标签大小就可生成有层次的目录结果。为了能使用使用瞄点定位，故每个节点设定一个id
核心处理代码

 //拿到文章内容的节点let parent = document.getElementById("previewer")//拿到文章里面的h1-h6标签let doms = parent.querySelectorAll('h1,h2,h3,h4,h5,h6');let hEles = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']//结果集let catalogue = [];let index = 0;if(doms.length>0){doms.forEach(element => {var nodetext = element.innerHTML.replace(/<\/?[^>]+>/g, "");nodetext = nodetext );let name = element.nodeName.toLowerCase();if (hEles.includes(name)) {index++;let id = `catalogue_${index}`;//为当前节点添加id，方便使用瞄点定位element.setAttribute("id", id)let level = name.replace("h", "");catalogue.push({ id: id, key: name, title: nodetext, level: Number(level) });}});

以下是vue版本的实现

let data = reactive({ news: {}, loading: true, catalogue: [] })const { proxy } = getCurrentInstance()let id = proxy.$root.$router.currentRoute.value.params.idonMounted(() => {proxy.$http.get(`/api/blog/news/${id}`).then((res) => {data.news = res;document.title = res.title;});})nextTick(() => {setTimeout(() => {//等待dom 加载完成uParse("#previewer", {rootPath: 'https://cdn.jsdelivr.net/gh/t-jian/static/theme/ueditor-1.4.3/',liiconpath: 'https://cdn.jsdelivr.net/gh/t-jian/static/theme/ueditor-1.4.3/listicon/',});setTimeout(() => {//防止闪烁data.loading = false;//目录导航let parent = document.getElementById("previewer")let doms = parent.querySelectorAll('h1,h2,h3,h4,h5,h6');let hEles = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']let catalogue = [];let index = 0;if(doms.length>0){doms.forEach(element => {var nodetext = element.innerHTML.replace(/<\/?[^>]+>/g, "");nodetext = nodetext.replace(/&nbsp;/ig, "");let name = element.nodeName.toLowerCase();if (hEles.includes(name)) {index++;let id = `catalogue_${index}`;element.setAttribute("id", id)let level = name.replace("h", "");catalogue.push({ id: id, key: name, title: nodetext, level: Number(level) });}});data.catalogue = catalogue;}}, 100);}, 300);

 <div class="item-card rt-panel"><div class="nav-title">文章导航</div><ul class="catalogue-box"><li v-for="item in catalogue" :key="item"><a :href="'#'+item.id"><span :style="'margin-left:'+(4*item.level)+'px;'">{{item.title}}</span> </a> </li></ul></div>

简单的生成文章内容目录（vue可用）相关推荐

织梦缩略图自动补齐绝对路径_织梦生成文章内容缩略图时自动加上域名绝对路径...
今天又接了个织梦CMS的有偿服务,客户想要后台添加文章内容的时候,缩略图自动变成带上绝对路径的格式.比如我们默认的缩略图是这样的 /uploads/allimg/150814/123P2NB-0-lp ...
织梦缩略图自动补齐绝对路径_织梦生成文章内容缩略图时自动加上绝对路径教程...
大家打开织梦的后台路径默认是dede/article_add.php 和 dede/article_edit.php 两个文件一个是添加的时候,一个是编辑的时候搜索 if(preg_match(& ...
js 根据文章内容生成目录，锚点链接跳转，根据标题生成目录
效果图: 我们都知道锚点链接的跳转是通过<a href="#t0">标题</a>和<a name="t0"></a&g ...
hexo嵌入html传消息的,Hexo添加Toc支持，生成文章目录
Hexo提供了诸多插件来增强博客体验,地址http://hexo.io/plugins/. 在博客搬迁的时发现一个生成文章目录的插件,hexo-toc. hexo-toc为防插件误认标记,文章以下出现 ...
如何在 Word 中使用自定义样式生成文章目录
如何在 Word 中使用自定义样式生成文章目录概要本文介绍如何在 Microsoft Word 2002 和 Microsoft Office Word 2003 中使用自定义样式创建目录.在 W ...
C++随机生成字符串，亲测可用，简单易懂
C++随机生成字符串,亲测可用,简单易懂话不多说,上代码.蜜汁自信注释写的很清楚,嘿嘿.第一次写文章,希望能够对大家有一丢丢的帮助吧~ #include <iostream> using ...
根据文章中H标签自动生成文章目录
以前看到csdn上的目录结构就想把它移植到博客里,今天抽了个空从csdn上拔下了代码. js代码,复制放入到single.php页面中 <script type="text/javas ...
一个简单的文章内容管理系统（增删改查）
目录设计需求源代码连接数据库运行程序具体展示设计需求用户字段:用户名.密码登录不登录可以访问成功进入文章管理列表页面,失败提示注册不登录可以访问注册字段:用户名.密码.确认密 ...
帝国cms把网站文章内容生成word文档下载插件
帝国cms把网站文章内容生成word文档下载插件插件介绍 jQuery Word Export是一款可以将网页中的文字导出到微软Word文档中的jQuery插件.它通过FileSaver.js文件来 ...

简单的生成文章内容目录（vue可用）

简单的生成文章内容目录（vue可用）相关推荐

最新文章

热门文章