简介
该挂件在 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
等可设置导图节点的展开层级。
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于