版本对比 - MdEditorRT 使用文档

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

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

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

🔖 Props

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

事件

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

🪤 内部扩展

移除默认的 XSS 扩展，现在导出扩展XSSPlugin，请自行添加，使用示例。
移除 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	同上