react中关于react-markdown-editor-lite、markdown-it 接入指南1、安装依赖 2、

1、安装依赖

          npm install react-markdown-editor-lite markdown-it --save

2、以下是具体的使用步骤

import React from "react";
import MarkdownIt from "markdown-it";
import MdEditor from "react-markdown-editor-lite";
import "react-markdown-editor-lite/lib/index.css";

// 初始化 markdown-it
const mdParser = new MarkdownIt({
  html: true,
  typographer: true
});

const ar2 = [
  {
    name:'我是图片1',
    url:'https://jkeckms.ryuiso.com/chat-bg.jpg'
  },
  {
    name:'我是图片2',
    url:'https://jkeckms.ryuiso.com/chat-bg.jpg'
  },
  {
    name:'我是图片3',
    url:'https://jkeckms.ryuiso.com/chat-bg.jpg'
  }
]
const ar1 = ['我是图片1', '我是图片2', '我是图片3'];
// 在这里做关键字替换
function customRender(text: string) {
    console.log('text----',text);
  let html = mdParser.render(text);

  // 比如：把 "我是图片" 替换成一张图片
  ar2.forEach(item=>{
    html = html.replace(new RegExp(item.name, 'g'), `<img src="${item.url}" alt="${item.name}" />`);
  })
  //
  // html = html.replace(/我是图片/g, `<img src="https://jkeckms.ryuiso.com/chat-bg.jpg" alt="我是图片" />`);

  // 你还可以做更多规则，比如匹配 [img:xxx] 这种自定义语法
  // html = html.replace(/\[img:(.+?)\]/g, (_, name) => `<img src="/images/${name}.png" />`);

  return html;
}

export default function App() {
  const [content, setContent] = React.useState(`# 15施工监测 我是图片## 15.2施工监测 15.2.1施工监测应编制专项施工监测方案。15.2.2施工监测点布置应根据现场安装条件和施工交叉作业情况，采取可靠的保护措施。应力传感器应根据设计要求和工况需要布置于结构受力最不利部位或特征部位。变形传感器或测点宜布置于结构变形较大部位。温度传感器宜布置于结构特征断面，宜沿四面和高程均匀分布。15.2.3 钢结构工程变形监测的等级划分及精度要求，应符合表 15.2.3的规定。15.2.4变形监测方法可按表15.2.4选用，也可同时采用多种方法进行监测。应力应变宜采用应力计、应变计等传感器进行监测。 <html><body><table><tr><td rowspan="2"></td><td colspan="2">垂直位移监测</td><td>水平位移监测</td><td rowspan="2"></td></tr><tr><td>变形观测点的 高程中误差 （mm）</td><td>相邻变形观测 点的高差中</td><td>变形观测点的 点位中误差 (mm)</td></tr><tr><td>一等</td><td>0.3</td><td>0.1</td><td>1.5 建筑等</td><td>空间结构、高耸构筑物、工业</td></tr><tr><td>二等</td><td>0.5</td><td>0.3</td><td>3.0 建筑等</td><td>空间结构、高耸构筑物、工业</td></tr><tr><td>三等</td><td>1. 0</td><td>0.5</td><td>6.0</td><td>构、高耸构筑物、工业建筑等</td></tr></table></body></html> <html><body><table><tr><td>类别</td><td>监测方法</td></tr><tr><td>水平变形监测</td><td>线法、引张线法、激光准直法、精密测（量）距、伸缩仪法、多</td></tr><tr><td>垂直变形监测</td><td>水准测量、液体静力水准测量、电磁波测距三角高程测量等</td></tr><tr><td>三维位移监测</td><td>全站仪自动跟踪测量法、卫星实时定位测量法等</td></tr><tr><td>主体倾斜</td><td>经纬仪投点法、差异沉降法、激光准直法、垂线法、倾斜仪、 电垂直梁法等</td></tr><tr><td>挠度观测</td><td>垂线法、差异沉降法、位移计、挠度计等</td></tr></table></body></html> 15.2.5监测数据应及时采集和整理，并应按频次要求采集，对漏测、误测或异常数据应及时补测或复测、确认或更正，15.2.6应力应变监测周期，宜与变形监测周期同步。 15.2.7 在进行结构变形和结构内力监测时，宜同时进行监测点的温度、风力等环境量监测。15.2.8监测数据应及时进行定量和定性分析。监测数据分析可采用图表分析、统计分析、对比分析和建模分析等方法。15.2.9需要利用监测结果进行趋势预报时，应给出预报结果的误差范围和适用条件。### 本规范用词说明 1为便于在执行本规范条文时区别对待，对要求严格程度不同的用词说明如下：1）表示很严格，非这样做不可的用词：正面词采用“必须”，反面词采用“严禁”； 2）表示严格，在正常情况下均应这样做的用词：正面词采用“应”，反面词采用“不应”或“不得”； 3）表示允许稍有选择，在条件许可时首先这样做的用词：正面词采用“宜”，反面词采用“不宜”； 4）表示有选择，在一定条件下可这样做的用词，采用“可”。2条文中指明应按其他有关标准执行的写法为：“应符合……规定”或“应按……执行”。`);

  return (
    <MdEditor
      value={content}
      style={{ height: "500px" }}
      renderHTML={customRender}
      onChange={({ text }) => setContent(text)}
    />
  );
}

3、贴一下官方文档的地址 react-markdown-editor-lite： harrychen0506.github.io/react-markd… markdown-it： markdown-it.docschina.org/#%E5%AE%89%…