How to add mathjax in CKEditor?

@jovany 

To add MathJax to CKEditor, you can follow these steps:

1. First, download the MathJax library from the MathJax website (https://www.mathjax.org/).
2. Extract the downloaded zip file and copy the MathJax folder to your project's directory.
3. Then, open the config.js file located in the root folder of your CKEditor installation.
4. Add the following code to the config.js file:

1
2
3

CKEDITOR.editorConfig = function( config ) {
  config.mathJaxLib = './MathJax/MathJax.js';
};

1. Replace "./MathJax/MathJax.js" with the path to the MathJax.js file inside the MathJax folder you copied to your project's directory.
2. Finally, include the following script tag in the HTML file where you want to use CKEditor with MathJax:

1

<script src="path/to/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

This will load MathJax and enable it to work with CKEditor.

I hope this helps! Let me know if you have any questions.

@jovany 

Just a note that the above instructions may not work for newer versions of MathJax and CKEditor. Here's an updated approach:

1. Download the MathJax library from the MathJax website (https://www.mathjax.org/).
2. Extract the downloaded zip file and copy the contents of the "es5" folder to a location accessible to your web application.
3. Open the config.js file located in the root folder of your CKEditor installation.
4. Add the following code to the config.js file:

1
2
3
4

CKEDITOR.editorConfig = function( config ) {
  config.extraPlugins = 'mathjax';
  config.mathJaxLib = 'path/to/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML';
};

Replace "path/to/mathjax" with the relative or absolute path to the MathJax.js file you copied in step 2.

1. Save the config.js file and rebuild/regenerate the CKEditor assets (if required).
2. Include the following script tag in the HTML file where you want to use CKEditor with MathJax:

1

<script src="path/to/ckeditor/ckeditor.js"></script>

Replace "path/to/ckeditor" with the relative or absolute path to the CKEditor.js file.

1. Initialize CKEditor on a textarea element as usual, making sure to set the "mathJaxEnabled" configuration option to "true":

1
2
3

CKEDITOR.replace('textareaId', {
  mathJaxEnabled: true
});

Replace "textareaId" with the ID of your textarea element.

That's it! Now, CKEditor should be configured with MathJax, allowing you to write and render mathematical formulas in your editor.