Markdown plugin

This plugin is only available for paid TinyMCE subscriptions.

The Markdown Premium plugin detects pure markdown from a paste event within a TinyMCE editor instance.

Using the Markdown plugin

How it works

The Markdown Premium Plugin detects if pure markdown is pasted into the TinyMCE editor instance.

If markdown content is detected during a paste event, the editor will:

  • attempt to convert the markdown into HTML

  • add an undo level before the conversion, allowing the original plain text to be restored

Below are useful keyboard shortcuts for pasting in plain-text format when using the Markdown plugin within TinyMCE.

To paste text without formatting use:

  • Windows: Ctrl+Shift+V.

  • Mac: Cmd+Shift+V.

These shortcuts allow pasting of plain-text which removes existing formatting (such as bold, italics, or different fonts). This is particularly useful when copying Markdown syntax (text) from websites or documents as it ensures the text is pasted into the new location without the original HTML formatting.

Basic setup

To setup the Markdown plugin user-interface in the editor:

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

For example:

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

For information on bundling this plugin with module bundlers, see Bundling TinyMCE - Overview.

Interactive examples

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

The Markdown Plugin

 
<table>
  <thead>
    <tr>
      <th style="width: 50%;"><h2>The Markdown Plugin</h2></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="width: 50%;">
        <textarea class="markdown">
          <h1>Markdown Premium Plugin</h1>
          <p>The <strong>Markdown Premium Plugin</strong> enhances the functionality of the editor by allowing it to detect and convert pure markdown content on-paste.</p>
          <h2><strong>Tips for Pasting Text</strong></h2>
          <p>To paste text in plain form using keyboard shortcuts, use:</p>
          <ul>
          <li><strong>Windows:</strong> Ctrl+Shift+V</li>
          <li><strong>Mac:</strong> Cmd+Shift+V</li>
          </ul>
          <h3>Paste Example</h3>
          <p>Paste the following markdown into the editor using the above shortcuts:</p>
          <p># H1</p>
          <p>## H2</p>
          <p>### H3</p>
          <p>#### H4</p>
          <p>##### H5</p>
          <p>###### H6</p>
        </textarea>
      </td>
    </tr>
  </tbody>
</table>
tinymce.init({
  selector: 'textarea.markdown',
  plugins: [
    "markdown", "advlist", "anchor", "autolink", "charmap", "code", "fullscreen",
    "help", "image", "insertdatetime", "link", "lists", "media",
    "preview", "searchreplace", "table", "visualblocks",
  ],
  toolbar: "undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
  height: 600,
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});

Options

The following configuration options affect the behavior of the Markdown plugin.

markdown_symbols option

The markdown_symbols option allows you to define key/value pairs where the key represents a symbol in your content and the value represents the replacement for that symbol.

Type: Object

Default value: The markdown_symbols object accepts the following key-value pairs by default currently:

{
  C: '©',
  TM: 'â„¢',
  R: '®'
}

Example: using markdown_symbols

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'markdown',
  markdown_symbols: {
    C: '©',
    TM: 'â„¢',
    R: '®'
  }
});
Additionally, if the Emoticons plugin is enabled and properly set up, emojis surrounded by colons (:) will also be replaced. This feature allows for a broader range of replacements, including emojis represented by image files. For example, :smile: will be translated to the corresponding emoji, if configured.
In Markdown content, it’s important to enclose key symbols like "C" within parentheses, as in "(C)", to ensure proper conversion; note that they are case-sensitive, so "(c)" will not be transformed.

Commands

The Markdown plugin provides the following TinyMCE commands.

Command Description

MarkdownInsert

Insert new markdown content into the editor as HTML
Examples
tinymce.activeEditor.execCommand('MarkdownInsert', false, 'paragraph');
tinymce.activeEditor.execCommand('MarkdownInsert', false, '**bold**');
tinymce.activeEditor.execCommand('MarkdownInsert', false, '# Header');

APIs

The Markdown plugin provides the following APIs.

The editor.plugins.markdown.getContent() API supports the Markdown plugin.

The API converts the current TinyMCE document from HTML into valid Markdown syntax.

The editor.plugins.markdown.getContent(); API does not require configuration from the user

interface PluginAPI {
  getContent: () => Promise<string>
}

Example

TinyMCE document content:

<h3>Heading</h3>
<p>This is a paragraph.</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

API output:

### Heading

This is a paragraph.

* Item 1
* Item 2