diff --git a/web/src/pages/Doc/en/formula/index.md b/web/src/pages/Doc/en/formula/index.md index 2ac26329..cf63966a 100644 --- a/web/src/pages/Doc/en/formula/index.md +++ b/web/src/pages/Doc/en/formula/index.md @@ -25,6 +25,28 @@ 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. +## 问题 + +1.On some browsers, the formula source code is displayed + +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. + +2.Sometimes formulas and text may display line breaks + +This is usually because formula rendering uses the 'html' mode, which depends on the font file. Therefore, when rendering the mind map before the font file is loaded, the calculated formula content size may not match the actual formula size after loading the font file, resulting in a row change. We can find a way to make the font file load before rendering the mind map. + +3.SVG files exported on one browser have inconsistent styles when opened on another browser + +Because the calculation of node size depends on the proxy style of the browser, the default style of different browsers is not consistent, so the calculated node size is also inconsistent. + +4.The smm or json file exported on one browser cannot be rendered properly when imported on another browser + +Because some browsers may render in 'mathml' mode, while others may render in 'html' mode, those that support 'mathml' mode usually support 'html', while the opposite is not possible. + +5.Abnormal formula for exporting images when rendering in `html` mode + +This is caused by not loading the font, and there is currently no solution. + ## Register ```js diff --git a/web/src/pages/Doc/en/formula/index.vue b/web/src/pages/Doc/en/formula/index.vue index cf2ba564..489f63c9 100644 --- a/web/src/pages/Doc/en/formula/index.vue +++ b/web/src/pages/Doc/en/formula/index.vue @@ -27,6 +27,17 @@
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.
1.On some browsers, the formula source code is displayed
+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.
+2.Sometimes formulas and text may display line breaks
+This is usually because formula rendering uses the 'html' mode, which depends on the font file. Therefore, when rendering the mind map before the font file is loaded, the calculated formula content size may not match the actual formula size after loading the font file, resulting in a row change. We can find a way to make the font file load before rendering the mind map.
+3.SVG files exported on one browser have inconsistent styles when opened on another browser
+Because the calculation of node size depends on the proxy style of the browser, the default style of different browsers is not consistent, so the calculated node size is also inconsistent.
+4.The smm or json file exported on one browser cannot be rendered properly when imported on another browser
+Because some browsers may render in 'mathml' mode, while others may render in 'html' mode, those that support 'mathml' mode usually support 'html', while the opposite is not possible.
+5.Abnormal formula for exporting images when rendering in html mode
This is caused by not loading the font, and there is currently no solution.
import MindMap from 'simple-mind-map'
import Formula from 'simple-mind-map/src/plugins/Formula.js'
diff --git a/web/src/pages/Doc/zh/formula/index.md b/web/src/pages/Doc/zh/formula/index.md
index ad6cb3f5..a668cb12 100644
--- a/web/src/pages/Doc/zh/formula/index.md
+++ b/web/src/pages/Doc/zh/formula/index.md
@@ -23,6 +23,27 @@
> ```
> 如果你使用的是`.umd.js`、`.esm.js`之类的打包后的文件,那么可以通过在线的CDN服务来引入,比如:`https://unpkg.com/browse/katex@0.16.9/dist/`,当然,最好是把`katex`的`css`文件,以及对应的`fonts`目录下的字体文件上传到你自己的服务器上。
+## 问题
+
+1.在有的浏览器上显示的是公式源码
+
+这是因为有的浏览器不支持`KaTex`库的`mathml`输出模式,可以通过`getKatexOutputType`实例化选项来将输出模式改为`html`。
+
+2.有时公式和文本会换行显示
+
+这一般是因为公式渲染使用的是`html`模式,这种模式依赖于字体文件,所以当字体文件没有加载完就渲染思维导图时,计算出来的公式内容大小和加载完字体文件后的实际公式大小不一致导致换行,可以想办法让字体文件加载完成后再渲染思维导图。
+
+3.在一个浏览器上导出的svg文件在另一个浏览器上打开样式不一致
+
+因为计算节点大小时是依赖浏览器的代理样式的,不同浏览器默认样式不一致,所以计算出来的节点大小也不一致。
+
+4.在一个浏览器上导出的smm或json文件在另一个浏览器上导入无法正常渲染
+
+因为有的浏览器可能是使用`mathml`模式渲染的,有的可能是`html`模式渲染的,通常支持`mathml`模式的肯定支持`html`,反过来则不行。
+
+5.在使用`html`模式渲染时导出图片公式异常
+
+这个因为没有加载字体导致的,目前没有解决方法。
## 注册
diff --git a/web/src/pages/Doc/zh/formula/index.vue b/web/src/pages/Doc/zh/formula/index.vue
index 539ebd34..32746255 100644
--- a/web/src/pages/Doc/zh/formula/index.vue
+++ b/web/src/pages/Doc/zh/formula/index.vue
@@ -24,6 +24,17 @@
如果你使用的是.umd.js、.esm.js之类的打包后的文件,那么可以通过在线的CDN服务来引入,比如:https://unpkg.com/browse/katex@0.16.9/dist/,当然,最好是把katex的css文件,以及对应的fonts目录下的字体文件上传到你自己的服务器上。
1.在有的浏览器上显示的是公式源码
+这是因为有的浏览器不支持KaTex库的mathml输出模式,可以通过getKatexOutputType实例化选项来将输出模式改为html。
2.有时公式和文本会换行显示
+这一般是因为公式渲染使用的是html模式,这种模式依赖于字体文件,所以当字体文件没有加载完就渲染思维导图时,计算出来的公式内容大小和加载完字体文件后的实际公式大小不一致导致换行,可以想办法让字体文件加载完成后再渲染思维导图。
3.在一个浏览器上导出的svg文件在另一个浏览器上打开样式不一致
+因为计算节点大小时是依赖浏览器的代理样式的,不同浏览器默认样式不一致,所以计算出来的节点大小也不一致。
+4.在一个浏览器上导出的smm或json文件在另一个浏览器上导入无法正常渲染
+因为有的浏览器可能是使用mathml模式渲染的,有的可能是html模式渲染的,通常支持mathml模式的肯定支持html,反过来则不行。
5.在使用html模式渲染时导出图片公式异常
这个因为没有加载字体导致的,目前没有解决方法。
import MindMap from 'simple-mind-map'
import Formula from 'simple-mind-map/src/plugins/Formula.js'
diff --git a/web/src/pages/Edit/components/FormulaSidebar.vue b/web/src/pages/Edit/components/FormulaSidebar.vue
index 085b1e3c..6ee47d2e 100644
--- a/web/src/pages/Edit/components/FormulaSidebar.vue
+++ b/web/src/pages/Edit/components/FormulaSidebar.vue
@@ -34,7 +34,6 @@
import Sidebar from './Sidebar'
import { mapState, mapMutations } from 'vuex'
import { formulaList } from '@/config/constant'
-import 'katex/dist/katex.min.css'
export default {
name: 'FormulaSidebar',