Markdown plugin

This plugin is only available for paid TinyMCE subscriptions.
This feature is only available for TinyMCE 7.0 and later.

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 allows the editor to detect if pure markdown is pasted into the TinyMCE editor instance.

During this paste event, If the editor detects markdown has been pasted it will:

  • attempt to convert the markdown to HTML, while

  • add a undo level before the conversion to allow for undo of plain-text.

Below is a list of handy shortcuts for pasting in plain-text format when using the Markdown plugin within TinyMCE.

To paste text in plain form using keyboard shortcuts, use:

  • Windows: Ctrl+Shift+V.

  • Mac: Cmd+Shift+V.

These shortcuts allow pasting of plain-text without formatting, particularly when copying markdown syntax (text) from websites or documents. If the user copied text from one source with certain formatting (such as bold, italics, or different fonts), using this command will paste the text into the new location without carrying over the original 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',
});

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.

A new API, editor.plugins.markdown.getContent(); has been added to support the new Markdown plugin

The API’s function is to take a TinyMCE document, and processes it such that the previously HTML content is converted into content with 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