CKEditor配置数学公式编辑器

前言

最近因为在看一些数学方面的书籍,想着写一些日记用于分享,无奈发现好像博客里面好不能插入公式,只能截图的方式来在展示公式,后面发现CKEditor是可以集成公式编辑器的,下面说说我在做的时候遇到的问题。

公式编辑器的分类

1、KaTeX

2、JMEditor:一个国人开发的公式编辑器

3、Tex:(尝试了很久,编辑器能够正常显示,但是在页面需要显示的时候,经常会显示不出来)

4、eqneditor

Ckeditor集成Tex

选择Tex的原因是因为在CKEditor插件官网内,是可以直接下载到的

CKEditor插件官网地址:here

我们打开网页后,在左上角的搜索框输入math搜索后,就能看到公式插件了

CKEditor配置数学公式编辑器_第1张图片

我们点击第一个,选择下载,下载后,我们需要把下载的东西放到ckeditor的plugins中

CKEditor配置数学公式编辑器_第2张图片

刚刚点击download的时候,会弹出下面这个页面,就是告诉我们这个插件需要安装其他两个依赖,如果没有安装的话,需要点击安装

CKEditor配置数学公式编辑器_第3张图片

然后我们需要修改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编辑器,就能看到多出了一个公式的图标

CKEditor配置数学公式编辑器_第4张图片

点击确定插入

CKEditor配置数学公式编辑器_第5张图片

如果我们需要在我们的页面上访问到,需要对index.html页面进行修改,分别插入下面两个js



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

CKEditor配置数学公式编辑器_第6张图片

尾言

本文同时发表至我的个人博客:蘑菇博客

个人博客开源在github和gitee中,欢迎大家start~   github地址、gitee地址

你可能感兴趣的:(CKEditor配置数学公式编辑器)