You are here
Home > Javascript > Integrate MathJax in CKEditor

Integrate MathJax in CKEditor

Hello Friends, today I am going to tell that how to integrate MathJax in CKEditor, so that maths formula can be written in CKEditor but before that you should know what the MathJax and CKEditor is, so here is the explanation.

MathJax is a cross-browser JavaScript library that displays mathematical notation in web browsers, using MathML, LaTeX and ASCIIMathML markup. MathJax is released as open-source software under the Apache License.

CKEditor is a WYSIWYG rich text editor which enables writing content directly inside of web pages or online applications. Its core code is written in JavaScript and it is developed by CKSource.


Step 1: Visit and use Build my editor option to build your editor with MathJax addon included or you can download mathjax separately, in that case you have to download CKEditor first and then download MathJax and Extract the downloaded plugin .zip into the plugins folder of your CKEditor installation. Example:

Step 2:  Link CKEditor to your page and config CKEditor with MathJax

Integration if downloaded through Build my editor option

Integration if downloaded MathJax addon separately


Step 2: Now to see output on webpage, create your own logic to save CKEditor data to database and fetch it on output page, but on output page you have to link the MathJax CDN or you can download and change src to your src.

Sample Output Page


Download Sample

Thanks for visiting, please share if you like it


Rajesh Kumar Sahanee
I am a passionate Java Developer and I like Computer Programming. I love to do some interesting experiments and listening music in my free time.