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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CKEditor with MathJax</title> </head> <body> <div class="container body"> <textarea id="content"></textarea> </div> <script src="ckeditor/ckeditor.js"></script> <script type="text/javascript"> CKEDITOR.replace('content', { mathJaxLib : 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-MML-AM_CHTML' }); </script> </body> </html> |
Integration if downloaded MathJax addon separately
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CKEditor with MathJax</title> </head> <body> <div class="container body"> <textarea id="content"></textarea> </div> <script src="ckeditor/ckeditor.js"></script> <script type="text/javascript"> CKEDITOR.replace('content', { extraPlugins:'mathjax, mathJaxLib : 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-MML-AM_CHTML' }); </script> </body> </html> |
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.
|
1 |
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-MML-AM_CHTML' async></script> |
Sample Output Page
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> <title>MathJax Output</title> </head> <body> <h1>Output</h1> <p><span class="math-tex">\(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\)</span></p> <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-MML-AM_CHTML' async></script> </body> </html> |
Output
Download Sample
Thanks for visiting, please share if you like it
Comments