Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

Math plugin

This plugin is only available as a paid add-on to a TinyMCE subscription.
This feature is only available for TinyMCE 7.1 and later.

The Math plugin provides a way for users to insert complex formulas.

Interactive example

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="math_demo">
<h2>Computation of Definite Integrals.</h2>
		<p>In computing definite integrals it is important to observe that when the integral is known to exist the limit can be calculated on any properly chosen subset of the&nbsp;<tiny-math-inline formula="S_\delta"></tiny-math-inline>'s. So we&nbsp;have that if <tiny-math-inline formula="S_{\delta_1}"></tiny-math-inline>,&nbsp;<tiny-math-inline formula="S_{\delta_2}"></tiny-math-inline>, ... is any sequence of sums such that&nbsp;<tiny-math-inline formula="\displaystyle\mathop{L}_{n\doteq\infty}\delta_n=0"></tiny-math-inline>, then</p>
		<tiny-math-block formula="\mathop{L}_{n\doteq\infty} S_{\delta_n} = \int_a^b f(x)dx."></tiny-math-block>
		<p>One case of this kind occurs when&nbsp;<tiny-math-inline formula="\xi_k"></tiny-math-inline>&nbsp;is taken as an end-point of the interval <tiny-math-inline formula="{x_{k-1}}{x_k}"></tiny-math-inline> and all the&nbsp;<tiny-math-inline formula="\Delta_kx"></tiny-math-inline>'s are equal. Then we have</p>
		<tiny-math-block formula="\displaystyle \int_a^b f(x)dx =  \mathop{L}_{n\doteq\infty} \sum_{k=1}^n f(a+k\Delta x)\Delta x,  \text{ where }  \Delta x=\frac{b-a}{n}."></tiny-math-block>
		<p>A simple example of this principle is the proof of the following&nbsp;theorem.</p>
		<p><em>Exerpt from <a href="https://www.gutenberg.org/ebooks/18741">Introduction to Infinitesimal Analysis; Functions of One Real Variable by Veblen et al.</a></em></p>	
	</textarea>
tinymce.init({
  selector: "textarea#math_demo",
  plugins: [
      "math", "advlist", "anchor", "autolink", "charmap", "code", "codesample", "fullscreen",
      "help", "image", "insertdatetime", "link", "lists", "media",
      "preview", "searchreplace", "table", "visualblocks",
  ],
  toolbar: "math | codesample | undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
});

Basic setup

To set up the Math plugin user interface in the editor:

  • add math to the plugins option in the editor configuration;

For example:

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'math',
  toolbar: 'math',
});

How to Use

To work with math elements, follow these steps:

  1. Enable Math Plugin

    1. Open the TinyMCE editor with the Math plugin enabled.

  2. Insert or Edit Math Elements

    1. Click the Math plugin icon in the toolbar.

    2. This opens the Math dialog.

    3. Select preferred language

    4. Enter Math formula in the textarea.

    5. Choose preferred text wrap

  3. Preview and Save

    1. Check Math formula output in preview.

    2. Review the final Math equation in the preview section.

    3. Click the save button in the Math dialog.

    4. The Math equation is inserted into the editor, wrapped accordingly based on the chosen text wrap.

Formula Tag Wrapping

  1. The Math dialog wraps the inserted formula with a specific tag.

  2. The choice of tag depends on the selected text wrap option in the dialog:

    1. For block (Text above and below) text wrap, the tag used is <tiny-math-block>.

    2. For inline (Inline with text) text wrap, the tag used is <tiny-math-inline>.

Visit https://katex.org/docs/supported for a comprehensive list of supported symbols and functions when inserting mathematical equations after selecting "Language (LaTeX)".

Toolbar buttons

The Math plugin provides the following toolbar buttons:

Toolbar button identifier Description

math

Opens the math modal dialog.

These toolbar buttons can be added to the editor using:

The Math plugin provides the following menu items:

Menu item identifier Default Menu Location Description

math

Insert

Opens the math modal dialog.

These menu items can be added to the editor using:

Options

extended_mathml_elements

This option allows a specific list of additional MathML elements to be preserved in the editor content, even if they are not included in the default DOMPurify allowlist. This setting only affects elements used within MathML markup and has no effect on general HTML content.

Type: Array of Strings

Default value: [] (empty array)

Example: using extended_mathml_elements

tinymce.init({
  selector: 'textarea',
  extended_mathml_elements: [ 'mn', 'mspace' ]
});
Example of MathML with preserved elements
<p>
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
      <mi>a</mi>
      <mo>=</mo>
      <mfrac>
        <mrow>
          <mn>1</mn>
          <mo>+</mo>
          <mn>√2</mn>
        </mrow>
        <mn>3</mn>
      </mfrac>
      <mspace width="1em"></mspace>
      <mo>&#x222A;</mo>
      <mspace width="1em"></mspace>
      <msup>
        <mn>5</mn>
        <mn>2</mn>
      </msup>
    </mrow>
  </math>
</p>

extended_mathml_attributes

This option allows a specific list of additional MathML attributes to be preserved in the editor content, even if they are not included in the default DOMPurify allowlist. This setting only affects attributes used within MathML markup and has no effect on general HTML content.

Type: Array of Strings

Default value: [] (empty array)

Example: using extended_mathml_attributes

tinymce.init({
  selector: 'textarea',
  extended_mathml_attributes: [ 'linebreak', 'encoding' ]
});
Example of MathML with preserved attributes
<p>
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow linebreak="newline" encoding="utf8">
      <mi>x</mi>
      <mo>=</mo>
      <mfrac>
        <mrow>
          <mo>&#x2212;</mo>
          <mi>b</mi>
          <mo>&#x00B1;</mo>
          <msqrt>
            <mrow>
              <msup>
                <mi>b</mi>
                <mn>2</mn>
              </msup>
              <mo>&#x2212;</mo>
              <mn>4</mn>
              <mo>&#x2062;</mo>
              <mi>a</mi>
              <mo>&#x2062;</mo>
              <mi>c</mi>
            </mrow>
          </msqrt>
        </mrow>
        <mrow>
          <mn>2</mn>
          <mo>&#x2062;</mo>
          <mi>a</mi>
        </mrow>
      </mfrac>
    </mrow>
  </math>
</p>

Commands

The Math plugin provides the following TinyMCE commands.

Command Description

Math

This command opens the Math dialog.
Examples
tinymce.activeEditor.execCommand('Math');