前言

最近因為在看一些數學方面的書籍，想著寫一些日記用于分享，無奈發現好像博客里面好不能插入公式，只能截圖的方式來在展示公式，后面發現CKEditor是可以集成公式編輯器的，下面說說我在做的時候遇到的問題。

公式編輯器的分類

1、KaTeX

2、JMEditor：一個國人開發的公式編輯器

3、Tex：（嘗試了很久，編輯器能夠正常顯示，但是在頁面需要顯示的時候，經常會顯示不出來）

4、eqneditor

Ckeditor集成Tex

選擇Tex的原因是因為在CKEditor插件官網內，是可以直接下載到的

CKEditor插件官網地址：here

我們打開網頁后，在左上角的搜索框輸入math搜索后，就能看到公式插件了

我們點擊第一個，選擇下載，下載后，我們需要把下載的東西放到ckeditor的plugins中

剛剛點擊download的時候，會彈出下面這個頁面，就是告訴我們這個插件需要安裝其他兩個依賴，如果沒有安裝的話，需要點擊安裝

然后我們需要修改ckeditor? config.js配置文件。 我們需要把剛剛的三個插件在extraPlugins中配置一下，分別是? widget, dialog, mathjax

//添加插件，多個插件用逗號隔開 config.extraPlugins = 'codesnippet,panelbutton,floatpanel,colorbutton,markdown,colordialog,dialog,dialogui,smiley,widget,lineutils,mathjax'; config.mathJaxLib = '//cdn.mathjax.org/mathjax/2.6-latest/MathJax.js?config=TeX-AMS_HTML';

?配置完成后，我們刷新ckeditor編輯器，就能看到多出了一個公式的圖標

點擊確定插入

如果我們需要在我們的頁面上訪問到，需要對index.html頁面進行修改，分別插入下面兩個js

<script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}}); </script><script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

我們到頁面上刷新，就能看到效果了

尾言

本文同時發表至我的個人博客：蘑菇博客

個人博客開源在github和gitee中，歡迎大家start~? ?github地址、gitee地址

總結

以上是生活随笔為你收集整理的CKEditor配置数学公式编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。