md-editor-rt是前段時間學習vue3時開發(fā)的一個vue3版本編輯器md-editor-v3的同系列項目，它是react版本的颊埃，因為vue3版本的也是使用tsx完成的价脾，所以react版本的代碼相差不大牧抵。

作者的博客前端內(nèi)容是使用nextjs開發(fā)的，而內(nèi)容管理又是使用vue開發(fā)的侨把，提取編輯文章和內(nèi)容渲染的功能形成了這個項目犀变。

1. 預覽

1.1 功能預覽

1. 快捷插入內(nèi)容工具欄、編輯器瀏覽器全屏秋柄、頁面內(nèi)全屏等获枝；
2. 內(nèi)置的白色主題和暗黑主題，支持綁定切換骇笔；
3. 支持快捷鍵插入內(nèi)容映琳；
4. 支持使用 prettier 格式化內(nèi)容（使用 CDN 方式引入，只支持格式化 md 內(nèi)容蜘拉，可在代碼內(nèi)設置關閉）萨西；
5. 支持多語言，支持自行擴展語言旭旭；
6. 支持復制粘貼上傳圖片谎脯，圖片裁剪上傳；
7. 支持渲染模式（不顯示編輯器持寄，只顯示 md 預覽內(nèi)容源梭，無額外監(jiān)聽）娱俺；
8. 支持ssr，支持在nextjs中使用废麻；

1.2 在線預覽

文檔與在線預覽：傳送門

1.3 圖片預覽

默認模式

image.png

暗黑模式

image.png

2. 基本使用

react版本目前沒有導出umd版本荠卷。

2.1 常規(guī)單頁應用

import React, { useState } from 'react';
import Editor from 'md-editor-rt';
import './index.less';

export default () => {
  const [md, setMd] = useState('');
  return <Editor theme="dark" modelValue={md} onChange={(v) => setMd(v)} />;
};

2.2 服務端渲染

服務端渲染的情況一般是提供markdown文本渲染內(nèi)容而非加載整個編輯器，下面的例子即是使用僅預覽模式的情況烛愧。

import React, { useState } from 'react';
import Editor from 'md-editor-rt';
import './index.less';

export default () => {
  const [md] = useState('# title');
  
  // 僅預覽模式只需提供md文本而不會改變文本
  return <Editor editorId="article-content" theme="dark" modelValue={md} previewOnly />;
};

從寫法來講油宜，沒有區(qū)別，值得注意的是怜姿，服務端渲染時最好提供editorId屬性慎冤，由于默認情況下編輯器會隨機生成editorId，所以會造成服務端的html內(nèi)容和客戶端渲染的html內(nèi)容不一致而提示錯誤（該問題在nextjs基礎環(huán)境中可以重現(xiàn)）沧卢。

2.3 標題導航實現(xiàn)

react版本最初就提供了onGetCatalog屬性蚁堤，在編輯器每一次render后會調(diào)用該方法，將markdown內(nèi)容中的標題作為列表傳遞回來但狭，結構如下：

interface HeadList {
  text: string;
  level: 1 | 2 | 3 | 4 | 5 | 6;
}

// eg
const [heads, setHeads] = useState<HeadList>([{ text: '預覽', level: '2' }]);

在作者的博客開源blog-template-nextjs中披诗，已經(jīng)基于antd封裝了導航菜單，使用相當簡單：

import Topicfy from '@/Topicfy';

// 將`onGetCatalog`取得的標題列表直接賦值到`Topicfy`組件即可
<Topicfy heads={heads} />

3. 編輯器的功能演示

3.1 擴展庫鏈接

編輯器擴展內(nèi)容大多使用了cdn立磁，考慮了無外網(wǎng)情況藤巢，支持了內(nèi)網(wǎng)鏈接擴展，演示（假設外部庫都在根目錄下）：

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

export default () => {
  const [text] = useState('');

  return (
    <MdEditor
      modelValue={text}
      highlightJs="/highlight.min.js"
      highlightCss="/atom-one-dark.min.css"
      prettierCDN="/standalone.js"
      prettierMDCDN="/parser-markdown.js"
      cropperJs="/cropper.min.js"
      cropperCss="/cropper.min.css"
      iconfontJs="/iconfont.js"
    />
  );
};

3.2 工具欄自定義

默認的全部工具欄息罗，并且每個功能都綁定了快捷鍵掂咒，如果需要選擇性顯示工具欄，提供了兩個api：toolbars和toolbarsExclude迈喉，前者顯示數(shù)組中的全部绍刮，后者屏蔽數(shù)組中的全部，后者的權重更大挨摸。下面是個參考：

案例不顯示github按鈕

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

export default () => {
  const [data] = useState({
    text: '',
    toobars: [
      'bold',
      'underline',
      'italic',
      'strikeThrough',
      'sub',
      'sup',
      'quote',
      'unorderedList',
      'orderedList',
      'codeRow',
      'code',
      'link',
      'image',
      'table',
      'revoke',
      'next',
      'save',
      'pageFullscreen',
      'fullscreen',
      'preview',
      'htmlPreview'
    ],
    toolbarsExclude: ['github']
  });

  return (
    <>
      <MdEditor modelValue={data.text} toolbars={data.toobars} />
      <MdEditor modelValue={data.text} toolbarsExclude={data.toolbarsExclude} />
    </>
  );
};

3.3 擴展語言

編輯器默認內(nèi)置了中文和英文孩革，并且兩者都可以通過擴展api覆蓋，該功能主要用來設置內(nèi)容提示得运，比如彈窗中的標題等膝蜈。

擴展一門語言，我們?nèi)∶麨?code>zh-NB

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

const languageUserDefined: { 'zh-NB': StaticTextDefaultValue } = {
  'zh-NB': {
    toolbarTips: {
      bold: '加粗',
      underline: '下劃線',
      italic: '斜體',
      strikeThrough: '刪除線',
      title: '標題',
      sub: '下標',
      sup: '上標',
      quote: '引用',
      unorderedList: '無序列表',
      orderedList: '有序列表',
      codeRow: '行內(nèi)代碼',
      code: '塊級代碼',
      link: '鏈接',
      image: '圖片',
      table: '表格',
      revoke: '后退',
      next: '前進',
      save: '保存',
      prettier: '美化',
      pageFullscreen: '瀏覽器全屏',
      fullscreen: '屏幕全屏',
      preview: '預覽',
      htmlPreview: 'html代碼預覽',
      github: '源碼地址'
    },
    titleItem: {
      h1: '一級標題',
      h2: '二級標題',
      h3: '三級標題',
      h4: '四級標題',
      h5: '五級標題',
      h6: '六級標題'
    },
    linkModalTips: {
      title: '添加',
      descLable: '鏈接描述：',
      descLablePlaceHolder: '請輸入描述...',
      urlLable: '鏈接地址：',
      UrlLablePlaceHolder: '請輸入鏈接...',
      buttonOK: '確定',
      buttonUpload: '上傳'
    },
    clipModalTips: {
      title: '裁剪圖片上傳',
      buttonUpload: '上傳'
    },
    copyCode: {
      text: '復制代碼',
      tips: '已復制'
    }
  }
};

export default () => {
  const [data] = useState({
    text: '',
    language: 'zh-NB',
    languageUserDefined
  });

  return (
    <MdEditor
      modelValue={data.text}
      language={data.language}
      languageUserDefined={data.languageUserDefined}
    />
  );
};

如果key = 'zh-CN'熔掺，就可以實現(xiàn)中文覆蓋饱搏，以此類推。

3.4 主題切換

這一塊相對比較簡單了置逻，內(nèi)置了暗黑主題和默認主題推沸，通過themeapi切換，demo如下：

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

export default () => {
  const [data] = useState({
    text: '',
    theme: 'dark'
  });
  return <MdEditor modelValue={data.text} theme={data.theme} />;
};

結尾

更多的更新請關注：md-editor-rt