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

完善文档

Browse Source
This commit is contained in:
wanglin2
2023-02-24 17:14:48 +08:00
parent 8c114dac02
commit 3113bf2e1f
19 changed files with 799 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,6 +19,7 @@ let APIList = [
'keyCommand',
'command',
'batchExecution',
'richText',
'select',
'drag',
'keyboardNavigation',

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

@@ -1,5 +1,9 @@
# Changelog
## 0.4.0
New: The node supports rich text editing.
## 0.3.4
New：Automatic line wrapping function is added to node text.

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

@@ -1,6 +1,8 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.4.0</h2>
<p>New: The node supports rich text editing.</p>
<h2>0.3.4</h2>
<p>New：Automatic line wrapping function is added to node text.</p>
<p>Fix: 1.Fix the problem of deletion exceptions if there are root nodes in the batch deleted nodes. 2.Fix the problem that high node height will overlap with other nodes in the case of bottom edge style.</p>

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

@@ -82,14 +82,23 @@ mindMap.setTheme('Theme name')
For all configurations of theme, please refer to [Default Topic](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js). The `defineTheme`method will merge the configuration you passed in with the default configuration. Most of the themes do not need custom many parts. For a typical customized theme configuration, please refer to [blueSky](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js).
### usePlugin(plugin)
### usePlugin(plugin, opt = {})
> v0.3.0+
- `opt`：v0.4.0+，Plugin options. If a plugin supports custom options, it can be passed in through this parameter.
If you need to use some non-core functions, such as mini map, watermark, etc, you can register plugin through this method. Can be called in chain.
Note: The plugin needs to be registered before instantiating `MindMap`.
### hasPlugin(plugin)
> v0.4.0+
Get whether a plugin is registered, The index of the plugin in the registered plugin list is returned, If it is `-1`, it means that the plugin is not registered.
## Static props
### pluginList
@@ -177,6 +186,8 @@ Listen to an event. Event list:
| scale | Zoom event | scale (zoom ratio) |
| node_img_dblclick（v0.2.15+） | Node image double-click event | this (node instance), e (event object) |
| node_tree_render_end（v0.2.16+） | Node tree render end 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） |
### emit(event, ...args)
@@ -324,4 +335,16 @@ map).
> v0.1.5+
Convert the coordinates of the browser's visible window to coordinates relative
to the canvas.
to the canvas.
### addPlugin(plugin, opt)
> v0.4.0+
Register plugin, Use `MindMap.usePlugin` to register plugin only before instantiation, The registered plugin will not take effect after instantiation, So if you want to register the plugin after instantiation, you can use the `addPlugin` method of the instance.
### removePlugin(plugin)
> v0.4.0+
Remove registered plugin, Plugins registered through the `usePlugin` or `addPlugin` methods can be removed.

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

@@ -214,12 +214,20 @@ MindMap.defineTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>, {})
mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
</code></pre>
<p>For all configurations of theme, please refer to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">Default Topic</a>. The <code>defineTheme</code>method will merge the configuration you passed in with the default configuration. Most of the themes do not need custom many parts. For a typical customized theme configuration, please refer to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js">blueSky</a>.</p>
<h3>usePlugin(plugin)</h3>
<h3>usePlugin(plugin, opt = {})</h3>
<blockquote>
<p>v0.3.0+</p>
</blockquote>
<ul>
<li><code>opt</code>：v0.4.0+，Plugin options. If a plugin supports custom options, it can be passed in through this parameter.</li>
</ul>
<p>If you need to use some non-core functions, such as mini map, watermark, etc, you can register plugin through this method. Can be called in chain.</p>
<p>Note: The plugin needs to be registered before instantiating <code>MindMap</code>.</p>
<h3>hasPlugin(plugin)</h3>
<blockquote>
<p>v0.4.0+</p>
</blockquote>
<p>Get whether a plugin is registered, The index of the plugin in the registered plugin list is returned, If it is <code>-1</code>, it means that the plugin is not registered.</p>
<h2>Static props</h2>
<h3>pluginList</h3>
<blockquote>
@@ -398,6 +406,16 @@ poor performance and should be used sparingly.</p>
<td>Node tree render end 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>
</tr>
<tr>
<td>transforming-dom-to-images（v0.4.0+）</td>
<td>Available when the <code>RichText</code> plugin is registered. When there is a <code>DOM</code> node in <code>svg</code>, the <code>DOM</code> 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</td>
<td>index（Index of the node currently converted to）、len（Total number of nodes to be converted）</td>
</tr>
</tbody>
</table>
<h3>emit(event, ...args)</h3>
@@ -641,6 +659,16 @@ map).</p>
</blockquote>
<p>Convert the coordinates of the browser's visible window to coordinates relative
to the canvas.</p>
<h3>addPlugin(plugin, opt)</h3>
<blockquote>
<p>v0.4.0+</p>
</blockquote>
<p>Register plugin, Use <code>MindMap.usePlugin</code> to register plugin only before instantiation, The registered plugin will not take effect after instantiation, So if you want to register the plugin after instantiation, you can use the <code>addPlugin</code> method of the instance.</p>
<h3>removePlugin(plugin)</h3>
<blockquote>
<p>v0.4.0+</p>
</blockquote>
<p>Remove registered plugin, Plugins registered through the <code>usePlugin</code> or <code>addPlugin</code> methods can be removed.</p>
</div>
</template>

27
web/src/pages/Doc/en/doExport/index.md
View File

@@ -20,19 +20,40 @@ After registration and instantiation of `MindMap`, the instance can be obtained
Exports as `png`, an async method that returns image data, `data:url` data which
can be downloaded or displayed.
### svg()
### svg(name, domToImage = false, plusCssText)
- `name`：`svg` title
- `domToImage`：v0.4.0+, When node rich text editing is enabled, you can use this parameter to specify whether to convert the `dom` node in the `svg` into a picture
- `plusCssText`：v0.4.0+, When node rich text editing is enabled and `domToImage` passes `false`, additional `css` styles can be added. If there is a `dom` node in `svg`, you can set some styles for the node through this parameter, such as:
```js
svg(
'',
false,
`* {
margin: 0;
padding: 0;
box-sizing: border-box;
}`
)
```
Exports as `svg`, an async method that returns `svg` data, `data:url` data which
can be downloaded or displayed.
### getSvgData()
### getSvgData(domToImage)
- `domToImage`：v0.4.0+, If node rich text is enabled, you can use this parameter to specify whether to convert the `DOM` node embedded in `svg` into a picture.
Gets `svg` data, an async method that returns an object:
```js
{
node; // svg object
str; // svg string
str; // svg string, if rich text editing is enabled and domToImage is set to true, the dom node in the svg character returned by this value will be converted into the form of an image
nodeWithDomToImg// v0.4.0+，The svg object after the DOM node is converted to an image has a value only when rich text editing is enabled and domToImage is set to true, otherwise null
}
```

31
web/src/pages/Doc/en/doExport/index.vue
View File

@@ -13,14 +13,39 @@ MindMap.usePlugin(Export)
<h3>png()</h3>
<p>Exports as <code>png</code>, an async method that returns image data, <code>data:url</code> data which
can be downloaded or displayed.</p>
<h3>svg()</h3>
<h3>svg(name, domToImage = false, plusCssText)</h3>
<ul>
<li>
<p><code>name</code>：<code>svg</code> title</p>
</li>
<li>
<p><code>domToImage</code>：v0.4.0+, When node rich text editing is enabled, you can use this parameter to specify whether to convert the <code>dom</code> node in the <code>svg</code> into a picture</p>
</li>
<li>
<p><code>plusCssText</code>：v0.4.0+, When node rich text editing is enabled and <code>domToImage</code> passes <code>false</code>, additional <code>css</code> styles can be added. If there is a <code>dom</code> node in <code>svg</code>, you can set some styles for the node through this parameter, such as:</p>
</li>
</ul>
<pre class="hljs"><code>svg(
<span class="hljs-string">&#x27;&#x27;</span>,
<span class="hljs-literal">false</span>,
<span class="hljs-string">`* {
margin: 0;
padding: 0;
box-sizing: border-box;
}`</span>
)
</code></pre>
<p>Exports as <code>svg</code>, an async method that returns <code>svg</code> data, <code>data:url</code> data which
can be downloaded or displayed.</p>
<h3>getSvgData()</h3>
<h3>getSvgData(domToImage)</h3>
<ul>
<li><code>domToImage</code>：v0.4.0+, If node rich text is enabled, you can use this parameter to specify whether to convert the <code>DOM</code> node embedded in <code>svg</code> into a picture.</li>
</ul>
<p>Gets <code>svg</code> data, an async method that returns an object:</p>
<pre class="hljs"><code>{
node; <span class="hljs-comment">// svg object</span>
str; <span class="hljs-comment">// svg string</span>
str; <span class="hljs-comment">// svg string, if rich text editing is enabled and domToImage is set to true, the dom node in the svg character returned by this value will be converted into the form of an image</span>
nodeWithDomToImg<span class="hljs-comment">// v0.4.0+，The svg object after the DOM node is converted to an image has a value only when rich text editing is enabled and domToImage is set to true, otherwise null</span>
}
</code></pre>
<h3>pdf(name)</h3>

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

@@ -4,20 +4,20 @@
<p><code>simple-mind-map</code> is a simple and powerful web mind map library, not dependent on any specific framework.</p>
<h2>Features</h2>
<ul>
<li><input type="checkbox" id="checkbox51" checked="true"><label for="checkbox51">Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume</label></li>
<li><input type="checkbox" id="checkbox52" checked="true"><label for="checkbox52">Supports four types of structures: logical structure diagrams, mind maps,</label>
<li><input type="checkbox" id="checkbox17" checked="true"><label for="checkbox17">Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume</label></li>
<li><input type="checkbox" id="checkbox18" checked="true"><label for="checkbox18">Supports four types of structures: logical structure diagrams, mind maps,</label>
organizational structure diagrams, and directory organization diagrams</li>
<li><input type="checkbox" id="checkbox53" checked="true"><label for="checkbox53">Built-in multiple themes and allows for highly customized styles, and support register new themes</label></li>
<li><input type="checkbox" id="checkbox54" checked="true"><label for="checkbox54">Supports shortcuts</label></li>
<li><input type="checkbox" id="checkbox55" checked="true"><label for="checkbox55">Node content supports images, icons, hyperlinks, notes, tags, and</label>
<li><input type="checkbox" id="checkbox19" checked="true"><label for="checkbox19">Built-in multiple themes and allows for highly customized styles, and support register new themes</label></li>
<li><input type="checkbox" id="checkbox20" checked="true"><label for="checkbox20">Supports shortcuts</label></li>
<li><input type="checkbox" id="checkbox21" checked="true"><label for="checkbox21">Node content supports images, icons, hyperlinks, notes, tags, and</label>
summaries</li>
<li><input type="checkbox" id="checkbox56" checked="true"><label for="checkbox56">Supports forward and backward navigation</label></li>
<li><input type="checkbox" id="checkbox57" checked="true"><label for="checkbox57">Supports dragging and scaling</label></li>
<li><input type="checkbox" id="checkbox58" checked="true"><label for="checkbox58">Supports right-click and Ctrl + left-click to select multiple items</label></li>
<li><input type="checkbox" id="checkbox59" checked="true"><label for="checkbox59">Supports free dragging and dragging to adjust nodes</label></li>
<li><input type="checkbox" id="checkbox60" checked="true"><label for="checkbox60">Supports various node shapes</label></li>
<li><input type="checkbox" id="checkbox61" checked="true"><label for="checkbox61">Supports export to json, png, svg, pdf, and import from json, xmind</label></li>
<li><input type="checkbox" id="checkbox62" checked="true"><label for="checkbox62">Supports mini map、support watermark</label></li>
<li><input type="checkbox" id="checkbox22" checked="true"><label for="checkbox22">Supports forward and backward navigation</label></li>
<li><input type="checkbox" id="checkbox23" checked="true"><label for="checkbox23">Supports dragging and scaling</label></li>
<li><input type="checkbox" id="checkbox24" checked="true"><label for="checkbox24">Supports right-click and Ctrl + left-click to select multiple items</label></li>
<li><input type="checkbox" id="checkbox25" checked="true"><label for="checkbox25">Supports free dragging and dragging to adjust nodes</label></li>
<li><input type="checkbox" id="checkbox26" checked="true"><label for="checkbox26">Supports various node shapes</label></li>
<li><input type="checkbox" id="checkbox27" checked="true"><label for="checkbox27">Supports export to json, png, svg, pdf, and import from json, xmind</label></li>
<li><input type="checkbox" id="checkbox28" checked="true"><label for="checkbox28">Supports mini map、support watermark</label></li>
</ul>
<h2>Table of Contents</h2>
<p>1.<code>simple-mind-map</code></p>
@@ -27,16 +27,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="checkbox63" checked="true"><label for="checkbox63">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="checkbox64" checked="true"><label for="checkbox64">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="checkbox65" checked="true"><label for="checkbox65">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="checkbox66" checked="true"><label for="checkbox66">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="checkbox67" checked="true"><label for="checkbox67">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>

147
web/src/pages/Doc/en/richText/index.md Normal file
View File

@@ -0,0 +1,147 @@
# RichText plugin
> v0.4.0+
> Note: This is a testing nature and imperfect function
This plugin provides the ability to edit rich text of nodes, and takes effect after registration.
By default, node editing can only uniformly apply styles to all text in the node. This plugin can support rich text editing effects. Currently, it supports bold, italic, underline, strikethrough, font, font size, and color. Underline and line height are not supported.
The principle of this plugin is to use [Quill](https://github.com/quilljs/quill) editor implements rich text editing, and then uses the edited `DOM` node directly as the text data of the node, and embeds the `DOM` node through the `svg` `foreignObject` tag during rendering.
This also caused a problem, that is, the function of exporting as a picture was affected, The original principle of exporting `svg` as an image is very simple, Get the `svg` string, and then create the `blob` data of the `type=image/svg+xml` type. Then use the `URL.createObjectURL` method to generate the `data:url` data. Then create a `Image` tag, use the `data:url` as the `src` of the image, and finally draw the image on the `canvas` object for export, However, after testing, when the `DOM` node is embedded in the `svg`, this method of export will cause errors, and after trying many ways, the perfect export effect cannot be achieved, The current method is to traverse the `foreignObject` node in `svg`, using [html2canvas](https://github.com/niklasvh/html2canvas) Convert the `DOM` node in the `foreignObject` node into an image and then replace the `foreignObject` node. This method can work, but it is very time-consuming. Because the `html2canvas` conversion takes a long time, it takes about 2 seconds to convert a node. This leads to the more nodes, the slower the conversion time. Therefore, it is recommended not to use this plugin if you cannot tolerate the long time of export.
If you have a better way, please leave a message.
## Register
```js
import MindMap from 'simple-mind-map'
import RichText from 'simple-mind-map/src/RichText.js'
MindMap.usePlugin(RichText, opt?)
```
After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.richText`.
### Register options
The `opt` option can pass the following parameters:
- `opt.fontFamilyList`
Replace the built-in font list during rich text editing. The built-in list is:
```js
[
'宋体, SimSun, Songti SC',
'微软雅黑, Microsoft YaHei',
'楷体, 楷体_GB2312, SimKai, STKaiti',
'黑体, SimHei, Heiti SC',
'隶书, SimLi',
'andale mono',
'arial, helvetica, sans-serif',
'arial black, avant garde',
'comic sans ms',
'impact, chicago',
'times new roman',
'sans-serif',
'serif'
]
```
- `opt.fontSizeList`
Replace the built-in font size list during rich text editing. The built-in list is:
```js
[1, 2, 3, ...100]
```
## Method
### selectAll()
Select All. When the node is being edited, you can select all the text in the node through this method.
### formatText(config = {})
- `config`：Object. The key is the style attribute and the value is the style value. The complete configuration is as follows:
```js
{
font: '字体',
size: '12px,' // font size
bold: true, // Bold or not, true/false
italic: true, // Italic or not, true/false
underline: true, // Show underline or not, true/false
strike: true, // Whether to display strikethrough, true/false
color: '#333' // color
}
```
Formats the currently selected text.
### formatRangeText(range, config = {})
- `range`：The range object of `Quill`, has the following format:
```js
{
index,
length
}
```
- `config`：Same as `formatText` method
Formats the text of the specified range.
### formatAllText(config = {})
- `config`：Same as `formatText` method
Formats all text of the current edit node.
### normalStyleToRichTextStyle(style)
Converts a normal node style object to a rich text style object. Because there are differences between node style attributes and rich text style attributes during non-rich text editing, a conversion operation is required. For example:
```js
{
fontFamily: 'xxx'
}
// After conversion
{
font: 'xxx'
}
```
### richTextStyleToNormalStyle(config)
Converts rich text style objects to normal node style objects. For example:
```js
{
size: '16px'
}
// After conversion
{
fontSize: 16
}
```
### handleSvgDomElements(svg)
- `svg`: `svg` node
Convert the `dom` element embedded in the `svg` into a picture and return a `Promise`.
### transformAllNodesToNormalNode()
Convert all nodes to non-rich text nodes.

129
web/src/pages/Doc/en/richText/index.vue Normal file
View File

@@ -0,0 +1,129 @@
<template>
<div>
<h1>RichText plugin</h1>
<blockquote>
<p>v0.4.0+</p>
</blockquote>
<blockquote>
<p>Note: This is a testing nature and imperfect function</p>
</blockquote>
<p>This plugin provides the ability to edit rich text of nodes, and takes effect after registration.</p>
<p>By default, node editing can only uniformly apply styles to all text in the node. This plugin can support rich text editing effects. Currently, it supports bold, italic, underline, strikethrough, font, font size, and color. Underline and line height are not supported.</p>
<p>The principle of this plugin is to use <a href="https://github.com/quilljs/quill">Quill</a> editor implements rich text editing, and then uses the edited <code>DOM</code> node directly as the text data of the node, and embeds the <code>DOM</code> node through the <code>svg</code> <code>foreignObject</code> tag during rendering.</p>
<p>This also caused a problem, that is, the function of exporting as a picture was affected, The original principle of exporting <code>svg</code> as an image is very simple, Get the <code>svg</code> string, and then create the <code>blob</code> data of the <code>type=image/svg+xml</code> type. Then use the <code>URL.createObjectURL</code> method to generate the <code>data:url</code> data. Then create a <code>Image</code> tag, use the <code>data:url</code> as the <code>src</code> of the image, and finally draw the image on the <code>canvas</code> object for export, However, after testing, when the <code>DOM</code> node is embedded in the <code>svg</code>, this method of export will cause errors, and after trying many ways, the perfect export effect cannot be achieved, The current method is to traverse the <code>foreignObject</code> node in <code>svg</code>, using <a href="https://github.com/niklasvh/html2canvas">html2canvas</a> Convert the <code>DOM</code> node in the <code>foreignObject</code> node into an image and then replace the <code>foreignObject</code> node. This method can work, but it is very time-consuming. Because the <code>html2canvas</code> conversion takes a long time, it takes about 2 seconds to convert a node. This leads to the more nodes, the slower the conversion time. Therefore, it is recommended not to use this plugin if you cannot tolerate the long time of export.</p>
<p>If you have a better way, please leave a message.</p>
<h2>Register</h2>
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
<span class="hljs-keyword">import</span> RichText <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/RichText.js&#x27;</span>
MindMap.usePlugin(RichText, opt?)
</code></pre>
<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.richText</code>.</p>
<h3>Register options</h3>
<p>The <code>opt</code> option can pass the following parameters:</p>
<ul>
<li><code>opt.fontFamilyList</code></li>
</ul>
<p>Replace the built-in font list during rich text editing. The built-in list is:</p>
<pre class="hljs"><code>[
<span class="hljs-string">&#x27;宋体, SimSun, Songti SC&#x27;</span>,
<span class="hljs-string">&#x27;微软雅黑, Microsoft YaHei&#x27;</span>,
<span class="hljs-string">&#x27;楷体, 楷体_GB2312, SimKai, STKaiti&#x27;</span>,
<span class="hljs-string">&#x27;黑体, SimHei, Heiti SC&#x27;</span>,
<span class="hljs-string">&#x27;隶书, SimLi&#x27;</span>,
<span class="hljs-string">&#x27;andale mono&#x27;</span>,
<span class="hljs-string">&#x27;arial, helvetica, sans-serif&#x27;</span>,
<span class="hljs-string">&#x27;arial black, avant garde&#x27;</span>,
<span class="hljs-string">&#x27;comic sans ms&#x27;</span>,
<span class="hljs-string">&#x27;impact, chicago&#x27;</span>,
<span class="hljs-string">&#x27;times new roman&#x27;</span>,
<span class="hljs-string">&#x27;sans-serif&#x27;</span>,
<span class="hljs-string">&#x27;serif&#x27;</span>
]
</code></pre>
<ul>
<li><code>opt.fontSizeList</code></li>
</ul>
<p>Replace the built-in font size list during rich text editing. The built-in list is:</p>
<pre class="hljs"><code>[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, ..<span class="hljs-number">.100</span>]
</code></pre>
<h2>Method</h2>
<h3>selectAll()</h3>
<p>Select All. When the node is being edited, you can select all the text in the node through this method.</p>
<h3>formatText(config = {})</h3>
<ul>
<li><code>config</code>：Object. The key is the style attribute and the value is the style value. The complete configuration is as follows:</li>
</ul>
<pre class="hljs"><code>{
<span class="hljs-attr">font</span>: <span class="hljs-string">&#x27;字体&#x27;</span>,
<span class="hljs-attr">size</span>: <span class="hljs-string">&#x27;12px,&#x27;</span> <span class="hljs-comment">// font size</span>
<span class="hljs-attr">bold</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// Bold or not, true/false </span>
<span class="hljs-attr">italic</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// Italic or not, true/false </span>
<span class="hljs-attr">underline</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// Show underline or not, true/false </span>
<span class="hljs-attr">strike</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// Whether to display strikethrough, true/false </span>
<span class="hljs-attr">color</span>: <span class="hljs-string">&#x27;#333&#x27;</span> <span class="hljs-comment">// color</span>
}
</code></pre>
<p>Formats the currently selected text.</p>
<h3>formatRangeText(range, config = {})</h3>
<ul>
<li><code>range</code>：The range object of <code>Quill</code>, has the following format:</li>
</ul>
<pre class="hljs"><code>{
index,
length
}
</code></pre>
<ul>
<li><code>config</code>：Same as <code>formatText</code> method</li>
</ul>
<p>Formats the text of the specified range.</p>
<h3>formatAllText(config = {})</h3>
<ul>
<li><code>config</code>：Same as <code>formatText</code> method</li>
</ul>
<p>Formats all text of the current edit node.</p>
<h3>normalStyleToRichTextStyle(style)</h3>
<p>Converts a normal node style object to a rich text style object. Because there are differences between node style attributes and rich text style attributes during non-rich text editing, a conversion operation is required. For example:</p>
<pre class="hljs"><code>{
<span class="hljs-attr">fontFamily</span>: <span class="hljs-string">&#x27;xxx&#x27;</span>
}
<span class="hljs-comment">// After conversion</span>
{
<span class="hljs-attr">font</span>: <span class="hljs-string">&#x27;xxx&#x27;</span>
}
</code></pre>
<h3>richTextStyleToNormalStyle(config)</h3>
<p>Converts rich text style objects to normal node style objects. For example:</p>
<pre class="hljs"><code>{
<span class="hljs-attr">size</span>: <span class="hljs-string">&#x27;16px&#x27;</span>
}
<span class="hljs-comment">// After conversion</span>
{
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">16</span>
}
</code></pre>
<h3>handleSvgDomElements(svg)</h3>
<ul>
<li><code>svg</code>: <code>svg</code> node</li>
</ul>
<p>Convert the <code>dom</code> element embedded in the <code>svg</code> into a picture and return a <code>Promise</code>.</p>
<h3>transformAllNodesToNormalNode()</h3>
<p>Convert all nodes to non-rich text nodes.</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

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

@@ -1,3 +1,3 @@
export default [{"lang":"zh","children":[{"path":"batchExecution","title":"BatchExecution实例"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"Command实例"},{"path":"constructor","title":"构造函数"},{"path":"doExport","title":"Export 插件"},{"path":"drag","title":"Drag插件"},{"path":"introduction","title":"简介"},{"path":"keyboardNavigation","title":"KeyboardNavigation插件"},{"path":"keyCommand","title":"KeyCommand实例"},{"path":"miniMap","title":"MiniMap插件"},{"path":"node","title":"Node实例"},{"path":"render","title":"Render实例"},{"path":"select","title":"Select 插件 "},{"path":"start","title":"开始"},{"path":"translate","title":"参与翻译"},{"path":"utils","title":"内置工具方法"},{"path":"view","title":"View实例"},{"path":"watermark","title":"Watermark插件"},{"path":"xmind","title":"XMind解析"}]},{"lang":"en","children":[{"path":"batchExecution","title":"batchExecution instance"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"command instance"},{"path":"constructor","title":"Constructor"},{"path":"doExport","title":"Export plugin"},{"path":"drag","title":"Drag plugin"},{"path":"introduction","title":"Introduction"},{"path":"keyboardNavigation","title":"KeyboardNavigation plugin"},{"path":"keyCommand","title":"KeyCommand instance"},{"path":"miniMap","title":"MiniMap plugin"},{"path":"node","title":"Node instance"},{"path":"render","title":"Render instance"},{"path":"select","title":"Select plugin"},{"path":"start","title":"Start"},{"path":"translate","title":"Participate in translation"},{"path":"utils","title":"Utility Methods"},{"path":"view","title":"View instance"},{"path":"watermark","title":"Watermark plugin"},{"path":"xmind","title":"XMind parse"}]}]
export default [{"lang":"zh","children":[{"path":"batchExecution","title":"BatchExecution实例"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"Command实例"},{"path":"constructor","title":"构造函数"},{"path":"doExport","title":"Export 插件"},{"path":"drag","title":"Drag插件"},{"path":"introduction","title":"简介"},{"path":"keyboardNavigation","title":"KeyboardNavigation插件"},{"path":"keyCommand","title":"KeyCommand实例"},{"path":"miniMap","title":"MiniMap插件"},{"path":"node","title":"Node实例"},{"path":"render","title":"Render实例"},{"path":"richText","title":"RichText插件"},{"path":"select","title":"Select 插件 "},{"path":"start","title":"开始"},{"path":"translate","title":"参与翻译"},{"path":"utils","title":"内置工具方法"},{"path":"view","title":"View实例"},{"path":"watermark","title":"Watermark插件"},{"path":"xmind","title":"XMind解析"}]},{"lang":"en","children":[{"path":"batchExecution","title":"batchExecution instance"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"command instance"},{"path":"constructor","title":"Constructor"},{"path":"doExport","title":"Export plugin"},{"path":"drag","title":"Drag plugin"},{"path":"introduction","title":"Introduction"},{"path":"keyboardNavigation","title":"KeyboardNavigation plugin"},{"path":"keyCommand","title":"KeyCommand instance"},{"path":"miniMap","title":"MiniMap plugin"},{"path":"node","title":"Node instance"},{"path":"render","title":"Render instance"},{"path":"richText","title":"RichText plugin"},{"path":"select","title":"Select plugin"},{"path":"start","title":"Start"},{"path":"translate","title":"Participate in translation"},{"path":"utils","title":"Utility Methods"},{"path":"view","title":"View instance"},{"path":"watermark","title":"Watermark plugin"},{"path":"xmind","title":"XMind parse"}]}]

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

@@ -1,10 +1,14 @@
# Changelog
## 0.4.0
新增：节点支持富文本编辑。
## 0.3.4
New：节点文本增加自动换行功能。
新增：节点文本增加自动换行功能。
Fix：1.修复批量删除的节点中如果存在根节点会出现删除异常的问题。2.修复底边风格的情况下，节点高度过高会和其他节点重叠的问题。
修复：1.修复批量删除的节点中如果存在根节点会出现删除异常的问题。2.修复底边风格的情况下，节点高度过高会和其他节点重叠的问题。
## 0.3.3

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

@@ -1,9 +1,11 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.4.0</h2>
<p>新增：节点支持富文本编辑。</p>
<h2>0.3.4</h2>
<p>New：节点文本增加自动换行功能。</p>
<p>Fix：1.修复批量删除的节点中如果存在根节点会出现删除异常的问题。2.修复底边风格的情况下，节点高度过高会和其他节点重叠的问题。</p>
<p>新增：节点文本增加自动换行功能。</p>
<p>修复：1.修复批量删除的节点中如果存在根节点会出现删除异常的问题。2.修复底边风格的情况下，节点高度过高会和其他节点重叠的问题。</p>
<h2>0.3.3</h2>
<p>修复：根节点文字无法换行的问题。</p>
<h2>0.3.2</h2>

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

@@ -84,14 +84,23 @@ mindMap.setTheme('主题名称')
主题的所有配置可以参考[默认主题](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js)。`defineTheme`方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多，一个典型的自定义主题配置可以参考[blueSky](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js)。
### usePlugin(plugin)
### usePlugin(plugin, opt = {})
> v0.3.0+
- `opt`：v0.4.0+，插件参数。如果某个插件支持自定义选项的话可以通过这个参数传入。
注册插件，如果需要使用非核心的一些功能，比如小地图、水印等，可以通过该方法进行注册。可链式调用。
注意：插件需要在实例化`MindMap`前注册。
### hasPlugin(plugin)
> v0.4.0+
获取是否注册了某个插件，返回的是插件在注册插件列表里的索引，为`-1`则代表插件没有注册。
## 静态属性
### pluginList
@@ -174,6 +183,8 @@ mindMap.setTheme('主题名称')
| scale | 放大缩小事件 | scale（缩放比例） |
| node_img_dblclick（v0.2.15+） | 节点内图片的双击事件 | this（节点实例）、e（事件对象） |
| node_tree_render_end（v0.2.16+） | 节点树渲染完毕事件 | |
| rich_text_selection_change（v0.4.0+） | 当注册了`RichText`插件时可用。当节点编辑时，文本选区发生改变时触发 | hasRange（是否存在选区）、rectInfo（选区的尺寸和位置信息）、formatInfo（选区的文本格式化信息） |
| transforming-dom-to-images（v0.4.0+） | 当注册了`RichText`插件时可用。当`svg`中存在`DOM`节点时，导出为图片时会将`DOM`节点转换为图片，转换过程中会触发该事件，可用通过该事件给用户提示，告知目前转换到的节点 | index（当前转换到的节点索引）、len（一共需要转换的节点数量） |
### emit(event, ...args)
@@ -312,4 +323,16 @@ mindMap.updateConfig({
> v0.1.5+
将浏览器可视窗口的坐标转换成相对于画布的坐标
将浏览器可视窗口的坐标转换成相对于画布的坐标
### addPlugin(plugin, opt)
> v0.4.0+
注册插件，使用`MindMap.usePlugin`注册插件只能在实例化之前，实例化后注册的插件是不会生效的，所以如果想在实例化后注册插件可以使用实例的`addPlugin`方法。
### removePlugin(plugin)
> v0.4.0+
移除注册的插件，无论是通过`usePlugin`还是`addPlugin`方法注册的插件都可以移除。

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

@@ -214,12 +214,20 @@ MindMap.defineTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>, {
mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
</code></pre>
<p>主题的所有配置可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">默认主题</a>。<code>defineTheme</code>方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多，一个典型的自定义主题配置可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js">blueSky</a>。</p>
<h3>usePlugin(plugin)</h3>
<h3>usePlugin(plugin, opt = {})</h3>
<blockquote>
<p>v0.3.0+</p>
</blockquote>
<ul>
<li><code>opt</code>：v0.4.0+，插件参数。如果某个插件支持自定义选项的话可以通过这个参数传入。</li>
</ul>
<p>注册插件，如果需要使用非核心的一些功能，比如小地图、水印等，可以通过该方法进行注册。可链式调用。</p>
<p>注意：插件需要在实例化<code>MindMap</code>前注册。</p>
<h3>hasPlugin(plugin)</h3>
<blockquote>
<p>v0.4.0+</p>
</blockquote>
<p>获取是否注册了某个插件，返回的是插件在注册插件列表里的索引，为<code>-1</code>则代表插件没有注册。</p>
<h2>静态属性</h2>
<h3>pluginList</h3>
<blockquote>
@@ -391,6 +399,16 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<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>
</tr>
<tr>
<td>transforming-dom-to-images（v0.4.0+）</td>
<td>当注册了<code>RichText</code>插件时可用。当<code>svg</code>中存在<code>DOM</code>节点时，导出为图片时会将<code>DOM</code>节点转换为图片，转换过程中会触发该事件，可用通过该事件给用户提示，告知目前转换到的节点</td>
<td>index（当前转换到的节点索引）、len（一共需要转换的节点数量）</td>
</tr>
</tbody>
</table>
<h3>emit(event, ...args)</h3>
@@ -629,6 +647,16 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<p>v0.1.5+</p>
</blockquote>
<p>将浏览器可视窗口的坐标转换成相对于画布的坐标</p>
<h3>addPlugin(plugin, opt)</h3>
<blockquote>
<p>v0.4.0+</p>
</blockquote>
<p>注册插件，使用<code>MindMap.usePlugin</code>注册插件只能在实例化之前，实例化后注册的插件是不会生效的，所以如果想在实例化后注册插件可以使用实例的<code>addPlugin</code>方法。</p>
<h3>removePlugin(plugin)</h3>
<blockquote>
<p>v0.4.0+</p>
</blockquote>
<p>移除注册的插件，无论是通过<code>usePlugin</code>还是<code>addPlugin</code>方法注册的插件都可以移除。</p>
</div>
</template>

27
web/src/pages/Doc/zh/doExport/index.md
View File

@@ -19,18 +19,39 @@ MindMap.usePlugin(Export)
导出为`png`，异步方法，返回图片数据，`data:url`数据，可以自行下载或显示
### svg()
### svg(name, domToImage = false, plusCssText)
- `name`：`svg`标题
- `domToImage`：v0.4.0+，当开启了节点富文本编辑，可以通过该参数指定是否将`svg`中的`dom`节点转换成图片的形式
- `plusCssText`：v0.4.0+，当开启了节点富文本编辑，且`domToImage`传了`false`时，可以添加附加的`css`样式，如果`svg`中存在`dom`节点，想要设置一些针对节点的样式可以通过这个参数传入，比如：
```js
svg(
'',
false,
`* {
margin: 0;
padding: 0;
box-sizing: border-box;
}`
)
```
导出为`svg`，异步方法，返回`svg`数据，`data:url`数据，可以自行下载或显示
### getSvgData()
### getSvgData(domToImage)
- `domToImage`：v0.4.0+，如果开启了节点富文本，则可以通过该参数指定是否要将`svg`中嵌入的`DOM`节点转换为图片。
获取`svg`数据，异步方法，返回一个对象：
```js
{
node// svg对象
str// svg字符串
str// svg字符串，如果开启了富文本编辑且domToImage设为true，那么该值返回的svg字符内的dom节点会被转换成图片的形式
nodeWithDomToImg// v0.4.0+，DOM节点转换为图片后的svg对象，只有当开启了富文本编辑且domToImage设为true才有值，否则为null
}
```

31
web/src/pages/Doc/zh/doExport/index.vue
View File

@@ -12,13 +12,38 @@ MindMap.usePlugin(Export)
<h2>方法</h2>
<h3>png()</h3>
<p>导出为<code>png</code>，异步方法，返回图片数据，<code>data:url</code>数据，可以自行下载或显示</p>
<h3>svg()</h3>
<h3>svg(name, domToImage = false, plusCssText)</h3>
<ul>
<li>
<p><code>name</code>：<code>svg</code>标题</p>
</li>
<li>
<p><code>domToImage</code>：v0.4.0+，当开启了节点富文本编辑，可以通过该参数指定是否将<code>svg</code>中的<code>dom</code>节点转换成图片的形式</p>
</li>
<li>
<p><code>plusCssText</code>：v0.4.0+，当开启了节点富文本编辑，且<code>domToImage</code>传了<code>false</code>时，可以添加附加的<code>css</code>样式，如果<code>svg</code>中存在<code>dom</code>节点，想要设置一些针对节点的样式可以通过这个参数传入，比如：</p>
</li>
</ul>
<pre class="hljs"><code>svg(
<span class="hljs-string">&#x27;&#x27;</span>,
<span class="hljs-literal">false</span>,
<span class="hljs-string">`* {
margin: 0;
padding: 0;
box-sizing: border-box;
}`</span>
)
</code></pre>
<p>导出为<code>svg</code>，异步方法，返回<code>svg</code>数据，<code>data:url</code>数据，可以自行下载或显示</p>
<h3>getSvgData()</h3>
<h3>getSvgData(domToImage)</h3>
<ul>
<li><code>domToImage</code>：v0.4.0+，如果开启了节点富文本，则可以通过该参数指定是否要将<code>svg</code>中嵌入的<code>DOM</code>节点转换为图片。</li>
</ul>
<p>获取<code>svg</code>数据，异步方法，返回一个对象：</p>
<pre class="hljs"><code>{
node<span class="hljs-comment">// svg对象</span>
str<span class="hljs-comment">// svg字符串</span>
str<span class="hljs-comment">// svg字符串，如果开启了富文本编辑且domToImage设为true，那么该值返回的svg字符内的dom节点会被转换成图片的形式</span>
nodeWithDomToImg<span class="hljs-comment">// v0.4.0+，DOM节点转换为图片后的svg对象，只有当开启了富文本编辑且domToImage设为true才有值，否则为null</span>
}
</code></pre>
<h3>pdf(name)</h3>

147
web/src/pages/Doc/zh/richText/index.md Normal file
View File

@@ -0,0 +1,147 @@
# RichText插件
> v0.4.0+
> 注意：这是一个测试性质和不完善的功能
该插件提供节点富文本编辑的能力，注册了即可生效。
默认节点编辑只能对节点内所有文本统一应用样式，通过该插件可以支持富文本编辑的效果，目前支持：加粗、斜体、下划线、删除线、字体、字号、颜色。不支持上划线、行高。
该插件的原理是使用[Quill](https://github.com/quilljs/quill)编辑器实现富文本编辑，然后把编辑后生成的`DOM`节点直接作为节点的文本数据，并且在渲染的时候通过`svg`的`foreignObject`标签嵌入`DOM`节点。
这样也造成了一个问题，就是导出为图片的功能受到了影响，原本将`svg`导出为图片的原理很简单，获取到`svg`字符串，然后创建为`type=image/svg+xml`类型的`blob`数据，再使用`URL.createObjectURL`方法生成`data:url`数据，再创建一个`Image`标签，将`data:url`作为该图片的`src`，最后再将这个图片绘制到`canvas`对象上进行导出，但是经过测试，当`svg`中嵌入了`DOM`节点，这种方式导出会出错，并且尝试了多种方式后都无法实现完美的导出效果，目前的方式是遍历`svg`中的`foreignObject`节点，使用[html2canvas](https://github.com/niklasvh/html2canvas)将`foreignObject`节点内的`DOM`节点转换为图片再替换掉`foreignObject`节点，这种方式可以工作，但是非常耗时，因为`html2canvas`转换一次的时间很长，导致转换一个节点都需要耗时差不多2秒，这样导致节点越多，转换时间越慢，所以如果无法忍受长时间的导出的话推荐不要使用该插件。
如果你有更好的方式也欢迎留言。
## 注册
```js
import MindMap from 'simple-mind-map'
import RichText from 'simple-mind-map/src/RichText.js'
MindMap.usePlugin(RichText, opt?)
```
注册完且实例化`MindMap`后可通过`mindMap.richText`获取到该实例。
### 注册选项
`opt`选项可以传递以下参数：
- `opt.fontFamilyList`
替换富文本编辑时内置字体列表。内置的列表为：
```js
[
'宋体, SimSun, Songti SC',
'微软雅黑, Microsoft YaHei',
'楷体, 楷体_GB2312, SimKai, STKaiti',
'黑体, SimHei, Heiti SC',
'隶书, SimLi',
'andale mono',
'arial, helvetica, sans-serif',
'arial black, avant garde',
'comic sans ms',
'impact, chicago',
'times new roman',
'sans-serif',
'serif'
]
```
- `opt.fontSizeList`
替换富文本编辑时内置字号列表。内置的列表为：
```js
[1, 2, 3, ...100]
```
## 方法
### selectAll()
选中全部。当节点正在编辑中可以通过该方法选中节点内的所有文本。
### formatText(config = {})
- `config`：对象，键为样式属性，值为样式值，完整的配置如下：
```js
{
font: '字体',
size: '12px,' // 字号
bold: true, // 是否加粗，true/false
italic: true, // 是否斜体，true/false
underline: true, // 是否显示下划线，true/false
strike: true, // 是否显示删除线，true/false
color: '#333' // 颜色
}
```
格式化当前选中的文本。
### formatRangeText(range, config = {})
- `range`：`Quill`的范围对象，格式如下：
```js
{
index,
length
}
```
- `config`：同`formatText`方法
格式化指定范围的文本。
### formatAllText(config = {})
- `config`：同`formatText`方法
格式化当前编辑节点的所有文本。
### normalStyleToRichTextStyle(style)
将普通节点样式对象转换成富文本样式对象。因为非富文本编辑时的节点样式属性和富文本样式属性是存在差异的，所以需要一个转换操作。比如：
```js
{
fontFamily: 'xxx'
}
// 转换后
{
font: 'xxx'
}
```
### richTextStyleToNormalStyle(config)
将富文本样式对象转换成普通节点样式对象。比如：
```js
{
size: '16px'
}
// 转换后
{
fontSize: 16
}
```
### handleSvgDomElements(svg)
- `svg`： `svg`节点
将`svg`中嵌入的`dom`元素转换成图片，返回一个`Promise`。
### transformAllNodesToNormalNode()
将所有节点转换成非富文本节点。

129
web/src/pages/Doc/zh/richText/index.vue Normal file
View File

@@ -0,0 +1,129 @@
<template>
<div>
<h1>RichText插件</h1>
<blockquote>
<p>v0.4.0+</p>
</blockquote>
<blockquote>
<p>注意：这是一个测试性质和不完善的功能</p>
</blockquote>
<p>该插件提供节点富文本编辑的能力，注册了即可生效。</p>
<p>默认节点编辑只能对节点内所有文本统一应用样式，通过该插件可以支持富文本编辑的效果，目前支持：加粗、斜体、下划线、删除线、字体、字号、颜色。不支持上划线、行高。</p>
<p>该插件的原理是使用<a href="https://github.com/quilljs/quill">Quill</a>编辑器实现富文本编辑，然后把编辑后生成的<code>DOM</code>节点直接作为节点的文本数据，并且在渲染的时候通过<code>svg</code>的<code>foreignObject</code>标签嵌入<code>DOM</code>节点。</p>
<p>这样也造成了一个问题，就是导出为图片的功能受到了影响，原本将<code>svg</code>导出为图片的原理很简单，获取到<code>svg</code>字符串，然后创建为<code>type=image/svg+xml</code>类型的<code>blob</code>数据，再使用<code>URL.createObjectURL</code>方法生成<code>data:url</code>数据，再创建一个<code>Image</code>标签，将<code>data:url</code>作为该图片的<code>src</code>，最后再将这个图片绘制到<code>canvas</code>对象上进行导出，但是经过测试，当<code>svg</code>中嵌入了<code>DOM</code>节点，这种方式导出会出错，并且尝试了多种方式后都无法实现完美的导出效果，目前的方式是遍历<code>svg</code>中的<code>foreignObject</code>节点，使用<a href="https://github.com/niklasvh/html2canvas">html2canvas</a>将<code>foreignObject</code>节点内的<code>DOM</code>节点转换为图片再替换掉<code>foreignObject</code>节点，这种方式可以工作，但是非常耗时，因为<code>html2canvas</code>转换一次的时间很长，导致转换一个节点都需要耗时差不多2秒，这样导致节点越多，转换时间越慢，所以如果无法忍受长时间的导出的话推荐不要使用该插件。</p>
<p>如果你有更好的方式也欢迎留言。</p>
<h2>注册</h2>
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
<span class="hljs-keyword">import</span> RichText <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/RichText.js&#x27;</span>
MindMap.usePlugin(RichText, opt?)
</code></pre>
<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.richText</code>获取到该实例。</p>
<h3>注册选项</h3>
<p><code>opt</code>选项可以传递以下参数：</p>
<ul>
<li><code>opt.fontFamilyList</code></li>
</ul>
<p>替换富文本编辑时内置字体列表。内置的列表为：</p>
<pre class="hljs"><code>[
<span class="hljs-string">&#x27;宋体, SimSun, Songti SC&#x27;</span>,
<span class="hljs-string">&#x27;微软雅黑, Microsoft YaHei&#x27;</span>,
<span class="hljs-string">&#x27;楷体, 楷体_GB2312, SimKai, STKaiti&#x27;</span>,
<span class="hljs-string">&#x27;黑体, SimHei, Heiti SC&#x27;</span>,
<span class="hljs-string">&#x27;隶书, SimLi&#x27;</span>,
<span class="hljs-string">&#x27;andale mono&#x27;</span>,
<span class="hljs-string">&#x27;arial, helvetica, sans-serif&#x27;</span>,
<span class="hljs-string">&#x27;arial black, avant garde&#x27;</span>,
<span class="hljs-string">&#x27;comic sans ms&#x27;</span>,
<span class="hljs-string">&#x27;impact, chicago&#x27;</span>,
<span class="hljs-string">&#x27;times new roman&#x27;</span>,
<span class="hljs-string">&#x27;sans-serif&#x27;</span>,
<span class="hljs-string">&#x27;serif&#x27;</span>
]
</code></pre>
<ul>
<li><code>opt.fontSizeList</code></li>
</ul>
<p>替换富文本编辑时内置字号列表。内置的列表为：</p>
<pre class="hljs"><code>[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, ..<span class="hljs-number">.100</span>]
</code></pre>
<h2>方法</h2>
<h3>selectAll()</h3>
<p>选中全部。当节点正在编辑中可以通过该方法选中节点内的所有文本。</p>
<h3>formatText(config = {})</h3>
<ul>
<li><code>config</code>：对象，键为样式属性，值为样式值，完整的配置如下：</li>
</ul>
<pre class="hljs"><code>{
<span class="hljs-attr">font</span>: <span class="hljs-string">&#x27;字体&#x27;</span>,
<span class="hljs-attr">size</span>: <span class="hljs-string">&#x27;12px,&#x27;</span> <span class="hljs-comment">// 字号</span>
<span class="hljs-attr">bold</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 是否加粗，true/false </span>
<span class="hljs-attr">italic</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 是否斜体，true/false </span>
<span class="hljs-attr">underline</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 是否显示下划线，true/false </span>
<span class="hljs-attr">strike</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 是否显示删除线，true/false </span>
<span class="hljs-attr">color</span>: <span class="hljs-string">&#x27;#333&#x27;</span> <span class="hljs-comment">// 颜色</span>
}
</code></pre>
<p>格式化当前选中的文本。</p>
<h3>formatRangeText(range, config = {})</h3>
<ul>
<li><code>range</code>：<code>Quill</code>的范围对象，格式如下：</li>
</ul>
<pre class="hljs"><code>{
index,
length
}
</code></pre>
<ul>
<li><code>config</code>：同<code>formatText</code>方法</li>
</ul>
<p>格式化指定范围的文本。</p>
<h3>formatAllText(config = {})</h3>
<ul>
<li><code>config</code>：同<code>formatText</code>方法</li>
</ul>
<p>格式化当前编辑节点的所有文本。</p>
<h3>normalStyleToRichTextStyle(style)</h3>
<p>将普通节点样式对象转换成富文本样式对象。因为非富文本编辑时的节点样式属性和富文本样式属性是存在差异的，所以需要一个转换操作。比如：</p>
<pre class="hljs"><code>{
<span class="hljs-attr">fontFamily</span>: <span class="hljs-string">&#x27;xxx&#x27;</span>
}
<span class="hljs-comment">// 转换后</span>
{
<span class="hljs-attr">font</span>: <span class="hljs-string">&#x27;xxx&#x27;</span>
}
</code></pre>
<h3>richTextStyleToNormalStyle(config)</h3>
<p>将富文本样式对象转换成普通节点样式对象。比如：</p>
<pre class="hljs"><code>{
<span class="hljs-attr">size</span>: <span class="hljs-string">&#x27;16px&#x27;</span>
}
<span class="hljs-comment">// 转换后</span>
{
<span class="hljs-attr">fontSize</span>: <span class="hljs-number">16</span>
}
</code></pre>
<h3>handleSvgDomElements(svg)</h3>
<ul>
<li><code>svg</code>： <code>svg</code>节点</li>
</ul>
<p>将<code>svg</code>中嵌入的<code>dom</code>元素转换成图片，返回一个<code>Promise</code>。</p>
<h3>transformAllNodesToNormalNode()</h3>
<p>将所有节点转换成非富文本节点。</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>