React 中集成 Markdown编辑器

最新推荐文章于 2025-11-16 05:22:30 发布

原创最新推荐文章于 2025-11-16 05:22:30 发布 · 8.6k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#Markdown #Mditor #React

JavaScirpt 同时被 2 个专栏收录

43 篇文章

订阅专栏

react-native

5 篇文章

订阅专栏

Mditor是一款简洁易用的Markdown编辑器，支持多种浏览器，提供了丰富的快捷键及工具栏选项，便于用户快速编辑Markdown文档。本文介绍了Mditor的安装、配置及使用方法。

文中采用的是Mditor编辑器

[ M ] arkdown + E [ ditor ] = Mditor
Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器，仅此而已…
支持浏览器: chrome/safari/firefox/ie9+

引入资源文件

引入CDN资源
```
<link rel="stylesheet" href="https://unpkg.com/mditor@1.0.5/dist/css/mditor.min.css" />
<script src="https://unpkg.com/mditor@1.0.5/dist/js/mditor.min.js"></script>
```
采用上述方式，发现并没有明显效果，可能资源资源版本过低。所以推荐下面一种方式。当然也可以将本地资源推送到自己的CDN上使用。
引入本地资源
```
<link rel="stylesheet" href="mditor/css/mditor.min.css" />
<script src="mditor/js/mditor.min.js"></script>
```
拷贝https://github.com/Houfeng/mditor/tree/master/packages/embed/dist目录下的资源到本地，打包到mditor目录下，再进行引用。

引入控件

添加textarea元素，并创建Mditor实例

class App extends Component {
  render() {
    return (
      <div>
        <textarea id="md_editor"></textarea>
      </div>
    );
  }

  componentDidMount(){
    var ele_textarea = document.getElementById('md_editor');
    var mditor =  Mditor.fromTextarea(ele_textarea);
  }
}

预览效果：
这里写图片描述

工具栏

mditor.on('ready',function(){
    mditor.toolbar.items.map(item => {
        console.log('key:',item.key, '  name:',item.name)
    })
});

key: shift+alt+b name: bold
key: shift+alt+i name: italic
key: shift+alt+e name: underline
key: shift+alt+d name: strikethrough
key: shift+alt+1 name: header
key: shift+alt+q name: quote
key: shift+alt+c name: code
key: shift+alt+o name: list-ol
key: shift+alt+u name: list-ul
key: shift+alt+l name: link
key: shift+alt+t name: table
key: shift+alt+h name: line
key: shift+alt+p name: image
key: shift+alt+/ name: help
key: shift+alt+f name: toggleFullScreen
key: shift+alt+v name: togglePreview
key: shift+alt+s name: toggleSplit

可以针对工具条中的按钮进行新增、替换、删除监听等操作，具体可参考原文API

Markdown内容解析并显示

通过npm安装

npm install mditor --save

  "dependencies": {
    "mditor": "^1.3.3"
  }

将markdown内容解析成html代码进行展示

var mditor = require("mditor");
var parser = new mditor.Parser();
var html = parser.parse("** Hello mditor! **");