README.md · AnnOS/react-markdown-editor

A markdown editor with preview, implemented with React.js and TypeScript.

## Install

```bash
npm i @uiw/react-markdown-editor
```

## Document

Official document [demo preview](https://uiwjs.github.io/react-markdown-editor/) ([🇨🇳中国镜像网站](http://uiw.gitee.io/react-markdown-editor/))

## Basic Usage

```jsx
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

```jsx
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')
);
```

## Props

- value (*string*) - the raw markdown that will be converted to html (**required**)
- `visble?:boolean` - Shows a preview that will be converted to html.
- `toolbars?:array` - Tool display settings.
- `toolbarsMode?:array` - Tool display settings.
- onChange (*function(editor: IInstance, data: CodeMirror.EditorChange, value: string)*) - called when a change is made (**required**)

> [Other Props Options](https://github.com/uiwjs/react-markdown-editor/blob/8de6abbf628b6d272d7da1c28e985fbbcba71b93/src/components/CodeMirror/index.tsx#L21-L60)

### Development

```bash
npm run dev
npm run type-check:watch
npm run doc
```

## License

AnnOS/react-markdown-editor

简介

发行版

贡献者

近期动态

AnnOS/react-markdown-editor .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

AnnOS/react-markdown-editor