react-markdown-editor-lite-plus

来源 react-markdown-editor-lite，修复国际化，问题

English Docs

• A light-weight(20KB zipped) Markdown editor of React component
• Supports TypeScript
• Supports custom markdown parser
• Full markdown support
• Supports pluggable function bars
• Full control over UI
• Supports image uploading and dragging
• Supports synced scrolling between editor and preview
• 一款轻量的基于 React 的 Markdown 编辑器, 压缩后代码只有 20KB
• 支持 TypeScript
• 支持自定义 Markdown 解析器
• 支持常用的 Markdown 编辑功能，如加粗，斜体等等...
• 支持插件化的功能键
• 界面可配置, 如只显示编辑区或预览区
• 支持图片上传或拖拽
• 支持编辑区和预览区同步滚动

案例

在线案例 https://harrychen0506.github.io/react-markdown-editor-lite/

默认配置

可插拔的功能键

安装

npm install react-markdown-editor-lite-plus --save
# or
yarn add react-markdown-editor-lite-plus

基本使用

基本使用分为以下几步：

• 导入 react-markdown-editor-lite-plus
• 注册插件（如果需要）
• 初始化任意 Markdown 解析器，例如 markdown-it
• 开始使用

// 导入React、react-markdown-editor-lite，以及一个你喜欢的Markdown渲染器
import React from 'react';
import MarkdownIt from 'markdown-it';
import MdEditor from 'react-markdown-editor-lite-plus';
// 导入编辑器的样式
import 'react-markdown-editor-lite-plus/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} />;
};

• 更多参数和配置：点击这里查看
• API：点击这里查看
• 插件开发：点击这里查看
• 完整 Demo 见src/demo/index.tsx

在 SSR（服务端渲染）中使用

如果你在使用一个服务端渲染框架，例如 Next.js、Gatsby 等，请对编辑器使用客户端渲染。

例如，Next.js 有next/dynamic，Gatsby 有loadable-components

下面是 Next.js 的使用范例：

import dynamic from 'next/dynamic';
import 'react-markdown-editor-lite-plus/lib/index.css';

const MdEditor = dynamic(() => import('react-markdown-editor-lite-plus'), {
  ssr: false,
});

export default function() {
  return <MdEditor style={{ height: '500px' }} renderHTML={/* Render function */} />;
}

与插件一起使用：

import dynamic from 'next/dynamic';
import 'react-markdown-editor-lite-plus/lib/index.css';

const MdEditor = dynamic(
  () => {
    return new Promise(resolve => {
      Promise.all([
        import('react-markdown-editor-lite-plus'),
        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-plus': 'ReactMarkdownEditorLite'
}

更多示例

• 基本使用
• 在 unform 中使用
• 编写插件
• 替换默认图标
• 在 Next.js 中使用

主要作者

• ShuangYa github/sylingd
• HarryChen0506 github/HarryChen0506

License

MIT