Fetch the repository succeeded.
This action will force synchronization from uiw/react-markdown-editor, which will overwrite any changes that you have made since you forked the repository, and can not be recovered!!!
Synchronous operation will process in the background and will refresh the page when finishing processing. Please be patient.
A markdown editor with preview, implemented with React.js and TypeScript.
npm i @uiw/react-markdown-editor
Official document 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) - the raw markdown that will be converted to html (required)visible?: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)onBlur?: function(editor: IInstance, event: Event) - event occurs when an object loses focuspreviewProps - react-markdown options
npm run dev
npm run type-check:watch
npm run doc
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。