Contribute to this guideReport an issue

Creating Mathematical Formulas with MathJax Documentation

The optional Mathematical Formulas plugin, introduced in CKEditor 4.3, provides the MathJax widget which can be used to create or modify equations using TeX.

When the Mathematical Formulas plugin is enabled and the path to the MathJax library is configured, the   button is automatically added to the toolbar. Once clicked, it opens the Mathematics in TeX dialog window that lets you write an equation in TeX and immediately see its preview.

A few configuration options are available to fine-tune this feature, including setting the default class for an element that will be converted into a mathematical formulas widget. Refer to the Creating Mathematical Formulas with MathJax article to learn more about this feature.

Related Features

Please note that this plugin is not compatible with Internet Explorer 8.

Get Sample Source Code

  • Creating mathematical formulas with MathJax
    <!doctype html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <meta name="robots" content="noindex, nofollow">
      <title>Creating mathematical formulas with MathJax</title>
      <script src="https://cdn.ckeditor.com/4.24.0-lts/standard-all/ckeditor.js"></script>
    </head>
    
    <body>
      <textarea cols="10" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
      <script>
        CKEDITOR.replace('editor1', {
          extraPlugins: 'mathjax',
          mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML',
          height: 320,
          removeButtons: 'PasteFromWord'
        });
    
        if (CKEDITOR.env.ie && CKEDITOR.env.version == 8) {
          document.getElementById('ie8-warning').className = 'tip alert';
        }
      </script>
    </body>
    
    </html>