--- title: "Math plugin" description: "Math plugin allows users to insert math equations into the TinyMCE editor." canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/math/" md_url: "https://www.tiny.cloud/docs/tinymce/7/math/index.md" version: "7" last_updated: "2025-04-09T03:20:42Z" tokens: 1586 --- Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/math/). # Math plugin > **Note:** This plugin is only available as a **paid add-on** to [a TinyMCE subscription](/pricing/). > **Note:** 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 **Example** ```js 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: ```js 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 ``. 2. For inline (*Inline with text*) text wrap, the tag used is ``. > **Note:** Visit [https://katex.org/docs/supported](https://katex.org/docs/supported.html) 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 [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option. - The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option. - [Custom Context toolbars](../contexttoolbar/). ## Menu items The Math plugin provides the following menu items: | Menu item identifier | [Default Menu Location](../menus-configuration-options/#example-the-tinymce-default-menu-items) | Description | | --- | --- | --- | | `math` | Insert | Opens the math modal dialog. | These menu items can be added to the editor using: - The [`menu`](../menus-configuration-options/#menu) configuration option. - The [`contextmenu`](../menus-configuration-options/#contextmenu) configuration option. - [Custom Menu toolbar buttons](../custom-menu-toolbar-button/). ## 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` ```js tinymce.init({ selector: 'textarea', extended_mathml_elements: [ 'mn', 'mspace' ] }); ``` Example of MathML with preserved elements ```html

a = 1 + √2 3 ∪ 5 2

``` ### `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` ```js tinymce.init({ selector: 'textarea', extended_mathml_attributes: [ 'linebreak', 'encoding' ] }); ``` Example of MathML with preserved attributes ```html

x = − b ± b 2 − 4 ⁢ a ⁢ c 2 ⁢ a

``` ## Commands The Math plugin provides the following TinyMCE commands. | Command | Description | | --- | --- | | Math | This command opens the Math dialog. | Examples ```js tinymce.activeEditor.execCommand('Math'); ```