FE/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-17 22:08:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

Doc: update

Browse Source
This commit is contained in:
街角小林
2024-06-05 09:20:12 +08:00
parent abacff6ede
commit 9294fc4e7b
27 changed files with 370 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/pages/Doc/catalogList.js
View File

@@ -45,7 +45,7 @@ let APIList = [
'markdown',
'utils'
]
let helpList = new Array(5).fill(0).map((_, index) => {
let helpList = new Array(6).fill(0).map((_, index) => {
return 'help' + (index + 1)
})

46
web/src/pages/Doc/en/changelog/index.md
View File

@@ -1,5 +1,51 @@
# Changelog
## 0.10.0
Major updates: Upgrade the interaction effect when dragging nodes;
Fix:
> 1.Fix the issue where read-only mode can still activate nodes by Ctrl+clicking on them;
>
> 2.Fix the issue of page scaling when setting up scaling in some mobile browsers;
>
> 3.Fix the issue of selecting text when dragging the canvas and adjusting images;
>
> 4.Fix the issue of multiple line breaks when copying node text with line breaks and pasting it;
>
> 5.Fix the issue of displaying blank space when exporting images with custom content before and after nodes;
New:
> 1.Add a new rendering start event node.treeRender_start;
>
> 2.Support displaying watermarks below nodes;
>
> 3.Importing xmind files with multiple canvases supports selecting the specified canvas for import;
>
> 4.Canceling the call to the defenseXSS function has a significant impact on performance; The defenseXSS method is provided as a tool method;
>
> 5.Remove the logic of removing nodes with ql cursor class names from rich text content, and fix the issue of ineffective addition of empty lines when text breaks;
>
> 6.Remove the logic of delayed node editing when inserting new nodes;
>
> 7.Support direct editing of mathematical formulas in rich text editing boxes;
>
> 8.Add demonstration plugins to the packaged file;
Demo：
> 1.支持配置水印显示在节点下方；
>
> 2.导入存在多个画布的xmind文件支持选择指定的画布进行导入；
>
> 3.优化富文本工具条下拉选项列表高度问题；
>
> 4.新建和打开按钮增加导出的提示，防止内容丢失；
>
> 5.快捷键提示支持区分windows和mac；
## 0.9.12
Fix:

29
web/src/pages/Doc/en/changelog/index.vue
View File

@@ -1,6 +1,35 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.10.0</h2>
<p>Major updates: Upgrade the interaction effect when dragging nodes;</p>
<p>Fix:</p>
<blockquote>
<p>1.Fix the issue where read-only mode can still activate nodes by Ctrl+clicking on them;</p>
<p>2.Fix the issue of page scaling when setting up scaling in some mobile browsers;</p>
<p>3.Fix the issue of selecting text when dragging the canvas and adjusting images;</p>
<p>4.Fix the issue of multiple line breaks when copying node text with line breaks and pasting it;</p>
<p>5.Fix the issue of displaying blank space when exporting images with custom content before and after nodes;</p>
</blockquote>
<p>New:</p>
<blockquote>
<p>1.Add a new rendering start event node.treeRender_start;</p>
<p>2.Support displaying watermarks below nodes;</p>
<p>3.Importing xmind files with multiple canvases supports selecting the specified canvas for import;</p>
<p>4.Canceling the call to the defenseXSS function has a significant impact on performance; The defenseXSS method is provided as a tool method;</p>
<p>5.Remove the logic of removing nodes with ql cursor class names from rich text content, and fix the issue of ineffective addition of empty lines when text breaks;</p>
<p>6.Remove the logic of delayed node editing when inserting new nodes;</p>
<p>7.Support direct editing of mathematical formulas in rich text editing boxes;</p>
<p>8.Add demonstration plugins to the packaged file;</p>
</blockquote>
<p>Demo：</p>
<blockquote>
<p>1.支持配置水印显示在节点下方；</p>
<p>2.导入存在多个画布的xmind文件支持选择指定的画布进行导入；</p>
<p>3.优化富文本工具条下拉选项列表高度问题；</p>
<p>4.新建和打开按钮增加导出的提示，防止内容丢失；</p>
<p>5.快捷键提示支持区分windows和mac；</p>
</blockquote>
<h2>0.9.12</h2>
<p>Fix:</p>
<blockquote>

12
web/src/pages/Doc/en/constructor/index.md
View File

@@ -209,8 +209,9 @@ new MindMap({
| enableFreeDrag（v0.2.4+） | Boolean | false | Enable node free(Free drag means that nodes can be dragged to any position on the canvas. Please note that it is not a function of dragging nodes to become siblings of other nodes. The connection of free drag may have certain problems, so it is best not to use this feature) drag | |
| nodeDragPlaceholderMaxSize（v0.6.12+）（v0.10.0+ has been abolished） | Number | 20 | When dragging an element, the maximum height of the block indicating the new position of the element | |
| autoMoveWhenMouseInEdgeOnDrag（v0.7.1+） | Boolean | true | Whether to enable automatic canvas movement when the mouse moves to the edge of the canvas while dragging nodes | |
| dragMultiNodeRectConfig（v0.7.2+） | Object | { width: 40, height: 20, fill: '' } | The style configuration of the schematic rectangle that moves with the mouse when dragging multiple nodes, passing an object, and the field meanings are the width, height, and fill color of the rectangle | |
| dragPlaceholderRectFill（v0.7.2+） | String | | The filling color of the schematic rectangle for the new position when dragging nodes. If not transmitted, the default color for the connected line is used | |
| dragMultiNodeRectConfig（v0.7.2+） | Object | { width: 40, height: 20, fill: 'rgb(94, 200, 248)' } | The style configuration of the schematic rectangle that moves with the mouse when dragging multiple nodes, passing an object, and the field meanings are the width, height, and fill color of the rectangle | |
| dragPlaceholderRectFill（v0.7.2+） | String | rgb(94, 200, 248) | The filling color of the schematic rectangle for the new position when dragging nodes. | |
| dragPlaceholderLineConfig（v0.10.0+） | Object | { color: 'rgb(94, 200, 248)', width: 2 } | Style configuration of schematic lines for new positions when dragging nodes | |
| dragOpacityConfig（v0.7.2+） | Object | { cloneNodeOpacity: 0.5, beingDragNodeOpacity: 0.3 } | The transparency configuration during node dragging, passing an object, and the field meanings are: the transparency of the cloned node or rectangle that follows the mouse movement, and the transparency of the dragged node | |
### 5.Watermark plugin
@@ -229,6 +230,7 @@ new MindMap({
| angle | Number | 30 | Tilt angle of watermark, range: [0, 90] |
| textStyle | Object | {color: '#999', opacity: 0.5, fontSize: 14} | Watermark text style |
| onlyExport（v0.9.2+） | Boolean | false | Is only add watermarks during export |
| belowNode（v0.10.0+） | Boolean | false | Is the watermark displayed below the node |
### 6.AssociativeLine plugin
@@ -245,6 +247,9 @@ new MindMap({
| Field Name | Type | Default Value | Description | Required |
| -------------------------------- | ------- | ---------------- | ------------------------------------------- | -------- |
| richTextEditFakeInPlace（v0.6.13+） | Boolean | false | Set the rich text node edit box to match the size of the node, creating a pseudo in place editing effect. It should be noted that only when there is only text within the node and the shape is rectangular, can the effect be better | |
| enableEditFormulaInRichTextEdit（v0.10.0+） | Boolean | true | | Whether to enable direct editing of mathematical formulas in rich text editing boxes |
| transformRichTextOnEnterEdit（v0.10.0+） | null、Function | null | To convert rich text content, you can pass a function that will be called when entering rich text editing. The function receives the rich text content that is about to be edited and needs to return the processed rich text content | |
| beforeHideRichTextEdit（v0.10.0+） | null、Function | null | You can pass a function that will be executed before the end of rich text editing. The function receives a richText instance, so you can update the kill document data at this time | |
### 8.TouchEvent plugin
@@ -548,7 +553,8 @@ Listen to an event. Event list:
| node_img_mouseenter（v0.6.5+） | Node image mouseenter event | this（node instance）、imgNode（img node）、e（event object） |
| node_img_mouseleave（v0.6.5+） | Node image mouseleave event | this（node instance）、imgNode（img node）、e（event object） |
| node_img_mousemove（v0.6.5+） | Node image mousemove event | this（node instance）、imgNode（img node）、e（event object） |
| node_tree_render_end（v0.2.16+） | Node tree render end event | |
| node_tree_render_end（v0.2.16+） | Node tree render end event | |
| node_tree_render_start（v0.10.0+） | Node tree start rendering event | |
| rich_text_selection_change（v0.4.0+） | Available when the `RichText` plugin is registered. Triggered when the text selection area changes when the node is edited | hasRange（Whether there is a selection）、rectInfo（Size and location information of the selected area）、formatInfo（Text formatting information of the selected area） |
| transforming-dom-to-images（v0.4.0+） | Available when the `RichText` plugin is registered. When there is a `DOM` node in `svg`, the `DOM` node will be converted to an image when exporting to an image. This event will be triggered during the conversion process. You can use this event to prompt the user about the node to which you are currently converting | index（Index of the node currently converted to）、len（Total number of nodes to be converted） |
| node_dragging（v0.4.5+） | Triggered when a node is dragged | node(The currently dragged node) |

43
web/src/pages/Doc/en/constructor/index.vue
View File

@@ -745,15 +745,22 @@
<tr>
<td>dragMultiNodeRectConfig（v0.7.2+）</td>
<td>Object</td>
<td>{ width: 40, height: 20, fill: '' }</td>
<td>{ width: 40, height: 20, fill: 'rgb(94, 200, 248)' }</td>
<td>The style configuration of the schematic rectangle that moves with the mouse when dragging multiple nodes, passing an object, and the field meanings are the width, height, and fill color of the rectangle</td>
<td></td>
</tr>
<tr>
<td>dragPlaceholderRectFill（v0.7.2+）</td>
<td>String</td>
<td>rgb(94, 200, 248)</td>
<td>The filling color of the schematic rectangle for the new position when dragging nodes.</td>
<td></td>
<td>The filling color of the schematic rectangle for the new position when dragging nodes. If not transmitted, the default color for the connected line is used</td>
</tr>
<tr>
<td>dragPlaceholderLineConfig（v0.10.0+）</td>
<td>Object</td>
<td>{ color: 'rgb(94, 200, 248)', width: 2 }</td>
<td>Style configuration of schematic lines for new positions when dragging nodes</td>
<td></td>
</tr>
<tr>
@@ -833,6 +840,12 @@
<td>false</td>
<td>Is only add watermarks during export</td>
</tr>
<tr>
<td>belowNode（v0.10.0+）</td>
<td>Boolean</td>
<td>false</td>
<td>Is the watermark displayed below the node</td>
</tr>
</tbody>
</table>
<h3>6.AssociativeLine plugin</h3>
@@ -903,6 +916,27 @@
<td>Set the rich text node edit box to match the size of the node, creating a pseudo in place editing effect. It should be noted that only when there is only text within the node and the shape is rectangular, can the effect be better</td>
<td></td>
</tr>
<tr>
<td>enableEditFormulaInRichTextEdit（v0.10.0+）</td>
<td>Boolean</td>
<td>true</td>
<td></td>
<td>Whether to enable direct editing of mathematical formulas in rich text editing boxes</td>
</tr>
<tr>
<td>transformRichTextOnEnterEdit（v0.10.0+）</td>
<td>null、Function</td>
<td>null</td>
<td>To convert rich text content, you can pass a function that will be called when entering rich text editing. The function receives the rich text content that is about to be edited and needs to return the processed rich text content</td>
<td></td>
</tr>
<tr>
<td>beforeHideRichTextEdit（v0.10.0+）</td>
<td>null、Function</td>
<td>null</td>
<td>You can pass a function that will be executed before the end of rich text editing. The function receives a richText instance, so you can update the kill document data at this time</td>
<td></td>
</tr>
</tbody>
</table>
<h3>8.TouchEvent plugin</h3>
@@ -1408,6 +1442,11 @@ poor performance and should be used sparingly.</p>
<td></td>
</tr>
<tr>
<td>node_tree_render_start（v0.10.0+）</td>
<td>Node tree start rendering event</td>
<td></td>
</tr>
<tr>
<td>rich_text_selection_change（v0.4.0+）</td>
<td>Available when the <code>RichText</code> plugin is registered. Triggered when the text selection area changes when the node is edited</td>
<td>hasRange（Whether there is a selection）、rectInfo（Size and location information of the selected area）、formatInfo（Text formatting information of the selected area）</td>

2
web/src/pages/Doc/en/introduction/index.md
View File

@@ -384,7 +384,7 @@ Open source is not easy. If this project is helpful to you, you can invite the a
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/孟照星.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>孟照星</p>
<p>Alex</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/子豪.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />

36
web/src/pages/Doc/en/introduction/index.vue
View File

@@ -8,18 +8,18 @@
</blockquote>
<h2>Features</h2>
<ul>
<li><input type="checkbox" id="checkbox0" checked="true" /><label for="checkbox0">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
<li><input type="checkbox" id="checkbox1" checked="true" /><label for="checkbox1">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
<li><input type="checkbox" id="checkbox2" checked="true" /><label for="checkbox2">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
<li><input type="checkbox" id="checkbox3" checked="true" /><label for="checkbox3">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
<li><input type="checkbox" id="checkbox4" checked="true" /><label for="checkbox4">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, Support for expanding node content, and fully customize node content using DDM</label></li>
<li><input type="checkbox" id="checkbox5" checked="true" /><label for="checkbox5">Support canvas dragging and scaling</label></li>
<li><input type="checkbox" id="checkbox6" checked="true" /><label for="checkbox6">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
<li><input type="checkbox" id="checkbox7" checked="true" /><label for="checkbox7">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>、<code>txt</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
<li><input type="checkbox" id="checkbox8" checked="true" /><label for="checkbox8">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, scrollbar, Hand drawn style, and rainbow lines</label></li>
<li><input type="checkbox" id="checkbox9" checked="true" /><label for="checkbox9">Provide rich configurations to meet various scenarios and usage habits</label></li>
<li><input type="checkbox" id="checkbox10" checked="true" /><label for="checkbox10">Support collaborative editing</label></li>
<li><input type="checkbox" id="checkbox11" checked="true" /><label for="checkbox11">Support demonstration mode</label></li>
<li><input type="checkbox" id="checkbox17" checked="true" /><label for="checkbox17">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
<li><input type="checkbox" id="checkbox18" checked="true" /><label for="checkbox18">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
<li><input type="checkbox" id="checkbox19" checked="true" /><label for="checkbox19">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
<li><input type="checkbox" id="checkbox20" checked="true" /><label for="checkbox20">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
<li><input type="checkbox" id="checkbox21" checked="true" /><label for="checkbox21">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, Support for expanding node content, and fully customize node content using DDM</label></li>
<li><input type="checkbox" id="checkbox22" checked="true" /><label for="checkbox22">Support canvas dragging and scaling</label></li>
<li><input type="checkbox" id="checkbox23" checked="true" /><label for="checkbox23">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
<li><input type="checkbox" id="checkbox24" checked="true" /><label for="checkbox24">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>、<code>txt</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
<li><input type="checkbox" id="checkbox25" checked="true" /><label for="checkbox25">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, scrollbar, Hand drawn style, and rainbow lines</label></li>
<li><input type="checkbox" id="checkbox26" checked="true" /><label for="checkbox26">Provide rich configurations to meet various scenarios and usage habits</label></li>
<li><input type="checkbox" id="checkbox27" checked="true" /><label for="checkbox27">Support collaborative editing</label></li>
<li><input type="checkbox" id="checkbox28" checked="true" /><label for="checkbox28">Support demonstration mode</label></li>
</ul>
<p>The official provides the following plugins, which can be introduced as needed (a certain function may not be effective because you did not introduce the corresponding plugin). Please refer to the documentation for specific usage methods:</p>
<blockquote>
@@ -39,16 +39,16 @@ frameworks such as Vue and React, or without a framework.</p>
<p>This is an online mind map built using the <code>simple-mind-map</code> library and based
on <code>Vue2.x</code> and <code>ElementUI</code>. Features include:</p>
<ul>
<li><input type="checkbox" id="checkbox12" checked="true" /><label for="checkbox12">Toolbar, which supports inserting and deleting nodes, and editing node</label>
<li><input type="checkbox" id="checkbox29" checked="true" /><label for="checkbox29">Toolbar, which supports inserting and deleting nodes, and editing node</label>
images, icons, hyperlinks, notes, tags, and summaries</li>
<li><input type="checkbox" id="checkbox13" checked="true" /><label for="checkbox13">Sidebar, with panels for basic style settings, node style settings,</label>
<li><input type="checkbox" id="checkbox30" checked="true" /><label for="checkbox30">Sidebar, with panels for basic style settings, node style settings,</label>
outline, theme selection, and structure selection</li>
<li><input type="checkbox" id="checkbox14" checked="true" /><label for="checkbox14">Import and export functionality; data is saved in the browser's local</label>
<li><input type="checkbox" id="checkbox31" checked="true" /><label for="checkbox31">Import and export functionality; data is saved in the browser's local</label>
storage by default, but it also supports creating, opening, and editing
local files on the computer directly</li>
<li><input type="checkbox" id="checkbox15" checked="true" /><label for="checkbox15">Right-click menu, which supports operations such as expanding, collapsing,</label>
<li><input type="checkbox" id="checkbox32" checked="true" /><label for="checkbox32">Right-click menu, which supports operations such as expanding, collapsing,</label>
and organizing layout</li>
<li><input type="checkbox" id="checkbox16" checked="true" /><label for="checkbox16">Bottom bar, which supports node and word count statistics, switching</label>
<li><input type="checkbox" id="checkbox33" checked="true" /><label for="checkbox33">Bottom bar, which supports node and word count statistics, switching</label>
between edit and read-only modes, zooming in and out, and switching to
full screen, support mini map</li>
</ul>
@@ -338,7 +338,7 @@ full screen, support mini map</li>
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/孟照星.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>孟照星</p>
<p>Alex</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/子豪.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />

10
web/src/pages/Doc/en/utils/index.md
View File

@@ -506,6 +506,16 @@ Put the specified DOM element into full screen mode.
Exit full screen mode.
#### defenseXSS(htmlStr)
> v0.10.0+
- `htmlStr`：HTML strings that need to be filtered
Return：Filtered HTML string
Defend against XSS attacks, filter malicious HTML tags and attributes. You can recursively traverse the tree data before passing the node data to SimpleMindMap, using this method to process the rich text content of nodes and avoid XSS attacks.
## Simulate CSS background in Canvas
Import:

9
web/src/pages/Doc/en/utils/index.vue
View File

@@ -424,6 +424,15 @@ and copying the <code>data</code> of the data object, example:</p>
<p>v0.9.11+</p>
</blockquote>
<p>Exit full screen mode.</p>
<h4>defenseXSS(htmlStr)</h4>
<blockquote>
<p>v0.10.0+</p>
</blockquote>
<ul>
<li><code>htmlStr</code>：HTML strings that need to be filtered</li>
</ul>
<p>Return：Filtered HTML string</p>
<p>Defend against XSS attacks, filter malicious HTML tags and attributes. You can recursively traverse the tree data before passing the node data to SimpleMindMap, using this method to process the rich text content of nodes and avoid XSS attacks.</p>
<h2>Simulate CSS background in Canvas</h2>
<p>Import:</p>
<pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</span>

4
web/src/pages/Doc/en/xmind/index.md
View File

@@ -22,13 +22,15 @@ simpleMindMap.xmind
## Methods
### xmind.parseXmindFile(file)
### xmind.parseXmindFile(file, handleMultiCanvas)
Parsing the `.xmind` file and returning the parsed data. You can use
`mindMap.setData(data)` to render the returned data to the canvas.
`file`: `File` object
`handleMultiCanvas`：v0.10.0+，Optional, a function can be passed. If there are multiple canvases in the imported xmind file, this function will be called. The function takes the xmind canvas list data as a parameter and needs to return the data of one of the canvases, For example, if the received parameter is 'content', if you want to import data from the second canvas, you will return 'content[1]'. A function can be an asynchronous function that returns a Promise instance.
### xmind.transformXmind(content)
> V0.6.6+version changes the method to asynchronous and returns a Promise instance

3
web/src/pages/Doc/en/xmind/index.vue
View File

@@ -14,10 +14,11 @@
<pre class="hljs"><code>simpleMindMap.xmind
</code></pre>
<h2>Methods</h2>
<h3>xmind.parseXmindFile(file)</h3>
<h3>xmind.parseXmindFile(file, handleMultiCanvas)</h3>
<p>Parsing the <code>.xmind</code> file and returning the parsed data. You can use
<code>mindMap.setData(data)</code> to render the returned data to the canvas.</p>
<p><code>file</code>: <code>File</code> object</p>
<p><code>handleMultiCanvas</code>：v0.10.0+，Optional, a function can be passed. If there are multiple canvases in the imported xmind file, this function will be called. The function takes the xmind canvas list data as a parameter and needs to return the data of one of the canvases, For example, if the received parameter is 'content', if you want to import data from the second canvas, you will return 'content[1]'. A function can be an asynchronous function that returns a Promise instance.</p>
<h3>xmind.transformXmind(content)</h3>
<blockquote>
<p>V0.6.6+version changes the method to asynchronous and returns a Promise instance</p>

3
web/src/pages/Doc/routerList.js
View File

@@ -70,7 +70,8 @@ export default [
{ path: 'help2', title: '客户端' },
{ path: 'help3', title: '打开预览在线文件' },
{ path: 'help4', title: '复制粘贴' },
{ path: 'help5', title: '导出' }
{ path: 'help5', title: '导出' },
{ path: 'help6', title: '如何编辑数学公式' }
]
},
{

46
web/src/pages/Doc/zh/changelog/index.md
View File

@@ -1,5 +1,51 @@
# Changelog
## 0.10.0
较大更新：升级节点拖拽时的交互效果；
修复：
> 1.修复只读模式仍可通过Ctrl+点击节点方式激活节点的问题；
>
> 2.修复移动端部分浏览器设置缩放时会进行页面缩放的问题；
>
> 3.修复拖拽画布和拖拽调整图片时会选中文字的问题；
>
> 4.修复复制带换行符的节点文本粘贴后会出现多行换行的问题；
>
> 5.修复节点前后自定义内容导出图片时显示空白的问题；
新增：
> 1.新增渲染开始事件node_tree_render_start；
>
> 2.支持设置水印显示在节点下方；
>
> 3.导入存在多个画布的xmind文件支持选择指定的画布进行导入；
>
> 4.取消调用defenseXSS函数，对性能影响太大；defenseXSS方法作为工具方法提供；
>
> 5.去除移除富文本内容中ql-cursor类名的节点的逻辑，修复文本换行时新增空行不生效的问题；
>
> 6.插入新节点时去除延时开启节点编辑的逻辑；
>
> 7.支持直接在富文本编辑框中编辑数学公式；
>
> 8.打包后的文件中增加演示插件；
Demo：
> 1.支持配置水印显示在节点下方；
>
> 2.导入存在多个画布的xmind文件支持选择指定的画布进行导入；
>
> 3.优化富文本工具条下拉选项列表高度问题；
>
> 4.新建和打开按钮增加导出的提示，防止内容丢失；
>
> 5.快捷键提示支持区分windows和mac；
## 0.9.12
修复：

29
web/src/pages/Doc/zh/changelog/index.vue
View File

@@ -1,6 +1,35 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.10.0</h2>
<p>较大更新：升级节点拖拽时的交互效果；</p>
<p>修复：</p>
<blockquote>
<p>1.修复只读模式仍可通过Ctrl+点击节点方式激活节点的问题；</p>
<p>2.修复移动端部分浏览器设置缩放时会进行页面缩放的问题；</p>
<p>3.修复拖拽画布和拖拽调整图片时会选中文字的问题；</p>
<p>4.修复复制带换行符的节点文本粘贴后会出现多行换行的问题；</p>
<p>5.修复节点前后自定义内容导出图片时显示空白的问题；</p>
</blockquote>
<p>新增：</p>
<blockquote>
<p>1.新增渲染开始事件node_tree_render_start；</p>
<p>2.支持设置水印显示在节点下方；</p>
<p>3.导入存在多个画布的xmind文件支持选择指定的画布进行导入；</p>
<p>4.取消调用defenseXSS函数，对性能影响太大；defenseXSS方法作为工具方法提供；</p>
<p>5.去除移除富文本内容中ql-cursor类名的节点的逻辑，修复文本换行时新增空行不生效的问题；</p>
<p>6.插入新节点时去除延时开启节点编辑的逻辑；</p>
<p>7.支持直接在富文本编辑框中编辑数学公式；</p>
<p>8.打包后的文件中增加演示插件；</p>
</blockquote>
<p>Demo：</p>
<blockquote>
<p>1.支持配置水印显示在节点下方；</p>
<p>2.导入存在多个画布的xmind文件支持选择指定的画布进行导入；</p>
<p>3.优化富文本工具条下拉选项列表高度问题；</p>
<p>4.新建和打开按钮增加导出的提示，防止内容丢失；</p>
<p>5.快捷键提示支持区分windows和mac；</p>
</blockquote>
<h2>0.9.12</h2>
<p>修复：</p>
<blockquote>

12
web/src/pages/Doc/zh/constructor/index.md
View File

@@ -212,8 +212,9 @@ new MindMap({
| enableFreeDrag（v0.2.4+） | Boolean | false | 是否开启节点自由拖拽（自由拖拽即可以把节点拖拽到画布的任意位置，注意不是拖拽节点成为其他节点的子节点兄弟节点的功能，自由拖拽的连线会存在一定问题，所以该特性最好不要使用） |
| nodeDragPlaceholderMaxSize（v0.6.12+）（v0.10.0+已废除） | Number | 20 | 拖拽元素时，指示元素新位置的块的最大高度 |
| autoMoveWhenMouseInEdgeOnDrag（v0.7.1+） | Boolean | true | 拖拽节点时鼠标移动到画布边缘是否开启画布自动移动 |
| dragMultiNodeRectConfig（v0.7.2+） | Object | { width: 40, height: 20, fill: '' } | 拖拽多个节点时随鼠标移动的示意矩形的样式配置，传递一个对象，字段含义分别为矩形的宽、高、填充色 |
| dragPlaceholderRectFill（v0.7.2+） | String | | 节点拖拽时新位置的示意矩形的填充颜色，如果不传默认使用连线的颜色 |
| dragMultiNodeRectConfig（v0.7.2+） | Object | { width: 40, height: 20, fill: 'rgb(94, 200, 248)' } | 拖拽多个节点时随鼠标移动的示意矩形的样式配置，传递一个对象，字段含义分别为矩形的宽、高、填充色 |
| dragPlaceholderRectFill（v0.7.2+） | String | rgb(94, 200, 248) | 节点拖拽时新位置的示意矩形的填充颜色 |
| dragPlaceholderLineConfig（v0.10.0+） | Object | { color: 'rgb(94, 200, 248)', width: 2 } | 节点拖拽时新位置的示意连线的样式配置 |
| dragOpacityConfig（v0.7.2+） | Object | { cloneNodeOpacity: 0.5, beingDragNodeOpacity: 0.3 } | 节点拖拽时的透明度配置，传递一个对象，字段含义分别为：跟随鼠标移动的克隆节点或矩形的透明度、被拖拽节点的透明度 |
### 5.Watermark插件
@@ -232,6 +233,7 @@ new MindMap({
| angle | Number | 30 | 水印的倾斜角度，范围：[0, 90] |
| textStyle | Object | {color: '#999', opacity: 0.5, fontSize: 14} | 水印文字样式 |
| onlyExport（v0.9.2+） | Boolean | false | 是否仅在导出时添加水印 |
| belowNode（v0.10.0+） | Boolean | false | 水印是否显示在节点下方 |
### 6.AssociativeLine插件
@@ -247,6 +249,9 @@ new MindMap({
| 字段名称 | 类型 | 默认值 | 描述 |
| -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ |
| richTextEditFakeInPlace（v0.6.13+） | Boolean | false | 设置富文本节点编辑框和节点大小一致，形成伪原地编辑的效果，需要注意的是，只有当节点内只有文本、且形状是矩形才会有比较好的效果 |
| enableEditFormulaInRichTextEdit（v0.10.0+） | Boolean | true | 是否开启在富文本编辑框中直接编辑数学公式 |
| transformRichTextOnEnterEdit（v0.10.0+） | null、Function | null | 转换富文本内容，可以传递一个函数，当进入富文本编辑时会调用该函数，函数接收即将被编辑的富文本内容，需要返回你处理后的富文本内容 |
| beforeHideRichTextEdit（v0.10.0+） | null、Function | null | 可以传递一个函数，即将结束富文本编辑前会执行该函数，函数接收richText实例，所以你可以在此时机更新quill文档数据 |
### 8.TouchEvent插件
@@ -547,7 +552,8 @@ mindMap.setTheme('主题名称')
| node_img_mouseenter（v0.6.5+） | 节点内图片的鼠标移入事件 | this（节点实例）、imgNode（图片节点）、e（事件对象） |
| node_img_mouseleave（v0.6.5+） | 节点内图片的鼠标移出事件 | this（节点实例）、imgNode（图片节点）、e（事件对象） |
| node_img_mousemove（v0.6.5+） | 节点内图片的鼠标移动事件 | this（节点实例）、imgNode（图片节点）、e（事件对象） |
| node_tree_render_end（v0.2.16+） | 节点树渲染完毕事件 | |
| node_tree_render_end（v0.2.16+） | 节点树渲染完毕事件 | |
| node_tree_render_start（v0.10.0+） | 节点树开始渲染事件 | |
| rich_text_selection_change（v0.4.0+） | 当注册了`RichText`插件时可用。当节点编辑时，文本选区发生改变时触发 | hasRange（是否存在选区）、rectInfo（选区的尺寸和位置信息）、formatInfo（选区的文本格式化信息） |
| transforming-dom-to-images（v0.4.0+） | 当注册了`RichText`插件时可用。当`svg`中存在`DOM`节点时，导出为图片时会将`DOM`节点转换为图片，转换过程中会触发该事件，可用通过该事件给用户提示，告知目前转换到的节点 | index（当前转换到的节点索引）、len（一共需要转换的节点数量） |
| node_dragging（v0.4.5+） | 当某个节点被拖拽时触发 | node（当前被拖拽的节点） |

41
web/src/pages/Doc/zh/constructor/index.vue
View File

@@ -661,14 +661,20 @@
<tr>
<td>dragMultiNodeRectConfig（v0.7.2+）</td>
<td>Object</td>
<td>{ width: 40, height: 20, fill: '' }</td>
<td>{ width: 40, height: 20, fill: 'rgb(94, 200, 248)' }</td>
<td>拖拽多个节点时随鼠标移动的示意矩形的样式配置，传递一个对象，字段含义分别为矩形的宽、高、填充色</td>
</tr>
<tr>
<td>dragPlaceholderRectFill（v0.7.2+）</td>
<td>String</td>
<td></td>
<td>节点拖拽时新位置的示意矩形的填充颜色，如果不传默认使用连线的颜色</td>
<td>rgb(94, 200, 248)</td>
<td>节点拖拽时新位置的示意矩形的填充颜色</td>
</tr>
<tr>
<td>dragPlaceholderLineConfig（v0.10.0+）</td>
<td>Object</td>
<td>{ color: 'rgb(94, 200, 248)', width: 2 }</td>
<td>节点拖拽时新位置的示意连线的样式配置</td>
</tr>
<tr>
<td>dragOpacityConfig（v0.7.2+）</td>
@@ -744,6 +750,12 @@
<td>false</td>
<td>是否仅在导出时添加水印</td>
</tr>
<tr>
<td>belowNode（v0.10.0+）</td>
<td>Boolean</td>
<td>false</td>
<td>水印是否显示在节点下方</td>
</tr>
</tbody>
</table>
<h3>6.AssociativeLine插件</h3>
@@ -800,6 +812,24 @@
<td>false</td>
<td>设置富文本节点编辑框和节点大小一致，形成伪原地编辑的效果，需要注意的是，只有当节点内只有文本、且形状是矩形才会有比较好的效果</td>
</tr>
<tr>
<td>enableEditFormulaInRichTextEdit（v0.10.0+）</td>
<td>Boolean</td>
<td>true</td>
<td>是否开启在富文本编辑框中直接编辑数学公式</td>
</tr>
<tr>
<td>transformRichTextOnEnterEdit（v0.10.0+）</td>
<td>null、Function</td>
<td>null</td>
<td>转换富文本内容，可以传递一个函数，当进入富文本编辑时会调用该函数，函数接收即将被编辑的富文本内容，需要返回你处理后的富文本内容</td>
</tr>
<tr>
<td>beforeHideRichTextEdit（v0.10.0+）</td>
<td>null、Function</td>
<td>null</td>
<td>可以传递一个函数，即将结束富文本编辑前会执行该函数，函数接收richText实例，所以你可以在此时机更新quill文档数据</td>
</tr>
</tbody>
</table>
<h3>8.TouchEvent插件</h3>
@@ -1286,6 +1316,11 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<td></td>
</tr>
<tr>
<td>node_tree_render_start（v0.10.0+）</td>
<td>节点树开始渲染事件</td>
<td></td>
</tr>
<tr>
<td>rich_text_selection_change（v0.4.0+）</td>
<td>当注册了<code>RichText</code>插件时可用。当节点编辑时，文本选区发生改变时触发</td>
<td>hasRange（是否存在选区）、rectInfo（选区的尺寸和位置信息）、formatInfo（选区的文本格式化信息）</td>

9
web/src/pages/Doc/zh/help6/index.md Normal file
View File

@@ -0,0 +1,9 @@
# 如何编辑数学公式
数学公式只在开启了【富文本】编辑模式下才可使用。
首先可以激活节点，然后点击上方工具栏中的【公式】打开右侧的格式侧边栏，然后再输入框中输入公式后点击【完成】即可将公式输入节点。
当你再次双击节点时，公式会转换成源码，你可以直接修改，回车完成后即可渲染。
所以你也可以不通过侧边栏，直接在文本编辑框中输入公式，不过公式的源码前后必须通过`$`符号包裹，否则不会解析为格式。

20
web/src/pages/Doc/zh/help6/index.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<div>
<h1>如何编辑数学公式</h1>
<p>数学公式只在开启了【富文本】编辑模式下才可使用。</p>
<p>首先可以激活节点，然后点击上方工具栏中的【公式】打开右侧的格式侧边栏，然后再输入框中输入公式后点击【完成】即可将公式输入节点。</p>
<p>当你再次双击节点时，公式会转换成源码，你可以直接修改，回车完成后即可渲染。</p>
<p>所以你也可以不通过侧边栏，直接在文本编辑框中输入公式，不过公式的源码前后必须通过<code>$</code>符号包裹，否则不会解析为格式。</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

2
web/src/pages/Doc/zh/introduction/index.md
View File

@@ -380,7 +380,7 @@
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/孟照星.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>孟照星</p>
<p>Alex</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/子豪.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />

36
web/src/pages/Doc/zh/introduction/index.vue
View File

@@ -8,18 +8,18 @@
</blockquote>
<h2>特性</h2>
<ul>
<li><input type="checkbox" id="checkbox34" checked="true" /><label for="checkbox34">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积</label></li>
<li><input type="checkbox" id="checkbox35" checked="true" /><label for="checkbox35">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构</label></li>
<li><input type="checkbox" id="checkbox36" checked="true" /><label for="checkbox36">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
<li><input type="checkbox" id="checkbox37" checked="true" /><label for="checkbox37">节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要、数学公式</label></li>
<li><input type="checkbox" id="checkbox38" checked="true" /><label for="checkbox38">节点支持拖拽（拖拽移动、自由调整）、多种节点形状；支持扩展节点内容、支持使用 DDM 完全自定义节点内容</label></li>
<li><input type="checkbox" id="checkbox39" checked="true" /><label for="checkbox39">支持画布拖动、缩放</label></li>
<li><input type="checkbox" id="checkbox40" checked="true" /><label for="checkbox40">支持鼠标按键拖动选择和 Ctrl+左键两种多选节点方式</label></li>
<li><input type="checkbox" id="checkbox41" checked="true" /><label for="checkbox41">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>、<code>txt</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
<li><input type="checkbox" id="checkbox42" checked="true" /><label for="checkbox42">支持快捷键、前进后退、关联线、搜索替换、小地图、水印、滚动条、手绘风格、彩虹线条</label></li>
<li><input type="checkbox" id="checkbox43" checked="true" /><label for="checkbox43">提供丰富的配置，满足各种场景各种使用习惯</label></li>
<li><input type="checkbox" id="checkbox44" checked="true" /><label for="checkbox44">支持协同编辑</label></li>
<li><input type="checkbox" id="checkbox45" checked="true" /><label for="checkbox45">支持演示模式</label></li>
<li><input type="checkbox" id="checkbox0" checked="true" /><label for="checkbox0">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积</label></li>
<li><input type="checkbox" id="checkbox1" checked="true" /><label for="checkbox1">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构</label></li>
<li><input type="checkbox" id="checkbox2" checked="true" /><label for="checkbox2">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
<li><input type="checkbox" id="checkbox3" checked="true" /><label for="checkbox3">节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要、数学公式</label></li>
<li><input type="checkbox" id="checkbox4" checked="true" /><label for="checkbox4">节点支持拖拽（拖拽移动、自由调整）、多种节点形状；支持扩展节点内容、支持使用 DDM 完全自定义节点内容</label></li>
<li><input type="checkbox" id="checkbox5" checked="true" /><label for="checkbox5">支持画布拖动、缩放</label></li>
<li><input type="checkbox" id="checkbox6" checked="true" /><label for="checkbox6">支持鼠标按键拖动选择和 Ctrl+左键两种多选节点方式</label></li>
<li><input type="checkbox" id="checkbox7" checked="true" /><label for="checkbox7">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>、<code>txt</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
<li><input type="checkbox" id="checkbox8" checked="true" /><label for="checkbox8">支持快捷键、前进后退、关联线、搜索替换、小地图、水印、滚动条、手绘风格、彩虹线条</label></li>
<li><input type="checkbox" id="checkbox9" checked="true" /><label for="checkbox9">提供丰富的配置，满足各种场景各种使用习惯</label></li>
<li><input type="checkbox" id="checkbox10" checked="true" /><label for="checkbox10">支持协同编辑</label></li>
<li><input type="checkbox" id="checkbox11" checked="true" /><label for="checkbox11">支持演示模式</label></li>
</ul>
<p>官方提供了如下插件，可根据需求按需引入（某个功能不生效大概率是因为你没有引入对应的插件），具体使用方式请查看文档：</p>
<blockquote>
@@ -37,11 +37,11 @@
<p>2.<code>web</code></p>
<p>使用<code>simple-mind-map</code>库，基于<code>vue2.x</code>、<code>ElementUI</code>搭建的在线思维导图。特性：</p>
<ul>
<li><input type="checkbox" id="checkbox46" checked="true" /><label for="checkbox46">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
<li><input type="checkbox" id="checkbox47" checked="true" /><label for="checkbox47">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
<li><input type="checkbox" id="checkbox48" checked="true" /><label for="checkbox48">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
<li><input type="checkbox" id="checkbox49" checked="true" /><label for="checkbox49">右键菜单，支持展开、收起、整理布局等操作</label></li>
<li><input type="checkbox" id="checkbox50" checked="true" /><label for="checkbox50">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
<li><input type="checkbox" id="checkbox12" checked="true" /><label for="checkbox12">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
<li><input type="checkbox" id="checkbox13" checked="true" /><label for="checkbox13">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
<li><input type="checkbox" id="checkbox14" checked="true" /><label for="checkbox14">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
<li><input type="checkbox" id="checkbox15" checked="true" /><label for="checkbox15">右键菜单，支持展开、收起、整理布局等操作</label></li>
<li><input type="checkbox" id="checkbox16" checked="true" /><label for="checkbox16">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
</ul>
<p>提供文档页面服务。</p>
<p>3.<code>dist</code></p>
@@ -331,7 +331,7 @@
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/孟照星.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>孟照星</p>
<p>Alex</p>
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
<img src="../../../../assets/avatar/子豪.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />

10
web/src/pages/Doc/zh/utils/index.md
View File

@@ -511,6 +511,16 @@ document.addEventListener(fullscrrenEvent, () => {
退出全屏状态。
#### defenseXSS(htmlStr)
> v0.10.0+
- `htmlStr`：需要过滤的html字符串
返回：过滤后的html字符串
防御 XSS 攻击，过滤恶意 HTML 标签和属性。你可以在将节点数据传递给SimpleMindMap前递归遍历树数据，通过该方法处理节点富文本内容，避免 XSS 攻击。
## 在 canvas 中模拟 css 的背景属性
引入：

9
web/src/pages/Doc/zh/utils/index.vue
View File

@@ -427,6 +427,15 @@
<p>v0.9.11+</p>
</blockquote>
<p>退出全屏状态。</p>
<h4>defenseXSS(htmlStr)</h4>
<blockquote>
<p>v0.10.0+</p>
</blockquote>
<ul>
<li><code>htmlStr</code>：需要过滤的html字符串</li>
</ul>
<p>返回：过滤后的html字符串</p>
<p>防御 XSS 攻击，过滤恶意 HTML 标签和属性。你可以在将节点数据传递给SimpleMindMap前递归遍历树数据，通过该方法处理节点富文本内容，避免 XSS 攻击。</p>
<h2>在 canvas 中模拟 css 的背景属性</h2>
<p>引入：</p>
<pre class="hljs"><code><span class="hljs-keyword">import</span> drawBackgroundImageToCanvas <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/utils/simulateCSSBackgroundInCanvas&#x27;</span>

4
web/src/pages/Doc/zh/xmind/index.md
View File

@@ -22,12 +22,14 @@ simpleMindMap.xmind
## 方法
### xmind.parseXmindFile(file)
### xmind.parseXmindFile(file, handleMultiCanvas)
解析`.xmind`文件，返回解析后的数据，可以使用`mindMap.setData(data)`来将返回的数据渲染到画布上
`file`：`File`对象
`handleMultiCanvas`：v0.10.0+，可选，可传递一个函数，如果导入的xmind文件存在多个画布，那么会调用该函数，函数接收xmind画布列表数据为参数，需要返回其中一个画布的数据，比如接收的参数为`content`，要导入第二个画布的数据则返回`content[1]`。函数可以是异步函数，返回一个Promise实例。
### xmind.transformXmind(content)
> v0.6.6+版本该方法改为异步方法，返回一个Promise实例

3
web/src/pages/Doc/zh/xmind/index.vue
View File

@@ -14,9 +14,10 @@
<pre class="hljs"><code>simpleMindMap.xmind
</code></pre>
<h2>方法</h2>
<h3>xmind.parseXmindFile(file)</h3>
<h3>xmind.parseXmindFile(file, handleMultiCanvas)</h3>
<p>解析<code>.xmind</code>文件，返回解析后的数据，可以使用<code>mindMap.setData(data)</code>来将返回的数据渲染到画布上</p>
<p><code>file</code>：<code>File</code>对象</p>
<p><code>handleMultiCanvas</code>：v0.10.0+，可选，可传递一个函数，如果导入的xmind文件存在多个画布，那么会调用该函数，函数接收xmind画布列表数据为参数，需要返回其中一个画布的数据，比如接收的参数为<code>content</code>，要导入第二个画布的数据则返回<code>content[1]</code>。函数可以是异步函数，返回一个Promise实例。</p>
<h3>xmind.transformXmind(content)</h3>
<blockquote>
<p>v0.6.6+版本该方法改为异步方法，返回一个Promise实例</p>

6
web/src/pages/Index/components/Block2.vue
View File

@@ -42,11 +42,11 @@ export default {
dataList: [
{
icon: 'iconstar',
value: 'Github star数量3000+'
value: 'Github star数量4000+'
},
{
icon: 'iconfork',
value: 'Github fork数量400+'
value: 'Github fork数量500+'
},
{
icon: 'iconxiazai',
@@ -54,7 +54,7 @@ export default {
},
{
icon: 'iconteamwork',
value: '代码贡献者16+'
value: '代码贡献者17+'
}
],
functionList: [