CKEditor配置数学公式编辑器

前言

最近因为在看一些数学方面的书籍，想着写一些日记用于分享，无奈发现好像博客里面好不能插入公式，只能截图的方式来在展示公式，后面发现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/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/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

我们到页面上刷新，就能看到效果了