一款功能强大的markdown编辑器tui.editor使用示例详解

什么是tui.editor

tui.editor 是一款基于浏览器端的 JavaScript markdown 编辑器，其主要功能包括：

• 良好的 markdown 编辑体验
• 自动同步预览功能
• 可自定义的 markdown 样式
• 全屏编辑模式
• 支持替换和搜索功能等

快速入门

1. 创建一个 HTML 文件，并将 tui.editor 引入：

```html

```

1. 在 HTML 文件中创建一个 div，用作 tui.editor 的容器：

```html

```

1. 初始化 tui.editor：

javascript
const editor = new tui.Editor({
el: document.querySelector('#editSection'),
initialEditType: 'wysiwyg',
previewStyle: 'vertical',
});

在该代码中，#editSection 是 tui.editor 的容器，initialEditType 设置编辑器的初始编辑模式（支持 markdown 和 wysiwyg），previewStyle 设置预览的样式（支持 tab 和 vertical），更多配置请参考官方文档。

1. 运行 HTML 文件即可在浏览器中使用 tui.editor。

示例说明

示例一：自定义 markdown 样式

tui.editor 提供了一个样式配置项 viewerHtmlSanitizerOption，可以通过它来自定义预览区域中的 markdown 样式。

const editor = new tui.Editor({
  // ...其他配置
  viewerHtmlSanitizerOption: {
    allowedTags: [
      'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'pre', 'a',
      'ul', 'ol', 'li', 'br', 'hr', 'img', 'strong', 'em', 'del', 'ins',
      'table', 'thead', 'tbody', 'tr', 'th', 'td', 'code'
    ],
    allowedAttributes: {
      a: ['href', 'target', 'title'],
      img: ['src', 'alt', 'title'],
      pre: ['class'],
      code: ['class'],
    },
  },
});

在上述代码中，我们设置了允许的 HTML 标签和属性，同时也可以通过 class 属性来控制预览区域的样式。

示例二：使用自定义 markdown 解析器

tui.editor 内置的 markdown 解析器是 marked，但是我们也可以使用自定义的解析器。

import { Parser } from 'my-markdown-parser';

const customParser = new Parser();

const editor = new tui.Editor({
  // ...其他配置
  exts: [
    {
      name: 'customMarkdown',
      constructor: function() {
        //
      },
      events: {
        previewBeforeHook: function() {
          const markdown = editor.getMarkdown();
          return customParser.parse(markdown);
        },
      },
    },
  ],
});

在上述代码中，我们引入了自定义的 markdown 解析器 my-markdown-parser，并在 tui.editor 的 exts 配置项中添加了一个新的扩展，其中 previewBeforeHook 事件会在预览区域更新前触发，我们通过该事件将 markdown 解析后的 HTML 代码返回给预览区域。

结语

以上为 tui.editor 的入门指南和两个示例说明，tui.editor 提供了很多实用的功能，而这里仅仅是刚刚入门，希望读者可以通过实际使用和探索，更好地发掘其强大的功能。