Слияние кода завершено, страница обновится автоматически
在线案例
https://harrychen0506.github.io/react-markdown-editor-lite/
默认配置
可插拔的功能键
npm install react-markdown-editor-lite --save
# or
yarn 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} />
);
};
如果你在使用一个服务端渲染框架，例如 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 起，你可以在浏览器中使用script和link标签直接引入文件，并使用全局变量ReactMarkdownEditorLite。
你可以通过 
注意：ReactMarkdownEditorLite(RMEL) 依赖 react，请确保其在 RMEL 之前引入。
例如，使用 webpack 时，你可以在页面中通过script引入 ReactMarkdownEditorLite 的 JS 文件，并在 webpack 配置中写：
externals: {
react: 'React',
'react-markdown-editor-lite': 'ReactMarkdownEditorLite'
}
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )