react-markdown-editor基于 React 的 Markdown 编辑器组件
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
评论
for-editor基于 React 的 Markdown 编辑器插件
for-editor是一款react下的markdown编辑器,拥有预览,快捷添加标签功能,后续逐步
for-editor基于 React 的 Markdown 编辑器插件
0
for-editor基于 React 的 Markdown 编辑器插件
for-editor是一款react下的markdown编辑器,拥有预览,快捷添加标签功能,后续逐步完善更多功能。在线预览源码地址欢迎issue,欢迎star。for-editor安装npm inst
for-editor基于 React 的 Markdown 编辑器插件
0
HyperMD基于 CodeMirror 的 Markdown 编辑器组件
HyperMD是一组[CodeMirror]插件、模式和主题。你可以在一个页面上同时使用HyperMD和CodeMirror。Markdown写作和预览,一个框就够了粗体字、斜体字、删除线、Code链
HyperMD基于 CodeMirror 的 Markdown 编辑器组件
0
HyperMD基于 CodeMirror 的 Markdown 编辑器组件
HyperMD 是一组 [CodeMirror] 插件、模式和主题。你可以在一个页面上同时使用 Hy
HyperMD基于 CodeMirror 的 Markdown 编辑器组件
0
Bootstrap-Markdown基于 Bootstrap 的 Markdown 编辑器
基于Bootstrap开发的MarkdownEditor,支持实时预览,全屏编辑,所见及所得。可通过Bootstrap对话框插入链接、图片等,方便用户使用。使用以下代码将textarea变为markd
Bootstrap-Markdown基于 Bootstrap 的 Markdown 编辑器
0
Bootstrap-Markdown基于 Bootstrap 的 Markdown 编辑器
基于Bootstrap开发的Markdown Editor,支持实时预览,全屏编辑,所见及所得。可通
Bootstrap-Markdown基于 Bootstrap 的 Markdown 编辑器
0
demarcate.js基于 jQuery 的 Markdown 编辑器
demarcate.js 是基于 jQuery 的 Markdown 编辑器,允许用户直接在页面上的
demarcate.js基于 jQuery 的 Markdown 编辑器
0
HedgeDoc基于 Web 的 Markdown 编辑器
HedgeDoc(以前称为CodiMD)是一个开源的、基于Web的、自托管的、协作的Markdown编辑器。可以让用户使用它轻松地实时协作处理笔记、图表甚至演示文稿。用户需要做的就是将你的笔记链接分享
HedgeDoc基于 Web 的 Markdown 编辑器
0