react集成editor.md

最新推荐文章于 2025-06-16 18:44:08 发布

原创

最新推荐文章于 2025-06-16 18:44:08 发布 · 置顶 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何在React应用中集成Editor.md，包括配置Markdown编辑器、解决异步设置值显示初始值的问题、动态加载数据以及利用全局变量editormd进行交互。详细步骤包括设置组件jsx文件，配置markdown内容，以及处理动态加载数据时的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.父组件jsx文件引用下面的子组件jsx文件
2.父组件jsx文件具体使用：<Editor.EditorShow config={ {
markdown: // testEditor.getMarkdown().replace(//g, '\\’)
## Test \``
console.log(‘what can i do for you’)
```

        # 123123`
    }}/>

<Editor config={
{
markdown: // testEditor.getMarkdown().replace(//g, '\\’)
## Test \``
console.log(‘what can i do for you’)
```

        # 123123`,
        onload: (editor, func) => {
            let md = editor.getMarkdown();
            let html = editor.getHTML();
            debugger
        }
    }
}/>,

3.react异步设置值时总会显示初始值，避免此问题在onload中this.setMarkdown(markdown);

4.动态加载数据，问题：例如点击列表加载不同的数据，onload中editor.recreate()可避免将数据追加在一个editor面板中。
/**
*

editormd 为 editor.md 挂载的全局变量 https://pandao.github.io/editor.md/examples/index.html
使用方法在html中挂在三个标签

‘use strict’;
import React from ‘react’;
import assign from ‘object-assign’;

var defaultConfig = {
// 组件接入方，并不需要知道具体ID
id: ‘EditorID’ + new Date().getTime(),
width: “90%”,
height: 740,
// 静态资源路径
path: ‘https://s0.meituan.net/xm/open-platform-static/editormd/lib/’,
// theme : “dark”,
// previewTheme : “dark”,
editorTheme : “pastel-on-dark”,
markdown: ‘Hello World!’,
codeFold: true,
//