「Yapi 改造计划四」升级 tui.editor@2.x

如何优雅的在 React 项目中使用 tui.editor

Yapi 使用 tui.editor 做为系统的文档编辑器，用于接口备注的编辑以及 wiki 模块，若是须要针对编辑器作一些调整，咱们就会意识到以前的写法可维护性不太友好，加之 tui.editor@2.x 带来的优化，能够顺手作一次升级。

关于 tui.editor@2.x

关于 tui.editor@2.x，能够经过下面的连接获取更多的信息：

• 2.0 优化项介绍
• 1.x -> 2.x 升级指南

涉及开发的部分能够总结为下面三点：

• npm 包更改到 @toast-ui 空间下
• ext 更改成 plugin，并从核心库中拆分，做为单独的 npm 包
• 2.x 提供了面向 React 和 Vue 的封装，封装逻辑比较简单，但对开发使用而言更简洁

需求

以上三点是咱们在迁移 2.x 过程当中须要注意的，开始动手前须要再梳理下咱们的需求：

• 编辑器须要支持语法高亮、颜色选择、表格、视频插件以及文件上传
• 项目应该针对 Editor、Viewer 进行封装，对编辑器配置进行收敛，便于维护

关于视频插件能够查看以前的 tui.editor 视频嵌入插件

改造源码

// 封装 Editor
import React from 'react'
import { Editor as TuiEditor } from '@toast-ui/react-editor'
// 引入插件
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight'
import hljs from 'highlight.js'
import tableMergedCell from '@toast-ui/editor-plugin-table-merged-cell'
import colorSyntax from '@toast-ui/editor-plugin-color-syntax'
import videoPlugin from '@leeonfield/editor-plugin-video'
// 引入语言包
import '@toast-ui/editor/dist/i18n/zh-cn'
// 引入样式
import 'codemirror/lib/codemirror.css'
import '@toast-ui/editor/dist/toastui-editor.css'
import 'tui-color-picker/dist/tui-color-picker.css'
import 'highlight.js/styles/github.css'
// 可选：从 highlight.js 中挑选一些常见语法进行支持
import javascript from 'highlight.js/lib/languages/javascript'
import bash from 'highlight.js/lib/languages/bash'
import c from 'highlight.js/lib/languages/c'
import cmake from 'highlight.js/lib/languages/cmake'
import java from 'highlight.js/lib/languages/java'
import json from 'highlight.js/lib/languages/json'
import less from 'highlight.js/lib/languages/less'
import css from 'highlight.js/lib/languages/css'
import php from 'highlight.js/lib/languages/php'
import go from 'highlight.js/lib/languages/go'
hljs.registerLanguage('javascript', javascript)
hljs.registerLanguage('java', java)
hljs.registerLanguage('bash', bash)
hljs.registerLanguage('c', c)
hljs.registerLanguage('cmake', cmake)
hljs.registerLanguage('json', json)
hljs.registerLanguage('css', css)
hljs.registerLanguage('less', less)
hljs.registerLanguage('php', php)
hljs.registerLanguage('go', go)
// 可选：自定义图片上传方法
// const { uploadBlob } = require('common/utils.js')
const plugins = [
  [codeSyntaxHighlight, { hljs }],
  tableMergedCell,
  [
    colorSyntax,
    {
      preset: [
        '#1abc9c',
        '#2ecc71',
        '#3498db',
        '#9b59b6',
        '#34495e',
        '#f1c40f',
        '#e67e22',
        '#e74c3c',
        '#ecf0f1',
        '#95a5a6',
      ],
    },
  ],
  videoPlugin,
]

export default React.forwardRef((props, ref) => (
  <TuiEditor height="500px" previewStyle="vertical" initialEditType="markdown" language="zh-CN" usageStatistics={false} placeholder="输入文档内容" useCommandShortcut={false} // hooks={{ // addImageBlobHook: function(blob, callback) { // uploadBlob(blob, function(imgUrl) { // callback(imgUrl, blob.name) // }) // return false // }, // }} plugins={plugins} {...props} ref={ref} /> )) 复制代码

// 封装 Viewer 
import React from 'react'
import { Viewer as TuiViewer } from '@toast-ui/react-editor'
// 引入插件
import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight'
import tableMergedCell from '@toast-ui/editor-plugin-table-merged-cell'
import hljs from 'highlight.js'
import videoPlugin from './videoPlugin'
// 引入样式
import 'codemirror/lib/codemirror.css'
import '@toast-ui/editor/dist/toastui-editor.css'
import 'tui-color-picker/dist/tui-color-picker.css'
import 'highlight.js/styles/github.css'
// 可选：从 highlight.js 中挑选一些常见语法进行支持
import javascript from 'highlight.js/lib/languages/javascript'
import bash from 'highlight.js/lib/languages/bash'
import c from 'highlight.js/lib/languages/c'
import cmake from 'highlight.js/lib/languages/cmake'
import java from 'highlight.js/lib/languages/java'
import json from 'highlight.js/lib/languages/json'
import less from 'highlight.js/lib/languages/less'
import css from 'highlight.js/lib/languages/css'
import php from 'highlight.js/lib/languages/php'
import go from 'highlight.js/lib/languages/go'
hljs.registerLanguage('javascript', javascript)
hljs.registerLanguage('java', java)
hljs.registerLanguage('bash', bash)
hljs.registerLanguage('c', c)
hljs.registerLanguage('cmake', cmake)
hljs.registerLanguage('json', json)
hljs.registerLanguage('css', css)
hljs.registerLanguage('less', less)
hljs.registerLanguage('php', php)
hljs.registerLanguage('go', go)

const plugins = [
  videoPlugin,
  [codeSyntaxHighlight, { hljs }],
  tableMergedCell,
]

export default React.forwardRef((props, ref) => (
  <TuiViewer plugins={plugins} {...props} ref={ref} /> )) 复制代码

使用插件时，引入封装的组件，经过 ref 获取 editor 实例便可

// Editor 插件使用
import React, { Component } from 'react'
import Editor from './components/Editor'

export default class Untitled-2 extends Component {
  constructor(props) {
    super(props)
    this.state = {
      markdown: ''
    }
    this.editorRef = React.createRef()
  }

  componentDidMount() {
    this.editor = this.editorRef.current.getInstance()
    // 获取到实例后，能够调用官方提供的 api，以下
    // 获取 HTML
    const html = this.editor.getHtml()
    // 获取 markdown
    const markdown = this.editor.getMarkdown()
  }

  render() {
    return (
      <div> <Editor initialValue={this.state.markdown} ref={this.editorRef} /> </div> ) } } 复制代码