此插件仅适用于 付费 TinyMCE 订阅。

Markdown Premium 插件可检测 TinyMCE 编辑器实例中粘贴事件的纯 markdown 内容。

使用 Markdown 插件

工作原理

Markdown Premium 插件检测是否将纯 markdown 粘贴到 TinyMCE 编辑器实例中。

如果在粘贴事件期间检测到 markdown 内容，编辑器将：

  • 尝试将 markdown 转换为 HTML

  • 在转换前添加一个撤销级别，允许恢复原始纯文本

以下是在 TinyMCE 中使用 Markdown 插件时，以 plain-text 格式粘贴的实用键盘快捷键。

要粘贴不带格式的文本，请使用：

  • Windows：Ctrl+Shift+V。

  • Mac：Cmd+Shift+V。

这些快捷键允许粘贴 plain-text，从而移除现有格式（如粗体、斜体或不同字体）。在从网站或文档复制 Markdown 语法（文本）时特别有用，因为它确保文本粘贴到新位置时不带原始 HTML 格式。

基本设置

要在编辑器中设置 Markdown 插件的用户界面：

  • 将 markdown 添加到编辑器配置中的 plugins 选项；

例如：

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

有关使用模块打包器打包此插件的信息，请参阅 Bundling TinyMCE - Overview。

交互式示例

HTML

<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>

JS

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 }'
});

选项

以下配置选项影响 Markdown 插件的行为。

markdown_symbols 选项

markdown_symbols 选项允许定义 key/value 对，其中 key 表示内容中的符号，value 表示该符号的替换内容。

类型： Object

默认值： markdown_symbols 对象默认接受以下键值对：

{
  C: '©',
  TM: '™',
  R: '®'
}

示例：使用 markdown_symbols

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'markdown',
  markdown_symbols: {
    C: '©',
    TM: '™',
    R: '®'
  }
});
此外，如果启用了 Emoticons 插件并正确设置，被冒号 (:) 包围的 emojis 也会被替换。此功能允许更广泛的替换，包括用图像文件表示的 emojis。例如，如果配置了，:smile: 将被转换为相应的 emoji。
在 Markdown 内容中，重要的是将关键符号（如 "C"）括在括号中，如 "(C)"，以确保正确转换；请注意它们是区分大小写的，因此 "(c)" 不会被转换。

命令

Markdown 插件提供以下 TinyMCE 命令。

命令 说明

MarkdownInsert

将新的 markdown 内容作为 HTML 插入编辑器
示例
tinymce.activeEditor.execCommand('MarkdownInsert', false, 'paragraph');
tinymce.activeEditor.execCommand('MarkdownInsert', false, '**bold**');
tinymce.activeEditor.execCommand('MarkdownInsert', false, '# Header');

API

Markdown 插件提供以下 API。

editor.plugins.markdown.getContent() API 支持 Markdown 插件。

该 API 将当前的 TinyMCE 文档从 HTML 转换为有效的 Markdown 语法。

editor.plugins.markdown.getContent(); API 不需要用户配置

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

示例

TinyMCE 文档内容：

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

API 输出：

### Heading

This is a paragraph.

* Item 1
* Item 2