Integrate MathJax in CKEditor Javascript by Rajesh Kumar Sahanee - July 16, 20180 Post Views: 8,624 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 index.html XHTML <!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> 1234567891011121314151617 <!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 index.html XHTML <!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> 1234567891011121314151617 <!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. <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=TeX-MML-AM_CHTML' async></script> 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 output.html XHTML <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> 1234567891011 <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 Integrate MathJax in CKEditor 1 file(s) 1.07 MB Download Thanks for visiting, please share if you like it
