md-editor-rt是前段时间学习vue3时开发的一个vue3版本编辑器md-editor-v3的同系列我的项目，它是react版本的，因为vue3版本的也是应用tsx实现的，所以react版本的代码相差不大。

作者的博客前端内容是应用nextjs开发的，而内容治理又是应用vue开发的，提取编辑文章和内容渲染的性能造成了这个我的项目。

1. 预览

1.1 性能预览

  1. 快捷插入内容工具栏、编辑器浏览器全屏、页面内全屏等；
  2. 内置的红色主题和暗黑主题，反对绑定切换；
  3. 反对快捷键插入内容；
  4. 反对应用 prettier 格式化内容（应用 CDN 形式引入，只反对格式化 md 内容，可在代码内设置敞开）；
  5. 反对多语言，反对自行扩大语言；
  6. 反对复制粘贴上传图片，图片裁剪上传；
  7. 反对渲染模式（不显示编辑器，只显示 md 预览内容，无额定监听）；
  8. 反对ssr，反对在nextjs中应用；

1.2 在线预览

文档与在线预览：传送门

1.3 图片预览

默认模式

暗黑模式

2. 根本应用

react版本目前没有导出umd版本。

2.1 惯例单页利用

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文本渲染内容而非加载整个编辑器，上面的例子即是应用仅预览模式的状况。

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

从写法来讲，没有区别，值得注意的是，服务端渲染时最好提供editorId属性，因为默认状况下编辑器会随机生成editorId，所以会造成服务端的html内容和客户端渲染的html内容不统一而提醒谬误（该问题在nextjs根底环境中能够重现）。

2.3 题目导航实现

react版本最后就提供了onGetCatalog属性，在编辑器每一次render后会调用该办法，将markdown内容中的题目作为列表传递回来，构造如下：

interface HeadList {  text: string;  level: 1 | 2 | 3 | 4 | 5 | 6;}// egconst [heads, setHeads] = useState<HeadList>([{ text: '预览', level: '2' }]);

在作者的博客开源blog-template-nextjs中，曾经基于antd封装了导航菜单，应用相当简略：

import Topicfy from '@/Topicfy';// 将`onGetCatalog`获得的题目列表间接赋值到`Topicfy`组件即可<Topicfy heads={heads} />

3. 编辑器的性能演示

3.1 扩大库链接

编辑器扩大内容大多应用了cdn，思考了无外网状况，反对了内网链接扩大，演示（假如内部库都在根目录下）：

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，前者显示数组中的全副，后者屏蔽数组中的全副，后者的权重更大。上面是个参考：

案例不显示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 扩大语言

编辑器默认内置了中文和英文，并且两者都能够通过扩大api笼罩，该性能次要用来设置内容提醒，比方弹窗中的题目等。

扩大一门语言，咱们取名为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: '行内代码',      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'，就能够实现中文笼罩，以此类推。

3.4 主题切换

这一块绝对比较简单了，内置了暗黑主题和默认主题，通过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