代码拉取完成,页面将自动刷新
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}
/>
);
ReactDOM.render(<Dome />, document.getElementById('app'));
import MarkdownEditor from '@uiw/react-markdown-editor';
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
function App() {
const [markdown, setMarkdown] = useState("");
return (
<MarkdownEditor
value="# This is a H1 \n## This is a H2 \n###### This is a H6"
onChange={(editor, data, value) => setMarkdown(value)}
/>
);
}
ReactDOM.render(<App />, document.getElementById('app'));
import React from "react";
import ReactDOM from "react-dom";
import MarkdownEditor from '@uiw/react-markdown-editor';
const title2 = {
name: 'title2',
keyCommand: 'title2',
icon: (
<svg width="12" height="12" viewBox="0 0 512 512">
<path fill="currentColor" d="M496 80V48c0-8.837-7.163-16-16-16H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.621v128H154.379V96H192c8.837 0 16-7.163 16-16V48c0-8.837-7.163-16-16-16H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.275v320H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.621V288H357.62v128H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.275V96H480c8.837 0 16-7.163 16-16z" />
</svg>
),
execute: (editor, selection, position) => {
const value = selection ? `## ${selection}` : '## ';
editor.replaceSelection(value);
position.ch = !!selection ? position.ch : position.ch + 3;
editor.setCursor(position.line, position.ch);
editor.focus();
},
};
const Dome = () => (
<MarkdownEditor
value="Hello Markdown!"
toolbars={[
'bold', 'italic', 'header', title2
]}
/>
);
ReactDOM.render(<Dome />, 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?: ICommand[] | string[]
- Tool display settings.toolbarsMode?: ICommand[] | string[]
- Tool display settings.onChange?:function(editor: IInstance, data: CodeMirror.EditorChange, value: string)
- called when a change is madeonBlur?: function(editor: IInstance, event: Event)
- event occurs when an object loses focuspreviewProps
- react-markdown optionsnpm run dev
npm run type-check:watch
npm run doc
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型