Author: Li Jundong

How to use tui.Editor elegantly in React projects

Yapi uses tui. Editor as a document editor for the system, used for editing interface remarks and wiki modules. If we need to make some adjustments to the editor, we will realize that the previous writing method is not very maintainable. With the optimization brought by [email protected], we can easily make an upgrade.

[email protected]

For more information about [email protected], follow the links below:

  • 2.0 Optimization items
  • X -> 2. X Upgrade Guide

The development aspects can be summarized in the following three points:

  • The NPM package changes to the @toasts-UI space
  • Ext was changed to plugin and split from the core library as a separate NPM package
  • 2. X provides React and Vue encapsulation. The encapsulation logic is relatively simple, but it is simpler for development

demand

The above three points are what we need to pay attention to in the process of migration 2.x, and we need to sort out our needs before we start:

  • The editor needs to support syntax highlighting, color selection, tables, video plug-ins, and file uploads
  • The project should be wrapped around the Editor and Viewer, and the Editor configuration should be converged for easy maintenance

For video plug-ins, see the previous tui.Editor video embed plug-in

Transform the source code

// Encapsulate Editor import React from 'React' import {Editor as TuiEditor} from '@toasts-ui /react-editor' // import plugin 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 '@toads-ui /editor-plugin-color-syntax' import videoPlugin from '@leeonfield/editor-plugin-video' // import language package import '@ toast - UI/editor/dist/i18n/useful - cn' / / introduce style 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/lot. CSS / / optional: From highlight. Js selected some common syntax support import javascript from 'highlight. Js/lib/languages/javascript' import bash the 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=" Input document content "useCommandShortcut={false} // hooks={{// addImageBlobHook: function(blob, callback) { // uploadBlob(blob, function(imgUrl) { // callback(imgUrl, blob.name) // }) // return false // }, // }} plugins={plugins} {... Props} ref={ref} />)) // package Viewer import React from 'React' import {Viewer as TuiViewer} from '@toasts-ui /react-editor' // import codeSyntaxHighlight from' @toasts-ui/editor-plugin-code-highlight 'import tableMergedCell from '@toast-ui/editor-plugin-table-merged-cell' import hljs from 'highlight.js' import videoPlugin from '. / videoPlugin / / introduce style 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/lot. CSS' / / optional: From highlight. Js selected some common syntax support import javascript from 'highlight. Js/lib/languages/javascript' import bash the 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} /> ))Copy the code

When using plug-ins, you simply import the wrapped components and get an instance of the Editor through ref

// The Editor plugin uses 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() // Once you've got the instance, you can call the official API, // getHtml const HTML = this.editor.gethtml () // getMarkdown const markdown = this.editor.getmarkdown ()} render() { return ( <div> <Editor initialValue={this.state.markdown} ref={this.editorRef} /> </div> ) } }Copy the code