md-editor-rt@7.1.0

Markdown编辑器React版本，使用jsx和typescript语法开发，支持切换主题、prettier美化文本等。

下面仅列举不兼容的内容，兼容内容不作展示。

🧙🏼 从 6.x 升级到 7.x

💴 Config

🍤 markdownItConfig：原生 HTML 默认关闭

这是一个破坏性变更：7.x 中，MdEditor 和 MdPreview 初始化 markdown-it 时，html 的默认值从 true 改为 false：

diff 复制代码 
- html: true
+ html: false

升级后，Markdown 中直接书写的 <u>、<img>、<br>、<iframe>、<details> 等原生 HTML 会显示为文本，图片说明中的 HTML 也不再按标签渲染。下划线工具栏和快捷键仍插入 <u>文字</u>，默认不再显示下划线。

可以将已有内容中的 HTML 图片、上下标改为 ![描述](地址)、^上标^、~下标~ 等 Markdown 或插件语法。任务列表、代码块、公式和图表等由插件生成的 HTML 不受此选项影响。

若需要保留 6.x 的原生 HTML 渲染行为，请在创建编辑器或预览组件前显式开启：

ts 复制代码 
import { config } from 'md-editor-rt';

config({
  markdownItConfig(mdit) {
    mdit.set({ html: true });
  },
});

html 控制原生 HTML 的解析，不负责清洗最终输出；需要清洗生成的 HTML 时，请使用 sanitize。更多配置说明见 markdownItConfig。

📊 editorExtensions.echarts.parseOption

6.x 的默认解析器会执行代码块中的 JavaScript，因此可以直接使用函数：

js 复制代码 
{
  tooltip: {
    formatter: (params) => `${params[0].value}`,
  },
}

7.x 默认使用JSON5.parse，并要求顶层结果为非数组对象。配置需要调整为不包含函数、变量引用、new或调用表达式的 JSON5 数据：

json5 复制代码 
{
  tooltip: {
    trigger: 'axis',
  },
  series: [
    {
      type: 'line',
      data: [1, 2, 3],
    },
  ],
}

如果仍需兼容函数写法，可以显式覆盖parseOption(code, { editorId, element })：

ts 复制代码 
import { config } from 'md-editor-rt';

config({
  editorExtensions: {
    echarts: {
      parseOption(code) {
        return new Function(`"use strict"; return (${code}\n);`)();
      },
    },
  },
});

执行型解析器只适用于完全可信的 Markdown 内容，自定义解析器需要自行完成输入校验和安全控制。

📊 editorExtensions.echarts.sanitizeOption

图表渲染新增独立防护：parseOption → echartsConfig → sanitizeOption → setOption。tooltip 默认使用 richText，HTML formatter 不再生成 HTML 节点；数据视图文案会转义，标题和树图链接协议受限。这些规则也覆盖时间轴与 media 配置。

原有自定义 parseOption 会继续经过默认防护。若完全可信的内容仍需 HTML tooltip，可单独配置 editorExtensions.echarts.sanitizeOption: (option) => option；这不会开启 JavaScript 解析。只需添加函数回调时，优先在应用的 echartsConfig 中设置。

sanitize 无法清洗 ECharts 在交互时生成的 DOM，因此不能替代此配置。完整接口见 editorExtensions。

🛡 Mermaid 与 KaTeX 安全默认值

Mermaid 默认以 securityLevel: 'strict' 渲染，文档内的指令不能覆盖受保护配置；KaTeX 默认使用 trust: false。仅返回部分主题或排版配置也会保留这些默认值。

完全可信的内容可分别在 mermaidConfig(base) 中返回 { ...base, securityLevel: 'loose' }，在 katexConfig(base) 中返回 { ...base, trust: true } 或信任判断函数。sanitizeMermaid 继续作为异步 SVG 清洗入口；主题、清洗器或手动 rerender() 更新后，旧缓存和异步结果不再复用。

🎨 样式

🌗 暗色主题选择器

暗色模式选择器需要按下面的方式迁移：

diff 复制代码 
-.md-editor-dark,
-.md-editor-catalog-dark {
+.md-editor[data-theme='dark'],
+.md-editor-catalog[data-theme='dark'] {
  /* 自定义暗色样式 */
}

🧙🏼 从 5.x 升级到 6.x

🐈 UMD

为了跟进前端生态的发展，部分三方依赖自 6.x 开始已全面转向 ESM 模式，我们也不再继续提供 UMD 格式支持。

这里提供了全局使用的新的参考： 🤓 CDN 链接

🔖 Props

🧷 insertLinkDirect

移除，现在点击添加链接时不再弹出输入框

🎱 mdHeadingId

类型变更

现在

ts 复制代码 
type MdHeadingId = (options: {
  text: string;
  level: number;
  index: number;
  currentToken?: Token;
  nextToken?: Token;
}) => string;

以前

ts 复制代码 
type MdHeadingId = (text: string, level: number, index: number) => string;

💴 Config

新：

ts 复制代码 
import { config, type CodeMirrorExtension, type Themes } from 'md-editor-rt';
import { type KeyBinding } from '@codemirror/view';

config({
  codeMirrorExtensions(
    extensions: Array<CodeMirrorExtension>,
    options: {
      editorId: string;
      theme: Themes;
      keyBindings: Array<KeyBinding>;
    }
  ): Array<CodeMirrorExtension> {
    return extensions;
  }
});
ts 复制代码 
interface CodeMirrorExtension {
  /**
   * 仅用来提供开发者分别不同扩展的依据
   */
  type: string;
  /**
   * CodeMirror的扩展
   */
  extension: Extension | ((options: any) => Extension);
  /**
   * 包裹扩展的Compartment，只有部分扩展有，提供扩展更新的能力
   */
  compartment?: Compartment;
  options?: any;
}

现在你可以从 extensions[i].type 中准确的知道这个哪个扩展。

旧：

ts 复制代码 
import { config, type CodeMirrorExtension, type Themes } from 'md-editor-rt';
import { type KeyBinding } from '@codemirror/view';

config({
  codeMirrorExtensions(
    theme: Themes,
    extensions: Array<Extension>,
    keyBindings: Array<KeyBinding>,
    options: {
      editorId: string;
    }
  ): Array<Extension> {
    return extensions;
  }
});

🧙🏼 从 4.x 升级到 5.x

现在必须使用 react >=18.0.0 的版本！！！

🔖 Props

名称 说明
editorId 标记为过时，仍然可以使用，建议使用 id 替换。注意：仅MdEditor和MdPreview组件调整，其他的组件仍然使用editorId，标识这是编辑器的 id 而非本身的。
inputBoxWitdh 拼写错误，修改为：inputBoxWidth 。
noIconfont 移除，现使用 lucide 开源图标库替换。
customIcon 仍然支持自定义图标，但是更新了部分图标关键词，注意查阅 CustomIcon 。

事件

名称 说明
onInputBoxWitdhChange 拼写错误，修改为：onInputBoxWidthChange

🪤 内部扩展

  1. 移除默认的 XSS 扩展，现在导出扩展XSSPlugin，请自行添加，使用示例。
  2. 移除 iconfont 相关的配置，详细的有：iconfontType、editorExtensions.iconfont、editorExtensions.iconfontClass、editorExtensionsAttrs.iconfont、editorExtensionsAttrs.iconfontClass。

🧙🏼 从 3.x 升级到 4.x

🏄🏼 引用方式

4.0 版本开始支持按需引用组件，不再默认导出编辑器。

🏄🏼‍♂️ 全局引用

diff 复制代码 
- <script src="https://unpkg.com/md-editor-rt@latest/lib/md-editor-rt.umd.js"></script>
+ <script src="https://unpkg.com/md-editor-rt@latest/lib/umd/index.js"></script>
<script>
  ReactDOM.createRoot(document.getElementById('root')).render(
-   React.createElement(MdEditorRT, {
+    React.createElement(MdEditorRT.MdEditor, {
      modelValue: 'Hello Editor!!'
    })
  );
</script>

🏄🏼‍♀️ ES Module

diff 复制代码 
- import MdEditor from 'md-editor-rt';
- const NormalToolbar = MdEditor.NormalToolbar;
- const DropdownToolbar = MdEditor.DropdownToolbar;
- const ModalToolbar = MdEditor.ModalToolbar;
- const MdCatalog = MdEditor.MdCatalog;
+ import { MdEditor, NormalToolbar, DropdownToolbar, ModalToolbar, MdCatalog } from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';

🔖 Props

名称 说明
previewOnly 已移除，使用组件MdPreview替换

🪤 内部组件

新增MdPreview组件，替换原编辑器的previewOnly属性，可以减少代码体积。

diff 复制代码 
import React, { useState } from 'react';
- import MdEditor from 'md-editor-rt';
+ import { MdPreview } from 'md-editor-rt';
- import 'md-editor-rt/lib/style.css';
+ import 'md-editor-rt/lib/preview.css';

export default () => {
  const [text] = useState('hello md-editor-rt！');
- return <MdEditor modelValue={text} previewOnly />;
+ return <MdPreview modelValue={text} />;
};

🧙🏻‍♂️ 从 2.x 升级到 3.x

下面列举的是3.x不兼容2.x的内容，兼容内容不作展示。

🤹🏼‍♂️ 语法

  • 删除线

    diff 复制代码 
    - ~It is a dream deeply rooted in the American dream.~
+ ~~It is a dream deeply rooted in the American dream.~~

🔩 Props

名称 说明
markedHeadingId 修改为mdHeadingId
historyLength 已移除

🤿 配置项

diff 复制代码 
MdEditor.config({
-  markedRenderer: (renderer) => renderer,
-  markedExtensions: [],
-  markedOptions,
+  codeMirrorExtensions: (theme, extensions) => extensions,
+  markdownItConfig: (mdit) { }
})

🎤 快捷键

键位 功能 说明
CTRL + Q 添加引用 已移除

🪤 内部组件

🐻 目录导航

  • props
    • markedHeadingId: 已删除，使用mdHeadingId代替。

从 1.x 升级到 2.x

下面列举的是2.x不兼容1.x的内容，兼容内容不作展示。

Props

名称 说明
editorClass 修改为className
hljs 已移除，使用MdEditor.config配置
highlightJs 同上
highlightCss 同上
languageUserDefined 同上
prettier 修改为noPrettier，默认false
prettierCDN 已移除，使用MdEditor.config配置
prettierMDCDN 同上
cropperCss 同上
cropperJs 同上
iconfontJs 同上
screenfull 同上
screenfullJs 同上
mermaid 同上
mermaidJs 同上
katex 同上
katexJs 同上
katexCss 同上
extensions 同上

组件

  • Catalog

    Editor.Catalog 已重命名为 Editor.MdCatalog.

    更多用法，请查阅 docs.