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} />
    )
  }
}