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.

Integration

Step 1: Visit https://ckeditor.com/cke4/addon/mathjax 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:

http://example.com/ckeditor/plugins/mathjax

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

Output

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

Output

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.
https://www.zatackcoder.com

Comments

zatackcoder
Top