Comments (2)
renders中收集大纲实现:
//类型声明
export interface ReferenceEntry {
level: number,
label: string,
children: ReferenceEntry[]
}
//查找父级
const searchParent = (entries: ReferenceEntry[], level: number): ReferenceEntry[] => {
if (entries.length == 0) return entries;
const cLevel = entries[entries.length - 1].level;
if (cLevel >= level) {
return entries;
} else {
return searchParent(entries[entries.length - 1].children, level);
}
};
//创建state
const [references, setReferences] = useState<ReferenceEntry[]>([]);
//renderHeading抽取目录
renderHeading: (node, entering) => {
const id = Lute.GetHeadingID(node);
const level = node.__internal_object__.HeadingLevel;
if (entering) {
return [
`<h${level} id='${id}' class='heading'>`,
Lute.WalkContinue];
} else {
setReferences(prevState => {
//lodash 浅拷贝
const nextState = clone(prevState);
searchParent(nextState, Number(level)).push({
level: Number(level),
label: id,
children: [],
});
return nextState;
});
return [
`</h${level}>`,
Lute.WalkContinue];
}
}
收集结果:
//收集结果
[
{
"level": 2,
"label": "教程",
"children": []
},
{
"level": 2,
"label": "语法指导",
"children": [
{
"level": 3,
"label": "普通内容",
"children": []
},
{
"level": 3,
"label": "提及用户",
"children": []
},
{
"level": 3,
"label": "表情符号-Emoji",
"children": [
{
"level": 4,
"label": "一些表情例子",
"children": []
}
]
},
{
"level": 3,
"label": "大标题---Heading-3",
"children": [
{
"level": 4,
"label": "Heading-4",
"children": [
{
"level": 5,
"label": "Heading-5",
"children": [
{
"level": 6,
"label": "Heading-6",
"children": []
}
]
}
]
}
]
},
{
"level": 3,
"label": "图片",
"children": []
},
{
"level": 3,
"label": "代码块",
"children": [
{
"level": 4,
"label": "普通",
"children": []
},
{
"level": 4,
"label": "语法高亮支持",
"children": [
{
"level": 5,
"label": "演示-Go-代码高亮",
"children": []
},
{
"level": 5,
"label": "演示-Java-高亮",
"children": []
}
]
}
]
},
{
"level": 3,
"label": "有序-无序-任务列表",
"children": [
{
"level": 4,
"label": "无序列表",
"children": []
},
{
"level": 4,
"label": "有序列表",
"children": []
},
{
"level": 4,
"label": "任务列表",
"children": []
}
]
},
{
"level": 3,
"label": "表格",
"children": []
},
{
"level": 3,
"label": "隐藏细节",
"children": []
},
{
"level": 3,
"label": "段落",
"children": []
},
{
"level": 3,
"label": "链接引用",
"children": []
},
{
"level": 3,
"label": "数学公式",
"children": []
},
{
"level": 3,
"label": "脑图",
"children": []
},
{
"level": 3,
"label": "流程图",
"children": []
},
{
"level": 3,
"label": "时序图",
"children": []
},
{
"level": 3,
"label": "甘特图",
"children": []
},
{
"level": 3,
"label": "图表",
"children": []
},
{
"level": 3,
"label": "五线谱",
"children": []
},
{
"level": 3,
"label": "Graphviz",
"children": []
},
{
"level": 3,
"label": "Flowchart",
"children": []
},
{
"level": 3,
"label": "多媒体",
"children": []
},
{
"level": 3,
"label": "脚注",
"children": []
}
]
},
{
"level": 2,
"label": "快捷键",
"children": []
}
]
渲染结果
from vditor.
目录导出具体可参见 outlineRender
from vditor.
Related Issues (20)
- Vditor.outlineRender渲染大纲的样式要自己加上去吗?没有自带的? HOT 1
- 缺少文案剧中功能 HOT 1
- 所见即所得粘贴表格不支持合并单元格 HOT 3
- 请求添加内置搜索功能, 文档多了,不能Ctrl+F查找有点费劲 HOT 2
- 尖括号`<>`中的英文会被识别为html标签渲染,导致渲染结果看不到尖括号中的内容 HOT 1
- 粘贴的图片怎么自动上传到服务器 HOT 1
- 不支持单个 $ 包围多行公式左对齐. 两个 $$ 包围多行公式又得居中显示比较麻烦. HOT 3
- 有时需要在vditor渲染完毕的时候触发事件,是否可以提供一个方法vditor.rendered=callback? HOT 3
- 谷歌浏览器,vditor 即时渲染模式下,首行为标题,然后全选,接着中文输入,就会奔溃 HOT 1
- 上传图片以后,希望可以拖拽来调整图片的大小 HOT 1
- 似乎会自动吞掉换行用的两个空格 HOT 1
- 如何把一键markdown文档的图片URL地址转为本地地址? HOT 1
- 引入antd css , 编辑器内全选长文本 删除 会卡顿,如果没有引入,则很丝滑 HOT 1
- 添加 `updateToolbarConfig` 方法
- 希望增加methods:获取焦点在字符串中的位置 HOT 4
- 是否可以写一些 example 用来了解使用方法活着补充一些文档 HOT 3
- insertValue插入文本无法正确渲染 HOT 3
- 超大体积文件 HOT 6
- 编辑界面,如何隐藏左边的 </> 这个符号?? HOT 1
- 在及时渲染和所见及所得模式下代码块的编辑是否可以直接编辑而不是分为上下两栏 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vditor.