在以前，需要在Web頁面顯示數學公式，常用的都是先制作成圖片，然后插入到頁面里。這使得后期對數學公式的修改變的麻煩，同時也不利於搜索引擎搜索。
本文將介紹如何在TinyMce編輯器里集成數學公式。先看演示： http://demo.dotnetcms.org/math/
（一）公式錄入效果
1.打開演示站點，點擊“數學公式”，錄入如下文本，系統會自動給出公式的預覽
然后，點擊OK，你錄入的公式就插入到文檔里了。你不用擔心公式錄入錯誤，因為，公式是以文本方式存儲的，你可以再任何時候雙擊公式
來修改它。
為了更方便體驗，你也可以復制下面代碼，粘貼到demo的“插入公式”里，體驗其效果：
f\left(
\left[
\frac{
1+\left\{x,y\right\}
}{
\left(
\frac{x}{y}+\frac{y}{x}
\right)
\left(u+1\right)
}+a
\right]^{3/2}
\right)
現在，一個更為復雜的數學公式生成了。
當您通過TinyMce編輯器查看器源代碼時，下面顯示了其源代碼：class="math-tex"里的內容在最終顯示時，有MathJax內核自動解析。
1.當<span class="math-tex">\( a \ne 0 \)</span>時，一元二次方式<span class="math-tex">\( ax^2 + bx + c = 0 \)</span>的兩個根是：
<br><br><span class="math-tex">\( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \)</span> <br> <span class="math-tex">\( f\left( \left[ \frac{ 1+\left\{x,y\right\} }{ \left( \frac{x}{y}+\frac{y}{x} \right) \left(u+1\right) }+a \right]^{3/2} \right) \)</span>
了解了上面功能前，先介紹一下數學符號和公式的背景。
（二）數學公式的問題
為了使得在Web上錄入數學符號變的簡單，國際上提供了幾種解決方法：
1) W3C提出了MathML語言
W3C在2014年提出了Mathematical Markup Language (MathML) ，旨在解決數學符號錄入與顯示的問題。其思想是和HTML類似，MathML通過使用語義的標簽來顯示數學符號。有興趣的朋友可以到 https://www.w3.org/TR/MathML3/ 查看
簡單說，要顯示 sin x 只要用如下圖所示標簽即可。
這里 <mi> 是mathematical identifier的簡寫，他的意思是告訴瀏覽器 <mi>sin</mi>之間內容是一個整體，內容不要分開。
因為MathML提出的語義太細，導致用的人並不多。
2）MathJax
MathJax是一個開源組織，其前身是由美國數學學會（ American Mathematical Society ）和工業與應用數學學會（Society for Industrial and Applied Mathematics）贊助的一個協會，他提出了一個基於 HTML+JS+CSS的方法來實現數學公式的解決方案，並且逐漸成為行業標准。
MathJax采用類似Markdown的LaTex標記來記錄數學符號，並附帶了常規的文字語義，例如
a不等於0，直接用 下面代碼表示，ne 是 not equal，很容易理解。
a ne 0
(三)MathJax語法
以MathJax為基礎，又衍生出幾套不用的顯示語法。（大家可以做一個簡單類別： 操作系統最初是Unix，后來芬蘭的托瓦茲在Unix上開發了Linux，蘋果在Linux集成上開發了MacOS，谷歌在Linux基礎上開發了Android，華為在Android上開發了鴻蒙。。。而Linux更衍生出CentOS，紅帽、深度等操作系統。同樣MathJax也衍生出不少顯示方法，這里介紹主要的3種）
3.1）AsciiMath
AsciiMath以MathJax為基礎，提出了一套簡單的輸入和顯示數學符號的方法。詳見官網 http://asciimath.org/
3.2）Google解決方法
考慮瀏覽器兼容性，google提出了根據MathJax語法生成圖片公式的解決方法。簡單說，你只要在 https://chart.googleapis.com/chart? 后面傳入數學符號，系統自動給你生成數學符號。
但是，這個方法有致命缺陷：他生成的是圖片，這使得后期對公式修改變的麻煩。同時，當瀏覽器放大或者縮小時，圖片也跟着放大或縮小，導致公式圖片變的模糊。
生成圖片的好處時，如果頁面布局較為復雜，生成圖片更容易排版
3.3）MathJax解決方案
MathJax最終通過采用LaTex語法並加上HTML+CSS+JS來顯示數學公式，另外他也支持通過SVG渲染數學公式。
3.3.1）Tex語法
TeX最初是一個由美國計算機教授高德納（Donald Ervin Knuth）編寫的排版軟件。TeX的MIME類型為application/x-tex，是一款自由軟件。高德納最早開始自行編寫TeX的原因，是因為當時的電腦排版技術十分粗糙，已經影響到他的巨著《計算機程序設計藝術》的印刷質量。他以典型的黑客思維模式，決定自行編寫一個排版軟件：TeX。
以二次方程為例，參考下圖：Tex基本思想是：用 2個$符號之間的內容表示數學公式 （這個類似HTML里 style設置為inline，行內元素）。
如果公式要換行，就用4個$表示（這個類似HTML里 style設置為block，塊元素）。
3.3.2） LaTeX語法
在TeX實際運行中，偶爾會產生一些問題，考慮如下一句話：
這個蘋果是$2.5美元現在漲為$3.0美元
在實際排版時，直接使用2個$，用戶的本意是顯示文本，但是卻被當成了公式，因此LaTeX提出以2個"$$"作為公式的標志。另外LaTex也對Tex進行了預設。
例如：
\documentclass[a4paper]{book}
\begin{document}
\section{ ... a title }
\subsection{ ... a subtitle}
%% Text goes here
\end{document}
執行后的效果是：
下面代碼顯示了一個矩陣：
\begin{pmatrix}
1 & a_1 & a_1^2 & \cdots & a_1^n \\
1 & a_2 & a_2^2 & \cdots & a_2^n \\
\vdots & \vdots& \vdots & \ddots & \vdots \\
1 & a_m & a_m^2 & \cdots & a_m^n
\end{pmatrix}
你甚至可以編寫更復雜的公式：
\begin{align}
\sqrt{37} & = \sqrt{\frac{73^2-1}{12^2}} \\
& = \sqrt{\frac{73^2}{12^2}\cdot\frac{73^2-1}{73^2}} \\
& = \sqrt{\frac{73^2}{12^2}}\sqrt{\frac{73^2-1}{73^2}} \\
& = \frac{73}{12}\sqrt{1 - \frac{1}{73^2}} \\
& \approx \frac{73}{12}\left(1 - \frac{1}{2\cdot73^2}\right)
\end{align}
請注意：上圖生成的公式都是文本格式，這意味就算你放大瀏覽器，文字仍然清晰，而且易於修改。
3.3.3）使用SVG顯示公式
MathJax支持使用SVG顯示數學公式。要了解SVG，可以參考 https://www.runoob.com/svg/svg-tutorial.html 的介紹。
在以前，如果要在頁面顯示一個三角形，不用圖片，而用CSS+HTML+JS實現，通常非常麻煩。用SVG，則變的簡單很多。 見 https://www.runoob.com/try/try.php?filename=trysvg_polygon
只要一行代碼，就可以實現：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" /> </svg>
你完全可以把SVG當做HTML標簽使用，很多HTML的屬性都可以用的上，更主要的是，他是矢量的，不論放大還是縮小，都不模糊。
在MathJAX里，也支持以SVG方式，顯示數學公式。在MathJax的demo站點里有說明：https://github.com/mathjax/MathJax-demos-web
（四）MathJax兩種模式的比較
如上所述，Mathjax支持 “HTML+CSS+JS”和“SVG”兩種模式顯示數學公式，從外表上看，基本上一樣，但是瀏覽器渲染原理並相同。
（1）demo https://mathjax.github.io/MathJax-demos-web/tex-chtml.html
HTML+CSS+JS模式，MathJax通過自定義語義標簽顯示公式。
（2）demo https://mathjax.github.io/MathJax-demos-web/tex-svg.html
SVG渲染模式，通過svg標簽渲染頁面。
當你使用MathJax時，你不用關心這些細節，整個渲染流程由MathJax自動完成！！
（五）TinyMce增加數學公式
有了上面鋪墊，現在你就可以使用TinyMce編輯器了。
首先在頁面放置一個 div或者input作為編輯器容器
<div id="xx" style=" border:solid 1px #000" ></div>
接下來引入TinyMce代碼，可以直接到 http://www.tinymce.com 下載 或者引入CDN
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
接下來引入MathJax，可以到 https://www.mathjax.org/ 下載MathJax.js包或者直接引入CDN
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
其中polyfill.min.js不是必須的，他主要是解決瀏覽器兼容性的問題
最后，需要再加載一個插件 https://github.com/dimakorotkov/tinymce-mathjax
最后，更改效果如下：（關於LaTex語法請自行搜索，網上很多介紹。）
f\left(
\left[
\frac{
1+\left\{x,y\right\}
}{
\left(
\frac{x}{y}+\frac{y}{x}
\right)
\left(u+1\right)
}+a
\right]^{3/2}
\right)
這樣，一個基於TinyMce的附帶數學公式的編輯器就完成了。再復雜的公式，也so easy~~
歡迎轉載本文轉載請保留出處：啟明星工作室