前言
最近因为在看一些数学方面的书籍,想着写一些日记用于分享,无奈发现好像博客里面好不能插入公式,只能截图的方式来在展示公式,后面发现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>
我们到页面上刷新,就能看到效果了
尾言
本文同时发表至我的个人博客:蘑菇博客