Creating Mathematical and Chemical Formulas with MathType Documentation

The optional, commercial MathType plugin provides integration with a popular mathematical and science formula editor with classical and handwriting input modes created by our partner, Wiris. You can use it to create math equations or chemical formulas right inside the CKEditor 4 content.

When the MathType plugin is enabled, the MathType and ChemType buttons are automatically added to the toolbar. Once clicked, they open the respective dialog windows that let you write your equation and immediately see its preview.

Using MathType

The MathType window is split into two main areas: a tabbed toolbar that contains a large number of icons that are useful for creating math equations and chemical formulas, and an editing area where you can see your current formula, the location of the cursor, and the text currently selected (if any).

Use the toolbar to write your equation or formula. At any time you can also click the "Go to handwritten mode" button on the right side of the MathType editor to switch to handwriting.

When you are done creating your scientific content, click the "OK" button to insert your formula into CKEditor 4. You can also edit any existing formulas by double-clicking them in your document.

In elementary algebra, the quadratic formula is the solution of the quadratic equation:
				<math xmlns="http://www.w3.org/1998/Math/MathML"><mi>x</mi><mo>=</mo><mfrac><mrow><mo>-</mo><mi>b</mi><mo>±</mo><msqrt><msup><mi>b</mi><mn>2</mn></msup><mo>-</mo><mn>4</mn><mi>a</mi><mi>c</mi></msqrt></mrow><mrow><mn>2</mn><mi>a</mi></mrow></mfrac></math>
				Water is made from two elements: hydrogen and oxygen. If you put the two gases together, along with energy, you can make water:
				<math class="wrs_chemistry" xmlns="http://www.w3.org/1998/Math/MathML"><mn>2</mn><msub><mi mathvariant="normal">H</mi><mn>2</mn></msub><mfenced><mi mathvariant="normal">g</mi></mfenced><mo>+</mo><msub><mi mathvariant="normal">O</mi><mn>2</mn></msub><mfenced><mi mathvariant="normal">g</mi></mfenced><mo>⇌</mo><mn>2</mn><msub><mi mathvariant="normal">H</mi><mn>2</mn></msub><mi mathvariant="normal">O</mi><mfenced><mi mathvariant="normal">l</mi></mfenced></math>
				The entire formula for the surface area of a cylinder is: <math xmlns="http://www.w3.org/1998/Math/MathML"><mn>2</mn><msup><mi>πr</mi><mn>2</mn></msup><mo>+</mo><mn>2</mn><mi>πrh</mi></math>

Related Features

Inserting Content – Creating Mathematical Formulas with MathJax

Get Sample Source Code

Creating mathematical and chemical formulas with MathType

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Creating mathematical and chemical formulas with MathType</title>
  <script src="https://cdn.ckeditor.com/4.25.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>
    (function() {
      var mathElements = [
        'math',
        'maction',
        'maligngroup',
        'malignmark',
        'menclose',
        'merror',
        'mfenced',
        'mfrac',
        'mglyph',
        'mi',
        'mlabeledtr',
        'mlongdiv',
        'mmultiscripts',
        'mn',
        'mo',
        'mover',
        'mpadded',
        'mphantom',
        'mroot',
        'mrow',
        'ms',
        'mscarries',
        'mscarry',
        'msgroup',
        'msline',
        'mspace',
        'msqrt',
        'msrow',
        'mstack',
        'mstyle',
        'msub',
        'msup',
        'msubsup',
        'mtable',
        'mtd',
        'mtext',
        'mtr',
        'munder',
        'munderover',
        'semantics',
        'annotation',
        'annotation-xml'
      ];

      CKEDITOR.plugins.addExternal('ckeditor_wiris', 'https://ckeditor.com/docs/ckeditor4/4.25.0-lts/examples/assets/plugins/ckeditor_wiris/', 'plugin.js');

      CKEDITOR.replace('editor1', {
        extraPlugins: 'ckeditor_wiris',
        // For now, MathType is incompatible with CKEditor file upload plugins.
        removePlugins: 'uploadimage,uploadwidget,uploadfile,filetools,filebrowser',
        height: 320,
        // Update the ACF configuration with MathML syntax.
        extraAllowedContent: mathElements.join(' ') + '(*)[*]{*};img[data-mathml,data-custom-editor,role](Wirisformula)',
        removeButtons: 'PasteFromWord'
      });
    }());
  </script>
</body>

</html>