-
客服电话
-
APP下载
迪恩网络APP
随时随地掌握行业动态
-
官方微信
扫描二维码
关注迪恩网络微信公众号
客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称：react-markdown-editor-lite开源软件地址：https://gitee.com/mirrors/react-markdown-editor-lite开源软件介绍：react-markdown-editor-lite
案例在线案例 默认配置
可插拔的功能键
安装npm install react-markdown-editor-lite --save# oryarn add react-markdown-editor-lite基本使用基本使用分为以下几步：
// 导入React、react-markdown-editor-lite，以及一个你喜欢的Markdown渲染器import React from 'react';import MarkdownIt from 'markdown-it';import MdEditor from 'react-markdown-editor-lite';// 导入编辑器的样式import 'react-markdown-editor-lite/lib/index.css';// 注册插件（如果有的话）// MdEditor.use(YOUR_PLUGINS_HERE);// 初始化Markdown解析器const mdParser = new MarkdownIt(/* Markdown-it options */);// 完成！function handleEditorChange({ html, text }) { console.log('handleEditorChange', html, text);}export default props => { return ( <MdEditor style={{ height: '500px' }} renderHTML={text => mdParser.render(text)} onChange={handleEditorChange} /> );};
在 SSR（服务端渲染）中使用如果你在使用一个服务端渲染框架，例如 Next.js、Gatsby 等，请对编辑器使用客户端渲染。 例如，Next.js 有next/dynamic，Gatsby 有loadable-components 下面是 Next.js 的使用范例： import dynamic from 'next/dynamic';import 'react-markdown-editor-lite/lib/index.css';const MdEditor = dynamic(() => import('react-markdown-editor-lite'), { ssr: false,});export default function() { return <MdEditor style={{ height: '500px' }} renderHTML={/* Render function */} />;}与插件一起使用： import dynamic from 'next/dynamic';import 'react-markdown-editor-lite/lib/index.css';const MdEditor = dynamic( () => { return new Promise(resolve => { Promise.all([ import('react-markdown-editor-lite'), import('./my-plugin'), /** 按照这样加载更多插件，并在下方 use */ ]).then(res => { res[0].default.use(res[1].default); resolve(res[0].default); }); }); }, { ssr: false, },);export default function() { return <MdEditor style={{ height: '500px' }} renderHTML={/* Render function */} />;}完整示例见此 浏览器引入自 1.1.0 起，你可以在浏览器中使用 你可以通过 注意：ReactMarkdownEditorLite(RMEL) 依赖 react，请确保其在 RMEL 之前引入。 例如，使用 webpack 时，你可以在页面中通过 externals: { react: 'React', 'react-markdown-editor-lite': 'ReactMarkdownEditorLite'}更多示例主要作者
License |
请发表评论