Mathematical Formulas — CKEditor Sample

# CKEditor Samples » Mathematical Formulas

This sample shows the usage of the CKEditor mathematical plugin that introduces a MathJax widget. You can now use it to create or modify equations using TeX.

TeX content will be automatically replaced by a widget when you put it in a `<span class="math-tex">` element. You can also add new equations by using the Math toolbar button and entering TeX content in the plugin dialog window. After you click OK, a widget will be inserted into the editor content.

The output of the editor will be plain TeX with MathJax delimiters: `\(` and `\)`, as in the code below:

    <span class="math-tex">\( \sqrt{1} + (1)^2 = 2 \)</span>

To transform TeX into a visual equation, a page must include the MathJax script.

In order to use the new plugin, include it in the `config.extraPlugins` configuration setting.

    CKEDITOR.replace( 'textarea_id', {
    	extraPlugins: 'mathjax'
    } );

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

<p>The following equations are represented in the HTML source code as LaTeX expressions.</p><h1>The Cauchy-Schwarz Inequality</h1><p><span class="math-tex">\( \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) \)</span></p><h1>The probability of getting <span class="math-tex">\(k\)</span> heads when flipping <span class="math-tex">\(n\)</span> coins is</h1><p><span class="math-tex">\(P(E) = {n \choose k} p^k (1-p)^{ n-k} \)</span></p><p>Finally, while displaying equations is useful for demonstration purposes, the ability to mix math and text in a paragraph is also important. This expression <span class="math-tex">\(\sqrt{3x-1}+(1+x)^2\)</span> is an example of an inline equation. As you see, MathJax equations can be used this way as well, without disturbing the spacing between the lines.</p>