简介
该挂件在 fex-team/kityminder-editor 的基础上，做了一些小改动以适配自己的使用习惯。用起来感觉还可以，顺便分享一下。
想起弄新导图挂件一开始是因为之前 JSMind 版的思维导图在节点的多行文本输入方面体验不佳，虽然可手动输入 <br/> 来换行，但用起来还是不太顺手。
主要做了以下修改：
- 超链接支持思源块链接，并简化插入链接、引用块的步骤
- 支持悬浮预览笔记内的文档、块
- 引入全屏模式
- 支持将当前文档的大纲转为思维导图，保留标题的块引，方便悬浮预览对应章节。
- 修改控制导图缩放的交互方式
- 修改切换到拖拽模式的方式
- 支持通过快捷键
Ctrl+i/Ctrl+ o快速导入/导出导图的 JSON 数据 - 支持通过快捷键
Alt+i快速导入 JSMind 版思维导图的数据，相当于导入无序列表数据 - 支持通过快捷键
Alt+o将导图数据导出为无序列表，保留链接和块引 - 将导图的数据存储到挂件的块属性——备注中；
截图：
视频演示
演示环境：Windows 10 ，V2.7.2
挂件压缩包
环境：Windows 10，V2.7.2
1、演示时使用的版本
2、修复问题
当导图出现在搜索界面的预览窗口时，导图初始化后仍选中根节点的行为会导致焦点转移到导图根节点，进而造成导图根节点标题被误修改的问题。
现修改为：初始化后自动取消选中根节点，这样可以避免导图在搜索界面的预览窗口下被误修改。
3、修复问题
- 修复问题：当节点中有换行时，导出无序列表后再导入，会出现无法导入的问题；
4、修复问题
- 修复【复制笔记内容作为节点备注时，块引无法识别】的问题。
5、导出图片
- 按快捷键
ctrl+p，将导图内容以 png 图片的格式导出
看个大概还可以，没有想象中那么清晰。
使用说明
1、插入超链接
1、手动指定链接的锚文本
- 双击导图节点后进入编辑模式，手动输入锚文本后按
Enter结束编辑。——节点内换行是Shift+Enter。 - 复制外部链接或者笔记内文档/块的超链接地址
- 单击导图节点进行选中，然后按快捷键
Ctrl+K即可插入超链接
2、使用引用块的标题作为锚文本
- 在笔记中某个文档/块的菜单中，点击【复制该块为引用块】
- 在导图中单击选中一个节点，然后按快捷键
Ctrl+K即可插入超链接，此时链接的锚文本就是引用块的标题。
2、文档/块的悬浮预览
如果插入的是笔记内文档或者块的链接，那么按住 Alt 键后，鼠标悬浮在超链接图标上时会弹出该文档/块的预览窗口。
参考之前 JSMind 版思维导图里修改 mian.js 的做法——【分享】导图挂件更新，目前需要手动挂载方法：
示例：Windows10 ，V2.7.2
修改方法如下：
使用编辑器比如 VSCode 打开 笔记安装的文件夹\resources\stage\build\app\main.js，使用查找/替换功能：
搜索
t.WYSIWYG=class
替换成
window._M=n(236);window._o=n(8438);window._a=n(7377);t.WYSIWYG=class
修改后保存并关闭。
3、全屏模式
这里用的是增/删 类名的方式，所以要在 theme.css 中添加一个样式。
比如：现在使用的主题是 Dark
打开思源笔记——【更多】——【设置】——【外观】——【打开主题文件夹】，打开后，找到【Dark】文件夹，里面有个 theme.css，打开后在最后加上：
.fullScreen {
position: fixed;
top: 0px;
left: 0px;
width: 100vw !important;
height: 100vh !important;
z-index: 200;
}
单击导图空白处让导图获得焦点后，使用快捷键 Alt+F 即可进入/退出全屏模式。
4、数据存储
- 导图数据以 JSON 格式存储到挂件块的属性【备注】中。
- 导图内容发生变更后，大于 1s 后会自动保存一次。
- 还可以使用快捷键
Ctrl+S或者手动点击右上角的【保存】按钮来手动保存数据。 - 保存数据时，会自动整理布局。
5、JSON 数据的导入/导出
数据导出
- 鼠标点击一下导图空白处让导图获得焦点；
- 按快捷键
Ctrl+o将导图的 JSON 数据复制到剪切板 - 然后可以在代码块中粘贴 JSON 数据进行备份。或者到一个空白的导图中进行导入。
数据导入
- 上一步已经将导图的 JSON 数据复制到剪切板
- 对一个新插入的导图或者已经存在的导图，鼠标点击其空白处让导图获得焦点；
- 按快捷键
Ctrl+I，就会将剪切板中的 JSON 数据写入到挂件属性中，此时会提示：【导入成功，刷新后会看到新数据】- 如果想使用导入的数据，此时点击右上角【刷新】按钮或者按【F5】即可渲染新导入的数据。
- 如果是不小心按错了，不需要新数据来覆盖当前导图，可以按
Ctrl+S来保存当前导图，此时新导入的数据会被当前数据覆盖掉。 - 如果提示【非导图数据无法导入】，说明刚才没有正确的复制到导图的数据，最好重新导出一遍再进行导入。
6、导入旧版导图【JSMind】的数据
如果你之前有使用 JSMind 版思维导图的话，这个可能有点帮助。
- 在 JSMind 版导图中，单击导图空白处让导图获得焦点，然后按快捷键
Alt+Q，此时会将导图的数据以无序列表的形式复制到剪切板。 - 在当前的导图中，单击导图空白处让导图获得焦点，然后按快捷键
Alt+i进行导入，提示导入成功后，按F5刷新导图即可。
7、将导图数据以无序列表的形式导出
- 点击导图空白处让导图获得焦点
- 按快捷键
Alt+o，此时会将导图的数据以无序列表的形式复制到剪切板 - 到笔记中粘贴无序列表即可。
8、将当前文档的大纲转为思维导图
用法：
- 在有大纲的文档中插入导图后，单击导图空白处，然后按快捷键
Alt+D，弹出提示：需要刷新 - 按下
F5来刷新导图即可看到大纲对应的导图。
导图里保留了各级标题的块引，方便查看对应章节的内容。见视频演示：
9、插入/删除备注
单击选中节点后，按下快捷键即可快速插入备注。当然，也可以点击顶栏的【备注】来手动输入备注内容。
- 添加快捷键
Ctrl+D——将剪切板中的内容作为备注内容插入节点、 - 添加快捷键
Ctrl+E——删除当前选中节点的备注 - 添加快捷键
Ctrl+G——将剪切板中的内容（以代码块的形式）作为备注内容插入节点。
这几个快捷键设置的有点随意，当前纯粹是怎么顺手怎么来。如果不太符合你的习惯，可以到挂件的 index.html 那里修改一下。
10、控制导图缩放
- 按住 Ctrl 后，通过鼠标滚轮来缩放导图，向前滚是放大。
- 还可以通过快捷键
Ctrl +、Ctrl -来缩放导图。
11、切换拖拽模式
在导图空白处，单击鼠标中键，即可进入/退出拖拽模式。
进入拖拽模式后，可通过按下鼠标左键并移动鼠标来拖拽导图。
12、粘贴样式
给粘贴样式设置了快捷键 Alt+X，使用方法如下：
- 给某个节点设置样式，比如背景色、字体颜色、字体大小等
- 点击顶栏——外观——复制样式
- 选中其他一个或者多个节点后，按快捷键
Alt+X即可粘贴刚刚复制的样式。
13、自定义导图主题
样式这个比较主观，你可以在挂件文件夹中打开 MindMap/bower_components/kityminder-core/dist/kityminder.core.min.js 这个文件，然后从最底下往上找到类似以下代码段：
["classic","classic-compact"].forEach(function(a){var b="classic-compact"==a;e.register(a,{background:'#3c3c3c',"root-color":"#ffffff","root-background":"#bd4750","root-stroke":"#bd4750","root-font-size":24,"root-padding":b?[10,25]:[15,25],"root-margin":b?[15,25]:[30,100],"root-radius":10,"root-space":10,"root-shadow":"transparent","main-color":"white","main-background":"#a35157","main-stroke":"#a35157","main-font-size":16,"main-padding":b?[6,10]:[6,20],"main-margin":b?[5,10]:20,"main-radius":5,"main-space":5,"main-shadow":"transparent","sub-color":"white","sub-background":"transparent","sub-stroke":"#616161","sub-font-size":12,"sub-padding":[5,10],"sub-margin":b?[5,10]:[15,20],"sub-tree-margin":30,"sub-radius":5,"sub-space":5,"connect-color":"#a8be70","connect-width":1.5,"main-connect-width":3,"connect-radius":5,"selected-background":"#3c3c3c","selected-stroke":"rgb(254, 219, 0)","selected-color":"white","marquee-background":"rgba(255,255,255,.3)","marquee-stroke":"white","drop-hint-color":"yellow","sub-drop-hint-width":2,"main-drop-hint-width":4,"root-drop-hint-width":4,"order-hint-area-color":"rgba(0, 255, 0, .5)","order-hint-path-color":"#0f0","order-hint-path-width":1,"text-selection-color":"rgb(27,171,255)","line-height":1.5})})
自行修改配置，来定义自己专属的导图主题。
14、其他
- 导图内搜索的快捷键是
Ctrl+F Alt+1、Alt+2等可设置导图节点的展开层级。
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于