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

Doc: update

Browse Source
This commit is contained in:
街角小林
2024-07-19 14:11:23 +08:00
parent 6dea1ef9b2
commit eb72e0eed3
19 changed files with 225 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@@ -423,4 +423,12 @@ const mindMap = new MindMap({
<img src="./web/src/assets/avatar/Tobin.jpg" style="width: 50px;height: 50px;" />
<span>Tobin</span>
</span>
<span>
<img src="./web/src/assets/avatar/夏虫不语冰.jpg" style="width: 50px;height: 50px;" />
<span>夏虫不语冰</span>
</span>
<span>
<img src="./web/src/assets/avatar/晴空.jpg" style="width: 50px;height: 50px;" />
<span>晴空</span>
</span>
</p>

BIN
web/src/assets/avatar/夏虫不语冰.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
web/src/assets/avatar/晴空.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

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

@@ -2,9 +2,11 @@
## 0.10.3
> 2024.7.12
> 2024.7.19
Node tag data structure update:
Updates that require special attention:
1.Node tag data structure update
The node tag data has been changed from a string array to an object array, mainly to support setting the style of a single tag. The current node tag data structure is as follows:
@@ -27,6 +29,10 @@ Change to the following:
}
```
2.Related to mathematical formulas
The mathematical formula plugin Formula defaults to importing styles from the Katex library, so there is no need to manually import them in the application. At the same time, the path of the Katex library font file needs to be configured through the katexFontPath instantiation option.
Fix:
> 1.Fix the issue where the isRoot and parent attributes of node instances obtained through methods customCreateNodeContent and createNodePrefixContent are both null;
@@ -37,17 +43,31 @@ Fix:
New:
> 1.Support setting single label styles for nodes;
> 1.Modified the data type of the node tag field tag to support setting a single node tag style;
>
> 2.Add instantiation options for displaying the location of node labels;
> 2.Add instantiation options for displaying the location (Equivalent to node text) of node labels;
>
> 3.Two callback parameters have been added to the node_tag_click event;
>
> 4.When copying, cutting, or moving multiple nodes, operate them in the order they are on the nodes, rather than in the order they are activated;
>
> 5.If a formula plugin is registered and there are formulas in the node, then when exporting SVG, it is necessary to add styles from the Katex library;
>
> 6.Support instantiation options for custom katex library rendering modes;
>
> 7.The formula plugin defaults to importing styles from the Katex library;
>
> 8.Add instantiation options for custom katex library font file paths;
>
> 9.Add instantiation options for setting the inner margin of the outer frame;
Demo:
> 1.Support clicking on node tags to modify text and color;
>
> 2.Remove the logic of introducing formula library styles;
>
> 3.Support configuring the inner margin of the outer frame;
## 0.10.2 / 0.10.2-fix.1

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

@@ -3,9 +3,10 @@
<h1>Changelog</h1>
<h2>0.10.3</h2>
<blockquote>
<p>2024.7.12</p>
<p>2024.7.19</p>
</blockquote>
<p>Node tag data structure update:</p>
<p>Updates that require special attention:</p>
<p>1.Node tag data structure update</p>
<p>The node tag data has been changed from a string array to an object array, mainly to support setting the style of a single tag. The current node tag data structure is as follows:</p>
<pre class="hljs"><code>{
<span class="hljs-attr">tag</span>: [<span class="hljs-string">&#x27;tag&#x27;</span>]
@@ -21,6 +22,8 @@
]
}
</code></pre>
<p>2.Related to mathematical formulas</p>
<p>The mathematical formula plugin Formula defaults to importing styles from the Katex library, so there is no need to manually import them in the application. At the same time, the path of the Katex library font file needs to be configured through the katexFontPath instantiation option.</p>
<p>Fix:</p>
<blockquote>
<p>1.Fix the issue where the isRoot and parent attributes of node instances obtained through methods customCreateNodeContent and createNodePrefixContent are both null;</p>
@@ -29,14 +32,21 @@
</blockquote>
<p>New:</p>
<blockquote>
<p>1.Support setting single label styles for nodes;</p>
<p>2.Add instantiation options for displaying the location of node labels;</p>
<p>1.Modified the data type of the node tag field tag to support setting a single node tag style;</p>
<p>2.Add instantiation options for displaying the location (Equivalent to node text) of node labels;</p>
<p>3.Two callback parameters have been added to the node_tag_click event;</p>
<p>4.When copying, cutting, or moving multiple nodes, operate them in the order they are on the nodes, rather than in the order they are activated;</p>
<p>5.If a formula plugin is registered and there are formulas in the node, then when exporting SVG, it is necessary to add styles from the Katex library;</p>
<p>6.Support instantiation options for custom katex library rendering modes;</p>
<p>7.The formula plugin defaults to importing styles from the Katex library;</p>
<p>8.Add instantiation options for custom katex library font file paths;</p>
<p>9.Add instantiation options for setting the inner margin of the outer frame;</p>
</blockquote>
<p>Demo:</p>
<blockquote>
<p>1.Support clicking on node tags to modify text and color;</p>
<p>2.Remove the logic of introducing formula library styles;</p>
<p>3.Support configuring the inner margin of the outer frame;</p>
</blockquote>
<h2>0.10.2 / 0.10.2-fix.1</h2>
<blockquote>

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

@@ -267,7 +267,6 @@ 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 | |
@@ -321,6 +320,21 @@ new MindMap({
| margin | Number | 50 | The outer margin of the highlighted box |
| openBlankMode（v0.9.12+） | Boolean | true | Is enable fill in the blank mode, where underlined text is not displayed by default and only displayed sequentially by pressing the enter key |
#### 14.Formula plugin
| Field Name | Type | Default Value | Description | Required |
| -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ |
| enableEditFormulaInRichTextEdit（v0.10.0+） | Boolean | true | Do you want to enable direct editing of mathematical formulas in the rich text editing box |
| katexFontPath（v0.10.3+） | String | https://unpkg.com/katex@0.16.11/dist | The request path for font files in the Katex library. Font files will only be requested when Katex's output is configured as html. The current configuration can be obtained through the mindMap.formula.getKatexConfig() method. The font file can be found in node_modules: katex/dist/fonts/. You can upload it to your server or CDN. The final font request path is `${katexFontPath}fonts/KaTeX_AMS-Regular.woff2`, which can be concatenated by oneself to test whether it can be accessed |
| getKatexOutputType（v0.10.3+） | Function、null | null | Customize the output mode of the Katex library. By default, when the Chrome kernel is below 100, html mode will be used. Otherwise, mathml mode will be used. If you have your own rules, you can pass a function that returns either mathml or html |
#### 15.OuterFrame plugin
| Field Name | Type | Default Value | Description | Required |
| -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ |
| outerFramePaddingX（v0.10.3+） | Number | 10 | Horizontal inner margin of the outer frame |
| outerFramePaddingY（v0.10.3+） | Number | 10 | Vertical inner margin of the outer frame |
## Static methods
### defineTheme(name, config)

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

@@ -1016,13 +1016,6 @@
<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>
@@ -1233,6 +1226,17 @@
</tr>
</tbody>
</table>
<h4>14.Formula plugin</h4>
<p>| Field Name | Type | Default Value | Description | Required |
| -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ |
| enableEditFormulaInRichTextEdit（v0.10.0+） | Boolean | true | Do you want to enable direct editing of mathematical formulas in the rich text editing box |
| katexFontPath（v0.10.3+） | String | https://unpkg.com/katex@0.16.11/dist | The request path for font files in the Katex library. Font files will only be requested when Katex's output is configured as html. The current configuration can be obtained through the mindMap.formula.getKatexConfig() method. The font file can be found in node_modules: katex/dist/fonts/. You can upload it to your server or CDN. The final font request path is <code>${katexFontPath}fonts/KaTeX_AMS-Regular.woff2</code>, which can be concatenated by oneself to test whether it can be accessed |
| getKatexOutputType（v0.10.3+） | Function、null | null | Customize the output mode of the Katex library. By default, when the Chrome kernel is below 100, html mode will be used. Otherwise, mathml mode will be used. If you have your own rules, you can pass a function that returns either mathml or html |</p>
<h4>15.OuterFrame plugin</h4>
<p>| Field Name | Type | Default Value | Description | Required |
| -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ |
| outerFramePaddingX（v0.10.3+） | Number | 10 | Horizontal inner margin of the outer frame |
| outerFramePaddingY（v0.10.3+） | Number | 10 | Vertical inner margin of the outer frame |</p>
<h2>Static methods</h2>
<h3>defineTheme(name, config)</h3>
<blockquote>

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

@@ -25,7 +25,9 @@ This plugin is used to support inserting formulas into nodes.
> ```
> If you are using packaged files such as '.umd.js' or '.esm.js', you can import them through online CDN services, such as `https://unpkg.com/browse/katex@0.16.9/dist/`, Of course, it is best to upload the 'css' file of the 'katex' and the corresponding font files in the 'fonts' directory to your own server.
## 问题
> Version v0.10.3+ will default to importing the style files of 'KaTeX'. So you don't need to manually introduce it anymore. When the rendering mode of the Katex library is html, it depends on some font files, which are not included in the plugin. You need to use the `katexFontPath` instantiation option to set the path of the font files.
## Problem
1.On some browsers, the formula source code is displayed

5
web/src/pages/Doc/en/formula/index.vue
View File

@@ -27,7 +27,10 @@
</code></pre>
<p>If you are using packaged files such as '.umd.js' or '.esm.js', you can import them through online CDN services, such as <code>https://unpkg.com/browse/katex@0.16.9/dist/</code>, Of course, it is best to upload the 'css' file of the 'katex' and the corresponding font files in the 'fonts' directory to your own server.</p>
</blockquote>
<h2>问题</h2>
<blockquote>
<p>Version v0.10.3+ will default to importing the style files of 'KaTeX'. So you don't need to manually introduce it anymore. When the rendering mode of the Katex library is html, it depends on some font files, which are not included in the plugin. You need to use the <code>katexFontPath</code> instantiation option to set the path of the font files.</p>
</blockquote>
<h2>Problem</h2>
<p>1.On some browsers, the formula source code is displayed</p>
<p>This is because some browsers do not support the 'mathml' output mode of the 'KaTex' library. You can change the output mode to 'html' by using the 'getKatexOutputType' instantiation option.</p>
<p>2.Sometimes formulas and text may display line breaks</p>

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

@@ -442,4 +442,12 @@ Open source is not easy. If this project is helpful to you, you can invite the a
<img src="../../../../assets/avatar/Tobin.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>Tobin</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%;" />
<p>夏虫不语冰</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%;" />
<p>晴空</p>
</div>
</div>

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

@@ -399,6 +399,14 @@ full screen, support mini map</li>
<img src="../../../../assets/avatar/Tobin.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>Tobin</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%;" />
<p>夏虫不语冰</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%;" />
<p>晴空</p>
</div>
</div>
</div>

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

@@ -2,9 +2,11 @@
## 0.10.3
> 2024.7.12
> 2024.7.19
节点标签数据结构更新：
需要特别关注的更新：
1.节点标签数据结构更新
节点标签数据由字符串数组，改为对象数组，主要是为了支持设置单个标签的样式，当前节点的标签数据结构如下：
@@ -27,6 +29,10 @@
}
```
2.数学公式相关
数学公式插件Formula默认会引入Katex库的样式，所以应用中不需要再手动引入，同时需要通过katexFontPath实例化选项来配置Katex库字体文件的路径。
修复：
> 1.修复customCreateNodeContent、createNodePrefixContent等方法里获取到的节点实例的isRoot和parent等属性都为null的问题；
@@ -37,17 +43,31 @@
新增：
> 1.支持设置节点单个标签样式；
> 1.修改了节点标签字段tag的数据类型，以支持设置节点单个标签样式；
>
> 2.新增节点标签显示位置的实例化选项；
> 2.新增节点标签显示位置（相当于节点文本）的实例化选项；
>
> 3.node_tag_click事件新增两个回调参数；
>
> 4.复制、剪切、移动多个节点时，按其在节点上的顺序进行操作，而不是激活的顺序；
>
> 5.如果注册了公式插件并且节点里存在公式，那么导出svg时需要添加katex库的样式；
>
> 6.支持自定义katex库渲染模式的实例化选项；
>
> 7.公式插件默认引入katex库的样式；
>
> 8.增加自定义katex库字体文件路径的实例化选项；
>
> 9.新增设置外框内边距的实例化选项；
Demo：
> 1.支持点击节点标签进行文本和颜色的修改；
>
> 2.去除引入公式库样式的逻辑；
>
> 3.支持配置外框内边距；
## 0.10.2 / 0.10.2-fix.1

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

@@ -3,9 +3,10 @@
<h1>Changelog</h1>
<h2>0.10.3</h2>
<blockquote>
<p>2024.7.12</p>
<p>2024.7.19</p>
</blockquote>
<p>节点标签数据结构更新：</p>
<p>需要特别关注的更新：</p>
<p>1.节点标签数据结构更新</p>
<p>节点标签数据由字符串数组，改为对象数组，主要是为了支持设置单个标签的样式，当前节点的标签数据结构如下：</p>
<pre class="hljs"><code>{
<span class="hljs-attr">tag</span>: [<span class="hljs-string">&#x27;标签&#x27;</span>]
@@ -21,6 +22,8 @@
]
}
</code></pre>
<p>2.数学公式相关</p>
<p>数学公式插件Formula默认会引入Katex库的样式，所以应用中不需要再手动引入，同时需要通过katexFontPath实例化选项来配置Katex库字体文件的路径。</p>
<p>修复：</p>
<blockquote>
<p>1.修复customCreateNodeContent、createNodePrefixContent等方法里获取到的节点实例的isRoot和parent等属性都为null的问题；</p>
@@ -29,14 +32,21 @@
</blockquote>
<p>新增：</p>
<blockquote>
<p>1.支持设置节点单个标签样式；</p>
<p>2.新增节点标签显示位置的实例化选项；</p>
<p>1.修改了节点标签字段tag的数据类型，以支持设置节点单个标签样式；</p>
<p>2.新增节点标签显示位置（相当于节点文本）的实例化选项；</p>
<p>3.node_tag_click事件新增两个回调参数；</p>
<p>4.复制、剪切、移动多个节点时，按其在节点上的顺序进行操作，而不是激活的顺序；</p>
<p>5.如果注册了公式插件并且节点里存在公式，那么导出svg时需要添加katex库的样式；</p>
<p>6.支持自定义katex库渲染模式的实例化选项；</p>
<p>7.公式插件默认引入katex库的样式；</p>
<p>8.增加自定义katex库字体文件路径的实例化选项；</p>
<p>9.新增设置外框内边距的实例化选项；</p>
</blockquote>
<p>Demo：</p>
<blockquote>
<p>1.支持点击节点标签进行文本和颜色的修改；</p>
<p>2.去除引入公式库样式的逻辑；</p>
<p>3.支持配置外框内边距；</p>
</blockquote>
<h2>0.10.2 / 0.10.2-fix.1</h2>
<blockquote>

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

@@ -269,7 +269,6 @@ 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文档数据 |
@@ -323,6 +322,21 @@ new MindMap({
| margin | Number | 50 | 高亮框的外边距 |
| openBlankMode（v0.9.12+） | Boolean | true | 是否开启填空模式，即带下划线的文本默认不显示，按回车键才依次显示 |
#### 14.Formula插件
| 字段名称 | 类型 | 默认值 | 描述 |
| -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ |
| enableEditFormulaInRichTextEdit（v0.10.0+） | Boolean | true | 是否开启在富文本编辑框中直接编辑数学公式 |
| katexFontPath（v0.10.3+） | String | https://unpkg.com/katex@0.16.11/dist | katex库的字体文件的请求路径。仅当katex的output配置为html时才会请求字体文件。可以通过mindMap.formula.getKatexConfig()方法来获取当前的配置。字体文件可以从node_modules中找到：katex/dist/fonts/。可以上传到你的服务器或cdn。最终的字体请求路径为`${katexFontPath}fonts/KaTeX_AMS-Regular.woff2`，可以自行拼接进行测试是否可以访问 |
| getKatexOutputType（v0.10.3+） | Function、null | null | 自定义katex库的输出模式。默认当Chrome内核100以下会使用html方式，否则使用mathml方式，如果你有自己的规则，那么可以传递一个函数，函数返回值为：mathml或html |
#### 15.OuterFrame插件
| 字段名称 | 类型 | 默认值 | 描述 |
| -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ |
| outerFramePaddingX（v0.10.3+） | Number | 10 | 外框的水平内边距 |
| outerFramePaddingY（v0.10.3+） | Number | 10 | 外框的垂直内边距 |
## 静态方法
### defineTheme(name, config)

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

@@ -905,12 +905,6 @@
<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>
@@ -1105,6 +1099,62 @@
</tr>
</tbody>
</table>
<h4>14.Formula插件</h4>
<table>
<thead>
<tr>
<th>字段名称</th>
<th>类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>enableEditFormulaInRichTextEdit（v0.10.0+）</td>
<td>Boolean</td>
<td>true</td>
<td>是否开启在富文本编辑框中直接编辑数学公式</td>
</tr>
<tr>
<td>katexFontPath（v0.10.3+）</td>
<td>String</td>
<td>https://unpkg.com/katex@0.16.11/dist</td>
<td>katex库的字体文件的请求路径。仅当katex的output配置为html时才会请求字体文件。可以通过mindMap.formula.getKatexConfig()方法来获取当前的配置。字体文件可以从node_modules中找到：katex/dist/fonts/。可以上传到你的服务器或cdn。最终的字体请求路径为<code>${katexFontPath}fonts/KaTeX_AMS-Regular.woff2</code>，可以自行拼接进行测试是否可以访问</td>
</tr>
<tr>
<td>getKatexOutputType（v0.10.3+）</td>
<td>Function、null</td>
<td>null</td>
<td>自定义katex库的输出模式。默认当Chrome内核100以下会使用html方式，否则使用mathml方式，如果你有自己的规则，那么可以传递一个函数，函数返回值为：mathml或html</td>
</tr>
</tbody>
</table>
<h4>15.OuterFrame插件</h4>
<table>
<thead>
<tr>
<th>字段名称</th>
<th>类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>outerFramePaddingX（v0.10.3+）</td>
<td>Number</td>
<td>10</td>
<td>外框的水平内边距</td>
</tr>
<tr>
<td>outerFramePaddingY（v0.10.3+）</td>
<td>Number</td>
<td>10</td>
<td>外框的垂直内边距</td>
</tr>
</tbody>
</table>
<h2>静态方法</h2>
<h3>defineTheme(name, config)</h3>
<blockquote>

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

@@ -23,6 +23,8 @@
> ```
> 如果你使用的是`.umd.js`、`.esm.js`之类的打包后的文件，那么可以通过在线的CDN服务来引入，比如：`https://unpkg.com/browse/katex@0.16.9/dist/`，当然，最好是把`katex`的`css`文件，以及对应的`fonts`目录下的字体文件上传到你自己的服务器上。
> v0.10.3+版本会默认引入`KaTeX`的样式文件。所以你无需再手动引入。当`Katex`库的渲染模式为`html`时它会依赖一些字体文件，插件并不包含这些文件，你需要通过`katexFontPath`实例化选项来设置字体文件的路径。
## 问题
1.在有的浏览器上显示的是公式源码

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

@@ -24,6 +24,9 @@
</code></pre>
<p>如果你使用的是<code>.umd.js</code>、<code>.esm.js</code>之类的打包后的文件，那么可以通过在线的CDN服务来引入，比如：<code>https://unpkg.com/browse/katex@0.16.9/dist/</code>，当然，最好是把<code>katex</code>的<code>css</code>文件，以及对应的<code>fonts</code>目录下的字体文件上传到你自己的服务器上。</p>
</blockquote>
<blockquote>
<p>v0.10.3+版本会默认引入<code>KaTeX</code>的样式文件。所以你无需再手动引入。当<code>Katex</code>库的渲染模式为<code>html</code>时它会依赖一些字体文件，插件并不包含这些文件，你需要通过<code>katexFontPath</code>实例化选项来设置字体文件的路径。</p>
</blockquote>
<h2>问题</h2>
<p>1.在有的浏览器上显示的是公式源码</p>
<p>这是因为有的浏览器不支持<code>KaTex</code>库的<code>mathml</code>输出模式，可以通过<code>getKatexOutputType</code>实例化选项来将输出模式改为<code>html</code>。</p>

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

@@ -438,4 +438,12 @@
<img src="../../../../assets/avatar/Tobin.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>Tobin</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%;" />
<p>夏虫不语冰</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%;" />
<p>晴空</p>
</div>
</div>

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

@@ -392,6 +392,14 @@
<img src="../../../../assets/avatar/Tobin.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
<p>Tobin</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%;" />
<p>夏虫不语冰</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%;" />
<p>晴空</p>
</div>
</div>
</div>