【md-editor-rt- Mrakdown编辑器使用】

呐呐呐呐。

已于 2023-12-18 15:52:55 修改

阅读量860

点赞数 26

文章标签：编辑器

于 2023-12-18 15:46:05 首次发布

本文链接：https://blog.csdn.net/m0_56542349/article/details/135064571

版权

1、安装

// 安装新版本的运行项目会报错，所以装个低版本的
yarn add md-editor-rt@2.0.0

2、使用

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

export default ({ }: any) => {
  const [text, setText] = useState<any>()
  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',
  ]);
  const onUploadImg = async (files: any, callback: any) => {
    const res = await Promise.all(
      files.map((file: any) => {
        return new Promise((rev, rej) => {
          const form = new FormData();
          form.append('file', file);
          const _url = '';
          fetch(_url, {
            method: 'post',
            headers: {
              token: getCookie('token') || '',
            },
            body: form,
          })
            .then((response) => response.json())
            .then((data) => {
              rev(data);
            })
            .catch((error) => console.error(error));
        });
      }),
    );
    callback(res.map((item) => item.rows[0].shareUrl));
  };
  return (
    <MdEditor
      modelValue={text}
      onChange={setText}
      onUploadImg={onUploadImg}
      toolbars={toolbars}
    />
  );
};