在Tinymce編輯器裡，整合數學公式

阿新 • • 發佈：2019-12-12

在以前，需要在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~~

歡迎轉載本文轉載請保留出處：啟明星工

在Tinymce編輯器裡，整合數學公式

在Tinymce編輯器裡，整合數學公式

Unity編輯器開發，使用CustomPropertyDrawer實現枚舉中文顯示

UEditor富文本編輯器時，插入圖片沒有任何反應

Tinymce 編輯器添加自定義圖片管理插件

如何在CAD編輯器中插入一個WPS公式？

PDF編輯器裡的測量工具如何使用？

Linux文字編輯器——Notepadqq，Sublime Text

使用tinymce編輯器從word保持原格式複製貼上的辦法

CAD編輯器操作，CAD批量轉換PDF格式

unity3d：編輯器指令碼，替換選中物體的材質

vscode編輯器設定，禁止prettier自動格式化程式碼，不喜勿噴

微擎怎麼將編輯器裡的圖片上傳到遠端儲存那

React中使用富文字編輯器Quill，支援貼上圖片

在微信公眾號裡使用LaTeX數學公式

Unity 編輯器擴充套件，讓開發更加快捷

解決：百度編輯器UEditor，怎麼將圖片儲存到圖片伺服器，或者上傳到ftp伺服器的問題（如果你正在用UE，這篇文章值得你看下）

tinymce編輯器上傳圖片外掛配置

eclipse中編輯器裡如何顯示行號？

Froala Editor 在編輯器裡上傳圖片到自己的服務端

JavaWEB之Markdown 編輯器Editor.md整合使用教程

在Tinymce編輯器裡，整合數學公式

相關推薦