react-ritch-markdown

基于 React 和 antd 的编辑器（同时支持富文本和 markdown，基于 braft-editor 和 react-markdown-editor-lite 的在封装）

基本使用

1. 编辑器的基本使用

下载

npm i react-start-editor

引入

import Editors from "react-start-editor/lib"

使用

// 编辑器
<Editors.Editors />

1.1支持参数

1.1.1 公共参数

| 名称 | 描述 | 类型 | 默认 | 备注 | | ------------ | ---------------- | -------- | --------------- | :------------------------------------: | | onChange | 获取编辑器的值 | function | | 必传 | | isRich | 是否显示富文本 | Boolean | false | true：显示富文本；false：显示 markdown | | defaultValue | 默认值 | string | null | | | imgUrl | 图片上传地址 | string | /api/site/image | | | IUpName | 图片上传名 | string | file | | | IUpData | 图片上传额外参数 | object | undefind | | | fillUrl | 文件上传地址 | string | /api/site/annex | | | FUpName | 文件上传名 | string | file | | | FUpData | 文件上传额外参数 | object | undefind | |

1.1.2 markdown参数

| 名称 | 描述 | 类型 | 默认 | 备注 | | ------------ | ------------------------ | -------- | ---------------- | ----------------------- | | mdRender | markdown 渲染规则 | | markdown-it | 需要传入整个markdown-it | | mdStyle | markdown样式 | object | {height:'500px'} | | | mdPasteImg | markdown复制图片上传函数 | function | undefind | | | mdImgChange | 图片上传回调函数 | function | undefind | | | mdFillChange | 文件上传回调函数 | function | undefind | |

1.1.3 富文本参数

| 名称 | 描述 | 类型 | 默认 | 备注 | | -------------- | ---------------------- | -------- | -------- | ------------------ | | richPasetImg | 富文本复制图片上传函数 | function | undefind | | | richImgChange | 图片上传回调函数 | function | undefind | 必须返回拼接后的值 | | richFillChange | 文件上传回调函数 | function | undefind | 必须返回拼接后的值 | | richXssOption | 富文本xss配置对象 | object | xssOption| |

let xssOption = {
      whiteList: {
        a: ["href", "title", "target"],
        img: ["src", "alt", "target", "id", "title"],
        video: ["src", "control"],
        audio: ["src", "control"],
        span: ["style"],
        p: ["style"],
        div: ["style", "class", "id"],
        strong: [],
        em: [],
        u: [],
        hr: [],
        sup: [],
        sub: [],
        ul: [],
        ol: [],
        li: [],
        b: [],
        table: ["border", "style", "collapse"],
        tr: [],
        td: ["colspan", "rowspan"],
        blockquote: [],
        code: [],
        pre: [],
        br: [],
        font:["face"],
      },
    };

1.2 方法实例

1.2.1 onChange 实例

获取编辑器的值

onChange(value) {
	console.log(value)
}

1.2.2 mdPasteImg实例

// 粘贴图片上传
  myUploadFn = (file) => {
    const { IUpData, IUpName, imgUrl } = this.props;
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = () => {
        let obj = new FormData();
        if (IUpData) {
          for (let key in IUpData) {
            obj.append(key, IUpData[key]);
          }
        }
        obj.append(IUpName, file);
        Axios.post(imgUrl, obj).then((res) => {
          let { data } = res;
          resolve(data.url);
        });
      };
      reader.readAsDataURL(file);
    });
  };

1.2.3 richPasetImg实例

// 粘贴图片上传
  myUploadFn = (param) => {
    const { IUpData, IUpName, imgUrl } = this.props;
    let obj = new FormData();
    if (IUpData) {
      for (let key in IUpData) {
        obj.append(key, IUpData[key]);
      }
    }
    obj.append(IUpName, param.file);
    Axios.post(imgUrl, obj)
      .then((res) => {
        if (res.data && res.data.code === 0) {
          let data = res.data.data;
          param.success({
            url: data.url,
            meta: {
              id: data.id,
              title: data.name,
              alt: data.name,
            },
          });
        }
      })
      .catch((err) => {
        param.error({
          msg: "上传失败!",
        });
      });
  };

1.2.4 mdImgChange实例

const mdImgChange = (info, set) => {
    if (info.file.status === 'done') {
      set.setFieldsValue({
        url: info.file.response.data.url,
      });
    } else if (info.file.status === 'error') {
      message.error('图片上传失败');
    }
  };

1.2.5 mdFillChange实例

const mdImgChange = (info, set) => {
    if (info.file.status === 'done') {
       // 插入Markdown
        let str = `[${info.file.response.data.file_name}](${info.file.response.data.url})`;
       set.insertText(str);
    } else if (info.file.status === 'error') {
      message.error('图片上传失败');
    }
  };

1.2.6 richImgChange 实例

//图片上传回调
  const richImgChange = (info, value, set) => {
    if (info.file.status === 'done') {
      // 富文本图片上传成功，将图片地址加入富文本内容
      let data = set.insertMedias(value, [{ type: 'IMAGE', url: info.file.response.data.url }]);
      return data; // 必须返回拼接的值
    } else if (info.file.status === 'error') {
      message.error('图片上传失败');
    }
  };

1.2.7 richFillChange实例

//文件上传回调
 const  uploadFileChange = (info, value，set) => {
      if (info.file.status === "done") {
        // 富文本文件上传成功，将图片地址加入富文本内容
        let data = set.insertHTML(
          value,
          `<a target="_blank" href="${info.file.response.data.url}">${info.file.response.data.file_name}</a>`
        )
        return data // 必须返回拼接的值
      } else if (info.file.status === "error") {
        message.error("文件上传失败");
      }
  };

1.3 Muse 实例

挂载 markdown 插件

Editors.Editors.Muse(插件, 配置)

1.4 基本使用示例

const mdParser = new MarkdownIt({
  breaks: true, // 转换段落里的 '\n' 到 <br>。
  linkify: true, // 将类似 URL 的文本自动转换为链接。
  typographer: true, // 启用一些语言中立的替换 + 引号美化
  html: true,
  highlight: function(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (__) {}
    }
    return ""; // 使用额外的默认转义
  },
})
  .use(require("markdown-it-toc"))
  .use(require("markdown-it-xss"), {
    xss: {
      escapeHtml(html) {
        return html;
      },
    },
  })
  .use(require('@liradb2000/markdown-it-mermaid'));

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            defaultValue: '',
        }
    }

    // 获取编辑器的内容
    onChange = (value) => {
        console.log(value)
    }

    refadd = React.createRef();

	// 设置默认值
    componentDidMount() {
        this.setState({ defaultValue: '1236' })
    }

    handleClickLastValue = async () => {
        this.setState({ defaultValue: '7896' })
    }

    // 清空编辑器
    handleClear = () => {
        this.refadd.current.clearContent()
    }

    render() {
        const { defaultValue } = this.state
        return <div>
            <Button onClick={() => this.handleClickLastValue()}>
                恢复上一次内容
            </Button>
            <Button onClick={() => this.handleClear()}>
                清除内容
            </Button>
            <Editors.Editors
                ref={this.refadd}
                onChange={this.onChange}
                isRich={true}
                defaultValue={defaultValue}
                imgUrl= "/api/site/image",
                fillUrl= "/api/site/annex",
                mdStyle={{height:'500px'}}
                mdRender= {mdParser}
            />
        </div>
    }
}

2. 展示器的使用

2.1 支持参数

| 名称 | 描述 | 类型 | 默认 | 备注 | | -------- | ----------------- | ------- | ----------- | :------------------------------------: | | isRich | 是否显示富文本 | Boolean | false | true：显示富文本；false：显示 markdown | | value | 内容 | string | null | | | mdRender | markdown 渲染规则 | | markdown-it | 需要传入整个markdown-it |

2.2 基本使用实例

const mdParser = new MarkdownIt({
  breaks: true, // 转换段落里的 '\n' 到 <br>。
  linkify: true, // 将类似 URL 的文本自动转换为链接。
  typographer: true, // 启用一些语言中立的替换 + 引号美化
  html: true,
  highlight: function(str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (__) {}
    }
    return ""; // 使用额外的默认转义
  },
})
  .use(require("markdown-it-toc"))
  .use(markdownItMermaid)
  .use(require("markdown-it-xss"), {
    xss: {
      whiteList: {
        a: ["href", "title", "target"],
        img: ["src"],
      },
    },
  });

class ShowEditors extends React.Component {
  constructor(props) {
    super(props);
  }
render() {
    return (
        <Editors.ShowEditors isRich={true}  value="hhhhhhhhh" mdRender={mdParser} />
    )
  }
}