我有一个使用 MarkMap 的简单静态 HTML 页面。我链接到两个必需的库来启用该功能。我不太清楚为什么我可以渲染思维导图和默认工具栏，但没有点击工具栏来执行相应的操作（例如，放大、缩小、居中等）。非常感谢任何帮助。
Code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Markmap</title>
<style>
svg.markmap {
width: 100%;
height: 100vh;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<div id="container">
<div id="mm" class="markmap">
<script type="text/template">
---
markmap:
maxWidth: 300
colorFreezeLevel: 2
---
# markmap
## Links
- <https://markmap.js.org/>
- [GitHub](https://github.com/markmap/markmap)
## Related
- [coc-markmap](https://github.com/markmap/coc-markmap)
- [gatsby-remark-markmap](https://github.com/markmap/gatsby-remark-markmap)
## Features
- links
- **inline** ~~text~~ *styles*
- multiline
text
- `inline code`
- Katex - $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
- This is a very very very very very very very very very very very very very very very long line.
</script>
<script>
const { markmap } = window;
const { Toolbar } = markmap;
const { el } = Toolbar.create(mm);
el.style.position = 'absolute';
el.style.bottom = '0.5rem';
el.style.right = '0.5rem';
// `container` could be the element that contains both the markmap and the toolbar
container.append(el);
</script>
</div>
</div>
</body>
</html>
我自己在尝试创建 MacOS 快捷方式以从 Markdown 文本生成标记映射 HTML 页面时遇到了同样的问题。经过两天的研究，我找到了解决方法。
我的带有工作工具栏的原始 stackblitz 分支在这里：https://stackblitz.com/edit/markmap-autoloader-my5ajo?file=index.html
我所做的两个改变是这些。
在我们使用自动加载器的部分中，如下所示：
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
在看到标记映射自动加载器
模块页面上的
Load Manually部分后，我用这个替换了它。
<! -- CHANGED SECTION HERE </-->
<script>
window.markmap = {
autoLoader: { manual: true, toolbar: true },
};
</script>
<script src="https://cdn.jsdelivr.net/npm/markmap-autoloader"></script>
<script>
// Render in 5s
setTimeout(() => {
markmap.autoLoader.renderAll();
}, 5000);
</script>
<! -- CHANGED SECTION END </-->
当我深入研究 markmap-autoloader 存储库时，我在 index.ts 文件中发现了一些代码，这些代码表示如果您将工具栏选项传递给自动加载器，它将为我们执行创建和附加操作。
因此，在将
toolbar: true <!-- COMMENTED OUT THIS BLOCK
<script>
const { markmap } = window;
const { Toolbar } = markmap;
const { el } = Toolbar.create(mm);
el.style.position = 'absolute';
el.style.bottom = '0.5rem';
el.style.right = '0.5rem';
// `container` could be the element that contains both the markmap and the toolbar
container.append(el);
</script>
/-->
之后，工具栏从自动加载器本身中显示出来，并且看起来工作正常。