feature-mindmap: editor.md add mindmap

主要在markdown编辑器中增加思维导图渲染方式,引入markmap开源组件
This commit is contained in:
zhangsheng 2021-09-24 14:31:13 +00:00
parent dc386db159
commit 1290dea30d
6 changed files with 8758 additions and 1 deletions

66
static/editor.md/editormd.js Normal file → Executable file
View File

@ -170,6 +170,7 @@
flowChart : false, // flowChart.js only support IE9+
sequenceDiagram : false, // sequenceDiagram.js only support IE9+
mermaid : true,
mindMap : true, // 脑图
previewCodeHighlight : true,
toolbar : true, // show/hide toolbar
@ -569,6 +570,20 @@
});
}
if (settings.mindMap)
{
editormd.loadScript(loadPath + "mindmap/transform.min", function() {
editormd.loadScript(loadPath + "mindmap/d3@5", function() {
editormd.loadScript(loadPath + "mindmap/view.min", function() {
if (!isLoadedDisplay){
isLoadedDisplay = true;
_this.loadedDisplay();
}
});
});
});
}
if(settings.sequenceDiagram) {
editormd.loadCSS(loadPath + "sequence/sequence-diagram-min", function () {
editormd.loadScript(loadPath + "sequence/webfont", function() {
@ -1560,6 +1575,22 @@
return this;
},
/**
* 解析思维导图 - 2020-04-12
*
* @returns {editormd} 返回editormd的实例对象
*/
mindmapRender:function(){
this.previewContainer.find(".mindmap").each(function(){
var mmap = $(this);
var md_data = window.markmap.transform(mmap.text().trim());
window.markmap.markmap("svg#"+this.id,md_data)
});
return this;
},
/**
* 解析和渲染流程图及时序图
* FlowChart and SequenceDiagram Renderer
@ -2069,6 +2100,7 @@
sequenceDiagram : settings.sequenceDiagram,
previewCodeHighlight : settings.previewCodeHighlight,
mermaid : settings.mermaid,
mindMap : settings.mindMap, // 思维导图
};
var markedOptions = this.markedOptions = {
@ -2150,6 +2182,14 @@
}
}
// 渲染脑图
if(settings.mindMap){
setTimeout(function(){
_this.mindmapRender();
},10)
}
if (settings.flowChart || settings.sequenceDiagram || settings.mermaid)
{
flowchartTimer = setTimeout(function(){
@ -3539,7 +3579,7 @@
ext : ".png"
};
// Twitter Emoji (Twemoji) graphics files url path
// Twitter Emoji (Twemoji) graphics files url path
editormd.twemoji = {
path : "http://twemoji.maxcdn.com/36x36/",
ext : ".png"
@ -3896,6 +3936,16 @@
{
return "<p class=\"" + editormd.classNames.tex + "\">" + code + "</p>";
}
else if (/^mindmap/i.test(lang)){
  var len = 9 || 32;
  var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
  var maxPos = $chars.length;
  var map_id = '';
  for (var i = 0; i < len; i++) {
    map_id += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return "<svg class='mindmap' style='width:100%;min-height=150px;' id='mindmap-"+ map_id +"'>"+code+"</svg>";
}
else
{
@ -4183,6 +4233,7 @@
sequenceDiagram : false,
previewCodeHighlight : true,
mermaid : true,
mindMap : true, //思维导图
};
editormd.$marked = marked;
@ -4213,6 +4264,7 @@
flowChart : settings.flowChart,
sequenceDiagram : settings.sequenceDiagram,
mermaid : settings.mermaid,
mindMap : settings.mindMap, // 思维导图
previewCodeHighlight : settings.previewCodeHighlight,
};
@ -4307,6 +4359,18 @@
}
}
// 前台渲染脑图
if(settings.mindMap){
var mindmapHandle = function(){
div.find(".mindmap").each(function(){
var mmap = $(this);
var md_data = window.markmap.transform(mmap.text().trim());
window.markmap.markmap("svg#"+this.id,md_data)
});
}
mindmapHandle();
}
div.getMarkdown = function() {
return saveTo.val();
};

2
static/editor.md/lib/mindmap/d3@5.js vendored Executable file

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

2
static/editor.md/lib/mindmap/view.min.js vendored Executable file

File diff suppressed because one or more lines are too long