使用富文字的公式formula模組

2021-10-10 23:32:39 字數 1585 閱讀 9998

用富文字的公式模組做乙個可以實現輸入簡單的公式顯示功能

去網上找了些例子來看，發現富文字的公式模組要配合katex使用，因為我自己的專案是用vue的腳手架的，就想著用npm安裝，發現vue-katex這個外掛程式可以用npm安裝,就直接按照教程安裝了，結果後面測試的時候發現第一次可以實現，後面就一直報錯了。下面記錄一下我的使用。

1.安裝vue-katex

npm i vue-katex -p
2.在main.js引入
import vuekatex from 'vue-katex'


vue.


use(vuekatex)
3.在元件頁面引入
import vuekatex from 'vue-katex'


import '../../../node_modules/katex/dist/katex.min.css'


;
4.在元件頁面的mounted裡面編寫
mounted()
這一步是去網上找了解決方案，後面加進去的，別人用這個方法解決了，我用了這個方法就實現了一次。後面就一直報如下的錯誤。心好累，怎麼就變成一次性了。

error error: formula module requires katex
具體是什麼原因我也想不明白，希望有大佬路過可以指點一下

後面又去認真看了katex的文件，決定放棄npm的引入，直接使用標籤鏈結引入

1.在index.html的頭部裡面引入

"stylesheet" href=


""integrity=


"sha384-afej0r4/ofroo5t7nnne46zw/tfgw6x/bcjg8fqqceo3+aro6eyug4+cu+kjwu/x" crossorigin=


"anonymous"


>


""integrity=


"sha384-g7c+jr9zivxklnztduhnkonsh30b4h0rplupj4jaiks4fnji+senkvrmwph2edg4"


crossorigin=


"anonymous"


>


<


/script>
2.再引入script標籤**
window.webfontconfig =,}


;<


/script>


"" integrity=


"sha256-4o4ps1sh31zqrso2a/2**tvjtpqve+jnygowuvr7eec=" crossorigin=


"anonymous"


>


<


/script>
問題就解決了。 效果：

在此說明一下我用的是富文字vue-quill-editor

katex的官方文件請參考:

富文字的使用

一，理解 對於以前，我們用label進行新增文字的時候，只是在 label的本身上新增，從來沒有考慮過其他的方式，今天呢，由於我看了別人的一片技術部落格，有感所以就記錄了下來，希望能夠幫助到那些有需要的人 不帶段落分析的 如下 nsstring str 也許我們的心裡藏有乙個海洋，流出來的卻是兩行清...

簡化富文字的使用

簡化富文字的使用 1.如果不進行任何的封裝，直接使用富文字會破壞可讀性，可讀性極差 2.本例子提供了維護性較強的封裝 3.本人僅僅實現了兩種富文字的例項 設定文字字型以及文字屬性 剩下的可以參考本人的實現來進行擴充套件 4.每一種富文字屬性都應該抽象成乙個類，而通過統一的介面進行管理 本例子中，僅僅...

swift 富文字文字的簡單使用

如果需要乙個字元前後文字顏色不一樣，也就是說乙個字串分成多個部分，每個部分的屬性 顏色，字型，大小等 不一樣，那就是富文字文字 nsmutableattributedstring 直接上 了 let str 今宵杯中映著明月 物華天寶人傑地靈 let attrstr nsmutableattribu...