关于react.js:react版本markdown编辑器mdeditorrt支持ssr

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

// eg
const [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  = 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