v-md-editor自定义锚点(生成目录)数组转树结构

接前两篇博文,最终方案终于定了,也把之前做的编辑器模式给否决了,原因是系统中有老的文档需要平替,因此就不能通过编辑器这种模式了,太麻烦了。
最终方案:线下手动pandoc word转markdown,然后将文档保存到前端(图片也在对应路径下)页面上菜单绑定文档,文档中自动生成目录;

issue

v-md-editor群里大佬提供了生成自定义锚点(目录)的方式,但是是数组平铺的,根据级别然后展示的时候通过距离形成视觉上的菜单,但是需求模型上是菜单可点击收缩打开方式的,因此,需要调整该数组为树结构,因为本人纯后端,在朋友帮助下,将数组转为了树

解决方法

//0 1 2 3 代表菜单级别
const target = {"titles": [{"title:": "导读","lineIndex": "1","indent": 0},{"title:":"功能范围","lineIndex":"1","indent":1},{"title:":"寻求帮助","lineIndex":"1","indent":1},{"title:":"业务功能介绍","lineIndex":"1","indent":0},{"title:":"1.二级标题","lineIndex":"1","indent":1},{"title:":"1.1 三级标题","lineIndex":"1","indent":2},{"title:":"1.1.1四级","lineIndex":"1","indent":3},{"title:":"1.2 san级","lineIndex":"1","indent":2},{"title:":"2.四3级","lineIndex":"1","indent":1},{"title:":"2.1四2级","lineIndex":"1","indent":2}]
}function getTree(titles) {const res = []let treeNodeList = []let last = nullfunction getParentNode(index) {let currentIndex = index - 1while (!treeNodeList[currentIndex]) {currentIndex--}return treeNodeList[currentIndex]}for (let i = 0, l = titles.length; i < l; i++) {const item = titles[i]if (item.indent == 0) {res.push(item)treeNodeList = []} else {// 父节点const currentParent = getParentNode(item.indent)if (currentParent.children) {currentParent.children.push(item)} else {currentParent.children = [item]}if (last.indent > item.indent) {treeNodeList = treeNodeList.splice(0, item.indent)}}// 把自己放到节点队列中treeNodeList[Number(item.indent)] = itemlast = item}return res
}console.log(JSON.stringify(getTree(target.titles)))

最终得到的转换后的结构result
ps: 用后端逻辑开发前端真的是不好转换,总想着先去定义对象,结果根本没那么需要,强弱类型的开发方式真的太不同了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/86689.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

tidevice+appium在windows系统实施iOS自动化

之前使用iOS手机做UI自动化都是在Mac电脑上进行的&#xff0c;但是比较麻烦&#xff0c;后来看到由阿里开源的tidevice工具可以实现在windows上启动WDA&#xff0c;就准备试一下&#xff0c;记录一下过程。 tidevice的具体介绍可以参考一下这篇文章&#xff1a;tidevice 开源&…

Flutter实现倒计时功能,秒数转时分秒,然后倒计时

Flutter实现倒计时功能 发布时间&#xff1a;2023/05/12 本文实例为大家分享了Flutter实现倒计时功能的具体代码&#xff0c;供大家参考&#xff0c;具体内容如下 有一个需求&#xff0c;需要在页面进行显示倒计时&#xff0c;倒计时结束后&#xff0c;做相应的逻辑处理。 实…

GrapeCity Documents for PDF (GcPdf) 6.2 Crack

GrapeCity PDF 文档 (GcPdf) 改进了对由 GcPdf 以外的软件生成的现有 PDF 文档的处理 在新的 v6.2 版本中&#xff0c;GcPdf 增强了 PDF 文档的加载和保存&#xff0c;并提供以下优势&#xff1a; GcPdf 现在可以加载和保存可能不严格符合 PDF 规范的 PDF 文档。GcPdf 现在将…

springBoot整合RabbitMq实现手动确认消息

如何保证消息的可靠性投递&#xff1f; 1.保证生产者向broke可靠性投递&#xff0c;开启ack投递成功确认&#xff0c;如果失败的话进行消息补偿 /*** author yueF_L* date 2023-08-10 01:32* ConfirmCallback&#xff1a;消息只要被 RabbitMQ broker 接收到就会触发confirm方…

logback日志框架学习(1)介绍logback

首先说下对日志框架的感受&#xff0c;很多人slf4j-api slf4j-simple logback-core logbak-classic log4j logj42很多的日志框架&#xff0c;控制台各种输出的时候日志框架warn error&#xff0c;有时候还不能输出日志。究其原因&#xff0c;大家都觉得日志框架不太重要&#x…

NSS [UUCTF 2022 新生赛]ez_upload

NSS [UUCTF 2022 新生赛]ez_upload 考点&#xff1a;Apache解析漏洞 开题就是标准的上传框 起手式就是传入一个php文件&#xff0c;非常正常的有过滤。 .txt、.user.ini、.txxx都被过滤了&#xff0c;应该是白名单或者黑名单加MIME过滤&#xff0c;只允许.jpg、.png。 猜测二…

阿里云服务器部署RabbitMQ流程

阿里云百科分享使用阿里云服务器部署RabbitMQ流程&#xff0c;RabbitMQ是实现了高级消息队列协议&#xff08;AMQP&#xff09;的开源消息代理软件&#xff0c;用于在分布式系统中存储转发消息&#xff0c;有良好的易用性、扩展性和高可用性。本文介绍如何通过ECS实例部署Rabbi…

四化智造MES(API)与金蝶云星空对接集成派工作业打通生产订单新增

四化智造MES&#xff08;API&#xff09;与金蝶云星空对接集成派工作业打通生产订单新增 对接系统&#xff1a;四化智造MES&#xff08;API&#xff09; MES建立统一平台上通过物料防错防错、流程防错、生产统计、异常处理、信息采集和全流程追溯等精益生产和精细化管理&#x…

objectMapper.configure 方法的作用和使用

objectMapper.configure 方法是 Jackson 提供的一个用于配置 ObjectMapper 对象的方法。ObjectMapper 是 Jackson 库的核心类&#xff0c;用于将 Java 对象与 JSON 数据相互转换。 configure 方法的作用是设置 ObjectMapper 的配置选项&#xff0c;例如设置日期格式、设置序列…

年轻代频繁GC ParNew导致http变慢

背景介绍 某日下午大约四点多&#xff0c;接到合作方消息&#xff0c;线上环境&#xff0c;我这边维护的某http服务突然大量超时&#xff08;对方超时时间设置为300ms&#xff09;&#xff0c;我迅速到鹰眼平台开启采样&#xff0c;发现该服务平均QPS到了120左右&#xff0c;平…

1.Fay-UE5数字人工程导入(UE数字人系统教程)

非常全面的数字人解决方案(含源码) Fay-UE5数字人工程导入 1、工程下载&#xff1a;xszyou/fay-ue5: 可对接fay数字人的ue5工程 (github.com) 2、ue5下载安装&#xff1a;Unreal Engine 5 3、ue5插件安装 依次安装以下几个插件 4、双击运行工程 5、切换中文 6、检…

Zookeeper与Kafka

Zookeeper与Kafka 一、Zookeeper 概述1.Zookeeper 定义2.Zookeeper 工作机制3.Zookeeper 特点4.Zookeeper 数据结构5.Zookeeper 应用场景6.Zookeeper 选举机制 二、部署 Zookeeper 集群1.准备 3 台服务器做 Zookeeper 集群2.安装 Zookeeper3.拷贝配置好的 Zookeeper 配置文件到…

Could not resolve host: mirrorlist.centos.org; Unknown error解决方法

今天服务器安装完CentOS系统后&#xff0c;安装网络的时候&#xff0c;出现无法联网yum yum -y install net-tools 以上代码无法运行并报错&#xff0c;这里我要提醒大家&#xff0c;如果在初始安装的时候选中安装网络工具模块就不用在安装net-tools了&#xff0c;因为我选中…

k8s集群网络插件搭建——————解决集群notready(k8s1.20版本,docker24)

前面已经提到&#xff0c;在初始化 k8s-master 时并没有网络相关配置&#xff0c;所以无法跟 node 节点通信&#xff0c;因此状态都是“NotReady”。但是通过 kubeadm join 加入的 node 节点已经在k8s-master 上可以看到。 那么&#xff0c;这个时候我们该怎么办呢&#xff1f;…

开工大吉|华润鞋业二期自动化改造项目开工典礼圆满举行

2023年8月10日上午&#xff0c;山东百华鞋业有限公司择良辰吉时隆重举行了华润鞋业二期厂房动工仪式&#xff0c;公司总经理郭兴梅女士携公司管理层代表和施工单位代表参加了动工仪式。 根据公司发展规划&#xff0c;对未来发展的美好期许&#xff0c;以及公司生产与研发保持的…

Highcharts for Python Crack

Highcharts for Python Crack 修改了将数据点序列化为JavaScript文字对象的方式。 现在&#xff0c;如果它们的配置属性是Highcharts&#xff08;JS&#xff09;在JavaScript数组表示法中支持的属性&#xff0c;则它们被序列化为JavaScript数组。 否则&#xff0c;代码会回退…

QT学习笔记-QT安装oracle oci驱动

QT学习笔记-QT安装oracle oci驱动 0、背景1、环境以及条件说明2、编译驱动2.1 下载oracle instant client2.2 编译qt oci驱动2.2.1 修改oci.pro2.2.2 MinGW64构建套件编译2.2.3 MSVC2019_64构建套件编译 3、访问数据库运行成功 0、背景 在使用QT开发应用的过程中&#xff0c;往…

全排列——力扣46

文章目录 题目描述解法:回溯题目描述 解法:回溯 //version 1 vector<vector<int>> permute(<

Stable Diffuion webui Mac版本安装过程

系统环境 操作系统&#xff1a;MacOS Ventura13.5 芯片&#xff1a;Apple M2 Max Python: 3.10 安装前置准备 git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui.git注意事项&#xff1a;修改源码内全部 git clone 链接&#xff0c;设置代理 https://ghpr…

【小程序】Canvas 画布分享海报

成品效果图 可以通过切换下面图片形成不同的海报背景分享图 <template><view>// type"2d"必须加<canvas type"2d" :style"{width:Artwidth px,height:Artheight px, margin:0 auto}" canvas-id"firstCanvas"id&quo…