react-markdowm编辑器（md-editor-rt）

推荐一个很好用的一个react-markdowm编辑器

传送门：🚄🚃🚃🚃🚃🚃🚃

🚄首先是安装：

yarn add md-editor-rt
或
tnpm i md-editor-rt -S
或
npm i md-editor-rt -S

🚃他的使用：

import React, { useState } from 'react';
import Editor from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';

export default function Md() {
  const [text, setText] = useState('hello md-editor-rt！');
  return <Editor modelValue={text} onChange={setText} />;
}

示例图：

🤗图片上传：

默认可以选择多张图片，支持截图粘贴板上传图片，支持复制网页图片粘贴上传。

图片裁剪上传只支持选择一张图片~，但回调入仍是一个文件数组。

注意：粘贴板上传时，如果是网页上的 gif 图，无法正确上传为 gif 格式！请保存本地后再手动上传。

 const onUploadImg = async (files, callback) => {
    const res = await Promise.all(
    Array.from(files).map((file) => {
      return new Promise((rev, rej) => {
        const form = new FormData();
        form.append('file', file);

        axios
          .post('/api/img/upload', form, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          })
          .then((res) => rev(res))
          .catch((error) => rej(error));
      });
    })
  );
     
    callback(res.map((item) => item.data.url));
  };

🎉顶部工具栏调整：

支持调整工具栏内容顺序和分割符了。

可以随意排序工具栏，通过'-'分割两个工具，通过'='实现左右放置！

'bold', 'underline', 'italic', '-', 'strikeThrough', 'sub', 'sup', 'quote', 'unorderedList',
'orderedList', '-', 'codeRow', 'code', 'link', 'image', 'table', '-', 'revoke', 'next', 'save',
'=', 'pageFullscreen', 'fullscreen', 'preview', 'htmlPreview', 'catalog', 'github'

// 对应功能名称
'加粗', '下划线', '斜体', '删除线', '下标', '上标', '引用', '无序列表',
'有序列表', '行内代码', '块级代码', '链接', '图片', '表格', '后退一步', '前进一步', '保存'，
'页面内全屏', '屏幕全屏', '内容预览', 'html代码预览', '目录', '源码地址

=

import React, { useState } from 'react';
import Editor, { ToolbarTips } from 'md-editor-rt';
import 'md-editor-rt/lib/style.css';

export default function Md() {
    const [text, setText] = useState('hello md-editor-rt！');
    const [toolbars] = useState<(keyof ToolbarTips)[] | undefined>(
        [
            'bold',
            'underline',
            'italic',
            '-',
            'strikeThrough',
            'title',
            'sub',
            'sup',
            'quote',
            'unorderedList',
            'orderedList',
            '-',
            'codeRow',
            'code',
            'link',
            'image',
            'table',
            '-',
            'revoke',
            'next',
            'save',
            '=',
            'pageFullscreen',
            'fullscreen',
            'preview',
            'htmlPreview',
        ]
    );
    return <Editor
        modelValue={text}
        onChange={setText}
        toolbars={toolbars}
    />;
}

🎉图片示例：

会自动把markdown的内容整合好 放到右边的目录结构中 方便查看

😜这里是简答的markdown的用法，详细配置可自行去源码地址查看
😜如果你用的typescript 他的类型 在他的文档中都有描述