Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
78 lines (70 sloc) 4.8 KB
<!DOCTYPE html>
Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
For licensing, see or
<meta charset="utf-8">
<meta name="description" content="Mathematical Formulas. Inserting equations into CKEditor content.">
<meta name="keywords" content="ckeditor, editor, wysiwyg, math, maths, mathematical, formula, formulas, formulae, mathjax, widget, equation, equations, configure, configuration, setup, settings, options, customization, customize, customise, customisation, config, modification, modify, change">
<meta name="sdk-samples" content="Creating mathematical formulas">
<meta name="sdk-category" content="sdk-inserting-content">
<meta name="sdk-order" content="70">
<title>Mathematical Formulas</title>
<link href=",500,400" rel="stylesheet">
<link href="../template/theme/css/sdk.css" rel="stylesheet">
<script src="../../ckeditor-dev/ckeditor.js"></script>
<script src="assets/picoModal-2.0.1.min.js"></script>
<script src="assets/sample.js"></script>
<script src="assets/contentloaded.js"></script>
<script src="assets/simplesample.js"></script>
<script src="assets/beautify-html.js"></script>
<!--[if lt IE 9]>
<script src="assets/html5shiv.min.js"></script>
<link rel="icon" href="../template/theme/img/favicon.ico">
<header class="sdk-header">
<section class="sdk-container">
<nav class="sdk-sidebar">
<section class="sdk-contents">
<h1>Creating Mathematical Formulas <a class="documentation" href="">Documentation</a></h1>
The optional <a href="">Mathematical Formulas</a> plugin, introduced in CKEditor 4.3, provides the MathJax <a href="">widget</a> which can be used to create or modify equations using TeX.
When the Mathematical Formulas plugin is enabled and the <a href="">path</a> to the <a href="">MathJax library</a> is configured, the <span class="button_icon" data-icon="mathjax" title="Math">&nbsp;</span> button is automatically added to the toolbar. Once clicked, it opens the <strong>Mathematics in TeX</strong> 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 <a href="">default class</a> for an element that will be converted into a mathematical formulas widget. Refer to the <a href="">Creating Mathematical Formulas</a> article to learn more about this feature.
<textarea cols="10" id="editor1" name="editor1" rows="10" data-sample="1" data-sample-short>
&lt;p&gt;The following equations are represented in the HTML source code as LaTeX expressions.&lt;/p&gt;&lt;h1&gt;The Cauchy-Schwarz Inequality&lt;/h1&gt;&lt;p&gt;&lt;span class=&quot;math-tex&quot;&gt;\( \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) \)&lt;/span&gt;&lt;/p&gt;&lt;h1&gt;The probability of getting &lt;span class=&quot;math-tex&quot;&gt;\(k\)&lt;/span&gt; heads when flipping &lt;span class=&quot;math-tex&quot;&gt;\(n\)&lt;/span&gt; coins is&lt;/h1&gt;&lt;p&gt;&lt;span class=&quot;math-tex&quot;&gt;\(P(E) = {n \choose k} p^k (1-p)^{ n-k} \)&lt;/span&gt;&lt;/p&gt;&lt;p&gt;Finally, while displaying equations is useful for demonstration purposes, the ability to mix math and text in a paragraph is also important. This expression &lt;span class=&quot;math-tex&quot;&gt;\(\sqrt{3x-1}+(1+x)^2\)&lt;/span&gt; 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.&lt;/p&gt;
<h2>Related Features</h2>
<li><a href="./styles.html#widget-styles">Styling and Formatting &ndash; Applying Styles to Editor Content</a></li>
<script data-sample="1">
CKEDITOR.replace( 'editor1', {
extraPlugins: 'mathjax',
mathJaxLib: '',
height: 320
} );
if ( && CKEDITOR.env.version == 8 ) {
document.getElementById( 'ie8-warning' ).className = 'tip alert';
<p id="ie8-warning">
Please note that this plugin is not compatible with Internet Explorer 8.
<footer class="sdk-footer">
You can’t perform that action at this time.