mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-21 10:27:44 +08:00
Demo：去除引入公式库样式的逻辑
This commit is contained in:
街角小林
parent
7b1ea5e354
commit
4423fd562b
@ -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
|
||||
|
||||
@ -27,6 +27,17 @@
|
||||
</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>
|
||||
<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>
|
||||
<p>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.</p>
|
||||
<p>3.SVG files exported on one browser have inconsistent styles when opened on another browser</p>
|
||||
<p>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.</p>
|
||||
<p>4.The smm or json file exported on one browser cannot be rendered properly when imported on another browser</p>
|
||||
<p>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.</p>
|
||||
<p>5.Abnormal formula for exporting images when rendering in <code>html</code> mode</p>
|
||||
<p>This is caused by not loading the font, and there is currently no solution.</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">'simple-mind-map'</span>
|
||||
<span class="hljs-keyword">import</span> Formula <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map/src/plugins/Formula.js'</span>
|
||||
|
||||
@ -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`模式渲染时导出图片公式异常
|
||||
|
||||
这个因为没有加载字体导致的，目前没有解决方法。
|
||||
|
||||
## 注册
|
||||
|
||||
|
||||
@ -24,6 +24,17 @@
|
||||
</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>
|
||||
<h2>问题</h2>
|
||||
<p>1.在有的浏览器上显示的是公式源码</p>
|
||||
<p>这是因为有的浏览器不支持<code>KaTex</code>库的<code>mathml</code>输出模式，可以通过<code>getKatexOutputType</code>实例化选项来将输出模式改为<code>html</code>。</p>
|
||||
<p>2.有时公式和文本会换行显示</p>
|
||||
<p>这一般是因为公式渲染使用的是<code>html</code>模式，这种模式依赖于字体文件，所以当字体文件没有加载完就渲染思维导图时，计算出来的公式内容大小和加载完字体文件后的实际公式大小不一致导致换行，可以想办法让字体文件加载完成后再渲染思维导图。</p>
|
||||
<p>3.在一个浏览器上导出的svg文件在另一个浏览器上打开样式不一致</p>
|
||||
<p>因为计算节点大小时是依赖浏览器的代理样式的，不同浏览器默认样式不一致，所以计算出来的节点大小也不一致。</p>
|
||||
<p>4.在一个浏览器上导出的smm或json文件在另一个浏览器上导入无法正常渲染</p>
|
||||
<p>因为有的浏览器可能是使用<code>mathml</code>模式渲染的，有的可能是<code>html</code>模式渲染的，通常支持<code>mathml</code>模式的肯定支持<code>html</code>，反过来则不行。</p>
|
||||
<p>5.在使用<code>html</code>模式渲染时导出图片公式异常</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">'simple-mind-map'</span>
|
||||
<span class="hljs-keyword">import</span> Formula <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map/src/plugins/Formula.js'</span>
|
||||
|
||||
@ -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',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user