「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> ) } } 複製代碼