基于 React 的 Markdown 编辑器组件 react-markdown-editor

基于 React 的 Markdown 编辑器组件 react-markdown-editor

MIT
TypeScript 查看源码»
跨平台
2019-04-09
同一种调调

react-markdown-editor 是 React.js 和 TypeScript 实现的 Markdown 编辑器。

Markdown 编辑器带预览功能

安装

npm i @uiw/react-markdown-editor

文档

文档实例预览:demo preview (🇨🇳中国镜像网站)

使用

import MarkdownEditor from '@uiw/react-markdown-editor';
import React from 'react';
import ReactDOM from 'react-dom';

const Dome = () => (
  <MarkdownEditor
    value={this.state.markdown}
    onChange={this.updateMarkdown}
  />
);

controlled usage

import MarkdownEditor from '@uiw/react-markdown-editor';
import React from 'react';
import ReactDOM from 'react-dom';


class App extends React.Component {
  constructor() {
    super();
    this.state = {
      markdown: '# This is a H1  \n## This is a H2  \n###### This is a H6',
    };
    this.updateMarkdown = this.updateMarkdown.bind(this);
  }

  updateMarkdown(editor, data, value) {
    this.setState({ markdown: value });
  }

  render() {
    return (
      <MarkdownEditor
        value={this.state.markdown}
        onChange={this.updateMarkdown}
      />
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

参数

  • value (string) - 将转换为 html 的原始 markdown 字符串 (必填参数)
  • visble (boolean) - 显示将转换为html的预览。
  • toolbars (array) - 工具栏显示设置。
  • onChange (function(editor: IInstance, data: CodeMirror.EditorChange, value: string)) - 在进行更改时调用 (必填参数)

更多参数设置查看下面网址

开发模式

npm run dev
npm run type-check:watch
npm run doc
的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

Markdown 编辑器 1.1.7 发布,新增全屏模式

react-markdown-editor 是一个基于 React 的 Markdown编辑器 组件。 新版更新内容: 添加全屏模式. 1ee6026 修改markdown预览样式. ba3fc54 修改编译脚本命令 b62c70e 修复工具栏按钮类型导致...

04/11 09:31

没有更多内容

加载失败,请刷新页面

没有更多内容

暂无问答

react markdown 编辑器插件 for-editor

介绍 由于需要用到react下的markdown编辑器功能,网上开源的react markdown编辑器不多,没有找到合适的,索性自己写一个。markdown编辑器主要功能就是预览,for-editor是一款react下的markd...

01/09 23:50
4
0
react npm插件推荐

react npm插件推荐 本文依据博主在平时应用中运用的react插件做简单介绍,如果有更好的技术交流可邮箱联系:regan_jeff@163.com。 音乐播放器(aplayer) 正如它的介绍 "*** Wow, such a bea...

2018/08/14 18:09
43
0
让 Markdown 中的代码可以实时运行

背景 让 Markdown 中的代码可以实时运行,为什么会有这样一个需求? 在我们前端团队中,技术相关的文档都采用 Markdown 编写, 文档中往往会伴随很多示例代码,我们希望大家在阅读文档的时候...

2018/08/28 18:33
57
0
MarkDown案例

## Welcome to MarkdownPad 2 ## **MarkdownPad** is a full-featured Markdown editor for Windows. ### Built exclusively for Markdown ### Enjoy first-class Markdown support with eas...

2014/09/28 23:15
308
0
Markdown实例

结合http://tool.oschina.net/markdown/瞬间掌握 # MacDown ![MacDown logo](http://macdown.uranusjr.com/static/base/img/logo-160.png) Hello there! I’m **MacDown**, the open source ...

2016/12/08 17:57
10
0
2019年3月22日 开源软件

https://k3s.io/ https://github.com/codercom/code-server https://github.com/Microsoft/monaco-editor https://github.com/krisk/Fuse https://github.com/markdown-it/markdown-it https...

03/22 15:22
25
0
OpenDigg前端开源项目周报1219

由[OpenDigg](http://www.opendigg.com/) 出品的前端开源项目周报第二期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开发方面的开源项目,方便前端开发人员便捷的找到自...

2016/12/19 17:05
14
0
78 款 Markdown 工具

Markable 强大的在线 Markdown 编辑器,支持语法高亮、自动缩进、高亮所在行、显示行数、即时预览。它支持将 HTML 转换成 Markdown。 可以配合 Evernote、Dropbox 使用。 Markdown Here 使用...

2015/06/30 17:00
140
1

没有更多内容

加载失败,请刷新页面

返回顶部
顶部