React項(xiàng)目中使用Markdown編輯器

一柒爸、需求說明

  • 項(xiàng)目中業(yè)務(wù)需要輸入數(shù)學(xué)公式热押,原先的富文本框編輯器解析不了西傀,經(jīng)過跟組長討論后決定采用Markdown類型的編輯器,以便解析和展示數(shù)學(xué)公式桶癣。查閱資料及實(shí)踐后拥褂,最終形成以下方案,記錄下來以供參閱牙寞。
  • 組建依賴:編輯器使用 for-editor饺鹃,內(nèi)容預(yù)覽及展示采用 react-markdown。數(shù)學(xué)公式支持及語法解析使用 remark-math间雀、rehype-katex悔详,數(shù)學(xué)公式的樣式展示需要 katex.min.css 文件支持,見下文惹挟。因?yàn)槿孕杞馕鲋拜斎氲母晃谋緝?nèi)容茄螃,所以引入 rehype-raw 解析HTML文本。

二连锯、組件樣式及目錄

  • 組件最終樣式:


    組件樣式.jpg
  • 目錄結(jié)構(gòu):


    目錄結(jié)構(gòu).jpg

三归苍、相關(guān)代碼及說明

  • index.js:編輯器的主體代碼,具體的屬性請(qǐng)查閱相關(guān)文檔运怖。
    • 預(yù)覽按鈕需手動(dòng)添加霜医,以 position 定位在編輯器上。
import React, { Fragment, useRef, useState } from 'react';
import { Button, Modal } from 'antd';
import ForEditor from 'for-editor';
import MdPreview from './md-preview';
import './index.less';

/** https://github.com/kkfor/for-editor
 * @param {string} value Markdown文本內(nèi)容
 * @param {() => void} onChange 更改內(nèi)容方法
 * @param {boolean} readOnly 只讀狀態(tài)
 */
function MdEditor({ value, onChange, readOnly = false }) {
  const [visible, setVisible] = useState(false); // 預(yù)覽彈框狀態(tài)
  const mdRef = useRef(null); // 編輯器ref

  // 工具欄菜單
  const toolbar = {
    h1: true, // h1
    h2: true, // h2
    h3: true, // h3
    h4: true, // h4
    img: true, // 圖片
    link: true, // 鏈接
    code: true, // 代碼塊
    // preview: true, // 預(yù)覽
    expand: true, // 全屏
    /* v0.0.9 */
    undo: true, // 撤銷
    redo: true, // 重做
    save: true, // 保存
    /* v0.2.3 */
    // subfield: true, // 單雙欄模式
  };

  // 上傳圖片
  // const addImg = (_file) => {
  //   mdRef.current.$img2Url(_file.name, 'file_url');
  // };

  return (
    <div className="label__md-editor">
      {readOnly ? <MdPreview content={value} /> : (
        <Fragment>
          <Button
            size="small"
            className="preview__md-button"
            onClick={() => setVisible(true)}
          >
            預(yù)覽
          </Button>
          <Modal
            title="Markdown內(nèi)容預(yù)覽"
            width="60%"
            okText="關(guān)閉"
            visible={visible}
            onOk={() => setVisible(false)}
            onCancel={() => setVisible(false)}
            cancelButtonProps={{ style: { display: 'none' } }}
          >
            <MdPreview content={value} />
          </Modal>

          <ForEditor
            placeholder="請(qǐng)輸入Markdown文本"
            height={160}
            ref={mdRef}
            lineNum={false}
            toolbar={toolbar}
            value={value}
            onChange={onChange}
            // addImg={_file => addImg(_file)}
          />
        </Fragment>
      )}
    </div>
  );
}

export default React.memo(MdEditor);
  • index.less:涉及樣式
.label__md-editor {
  position: relative;

  .preview__md-button {
    position: absolute;
    right: 44px;
    top: 11px;
  }

  .for-container textarea {
    height: 114%;
  }
}
  • md-preview.js:預(yù)覽組件
import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import rehypeRaw from 'rehype-raw';

/** https://blog.csdn.net/weixin_44589651/article/details/121044772
 * @param {string} content Markdown文本內(nèi)容
 */
export default React.memo(({ content }) => (
  <ReactMarkdown
    remarkPlugins={[remarkMath]}
    rehypePlugins={[rehypeKatex, rehypeRaw]}
  >
    {content}
  </ReactMarkdown>
));
  • 在項(xiàng)目的 index.ejs 或 inde.html 文件中引入公式解析樣式文件驳规,否則公式會(huì)亂掉
 <!-- 解析Markdown數(shù)學(xué)公式樣式 -->
  <link rel="stylesheet"  integrity="sha384-RZU/ijkSsFbcmivfdRBQDtwuwVqK7GMOw6IMvKyeWL2K5UAlyp6WonmB8m7Jd0Hn" crossorigin="anonymous">
  • package.json:組件涉及的依賴及版本
{
  "dependencies": {
    "antd": "3.26.16",
    "dva": "^2.6.0-beta.20",
    "for-editor": "^0.3.5", // Markdown編輯
    "react": "16.9.0",
    "react-dom": "16.9.0",
    "react-markdown": "7.1.0", // Markdown預(yù)覽
    "rehype-katex": "^6.0.2", // 數(shù)學(xué)公式katex語法
    "rehype-raw": "^6.1.1", // 支持HTML語法解析
    "remark-math": "^5.1.1" // 支持?jǐn)?shù)學(xué)公式
  },
}

參考資料

附文

  • 1. 預(yù)覽時(shí)遇到的報(bào)錯(cuò)

    • DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('percent<=0') is not a valid name.
    • 數(shù)據(jù):<p>TOP1% 0.1<percent<=0.25</p>
    • 原因:解析器把 <percent<=0 識(shí)別成了標(biāo)簽名
    • 解決:輸入數(shù)據(jù)時(shí),< >英文字母 之間加空格
    • 例如:<p>TOP1% 0.1 < percent <= 0.25</p>
  • 2. Markdown語法數(shù)學(xué)公式

    • $a^2$a^2
    • $$\frac{\partial f}{\partial x} = 2\,\sqrt{a}\,x$$
      \frac{\partial f}{\partial x} = 2\,\sqrt{a}\,x
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末署海,一起剝皮案震驚了整個(gè)濱河市吗购,隨后出現(xiàn)的幾起案子医男,更是在濱河造成了極大的恐慌,老刑警劉巖捻勉,帶你破解...
    沈念sama閱讀 222,807評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件镀梭,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡踱启,警方通過查閱死者的電腦和手機(jī)报账,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來埠偿,“玉大人透罢,你說我怎么就攤上這事」诮” “怎么了羽圃?”我有些...
    開封第一講書人閱讀 169,589評(píng)論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長抖剿。 經(jīng)常有香客問我朽寞,道長,這世上最難降的妖魔是什么斩郎? 我笑而不...
    開封第一講書人閱讀 60,188評(píng)論 1 300
  • 正文 為了忘掉前任脑融,我火速辦了婚禮,結(jié)果婚禮上缩宜,老公的妹妹穿的比我還像新娘肘迎。我一直安慰自己,他們只是感情好脓恕,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評(píng)論 6 398
  • 文/花漫 我一把揭開白布膜宋。 她就那樣靜靜地躺著,像睡著了一般炼幔。 火紅的嫁衣襯著肌膚如雪秋茫。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評(píng)論 1 314
  • 那天乃秀,我揣著相機(jī)與錄音肛著,去河邊找鬼。 笑死跺讯,一個(gè)胖子當(dāng)著我的面吹牛枢贿,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播刀脏,決...
    沈念sama閱讀 41,220評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼局荚,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起耀态,我...
    開封第一講書人閱讀 40,167評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤轮傍,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后首装,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體创夜,經(jīng)...
    沈念sama閱讀 46,698評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評(píng)論 3 343
  • 正文 我和宋清朗相戀三年仙逻,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了驰吓。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,912評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡系奉,死狀恐怖檬贰,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情喜最,我是刑警寧澤偎蘸,帶...
    沈念sama閱讀 36,572評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站瞬内,受9級(jí)特大地震影響迷雪,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜虫蝶,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評(píng)論 3 336
  • 文/蒙蒙 一章咧、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧能真,春花似錦赁严、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蝙泼,卻和暖如春程剥,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背汤踏。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評(píng)論 1 274
  • 我被黑心中介騙來泰國打工织鲸, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人溪胶。 一個(gè)月前我還...
    沈念sama閱讀 49,359評(píng)論 3 379
  • 正文 我出身青樓搂擦,卻偏偏與公主長得像,于是被迫代替她去往敵國和親哗脖。 傳聞我的和親對(duì)象是個(gè)殘疾皇子瀑踢,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容