簡介

Ace是一個用JavaScript編寫的可嵌入代碼編輯器憎茂。它與Sublime，Vim和TextMate等本機編輯器的功能和性能相匹配。它可以輕松地嵌入任何網(wǎng)頁和JavaScript應用程序中筋帖，React-Ace是Ace 的react 封裝版本迅耘，使用簡單贱枣，方便配合form表單使用。

安裝

npm install react-ace ace-builds
或者
yarn add react-ace ace-builds

業(yè)務(wù)背景

需要在前端頁面實現(xiàn)sql和javascript配置颤专，后臺解析纽哥，計算結(jié)果，（結(jié)算引擎）

react-ace 編輯器屬性

編輯器mode選項

mode.png

編輯器theme選項

theme.png

使用注意項

首先在全局或者react組件中引入mode和theme

// 引入對應的mode
import 'ace-builds/src-noconflict/mode-javascript'
// 引入對應的theme
import 'ace-builds/src-noconflict/theme-xcode'
// 如果要有代碼提示，下面這句話必須引入!!!
import 'ace-builds/src-noconflict/ext-language_tools'

在render中使用

    <AceEditor
      ref={editorInstance}
      placeholder={placeholder}
      mode="javascript"
      theme="xcode"
      name="UNIQUE_ID_OF_DIV"
      fontSize={14}
      defaultValue={defaultValue}
      editorProps={{
        $blockScrolling: false,
      }}
      onChange={onChange}
      onPaste={onChange}
      onLoad={complete}
      showPrintMargin={false}
      showGutter={true}
      highlightActiveLine={true}
     // 設(shè)置編輯器格式化和代碼提示 
      setOptions={{
        useWorker: false,
        enableBasicAutocompletion: true,
        enableLiveAutocompletion: true,
        // 自動提詞此項必須設(shè)置為true
        enableSnippets: true,
        showLineNumbers: false,
        tabSize: 2,
      }}
    />

如果要自定義提詞（此處有坑６А）

  const complete = (editor: any) => {
    editor.completers = [
      // 自己的代碼提示
      {
        getCompletions: function (
          editor: any,
          session: any,
          pos: any,
          prefix: any,
          callback: any
        ) {
          callback(null, completers)
        },
      },
      // 編輯器的代碼提示
      // ...editor.completers,
    ]
  }

此時如果想要動態(tài)改變提示詞數(shù)組桨吊，上面代碼是做不到的，現(xiàn)在是全量提示磕昼，即在onload加載完之后調(diào)用complete函數(shù)時延都，編輯器的代碼提示已經(jīng)被加載了，如果想要動態(tài)加載代碼提示棠耕，需要強制渲染編輯器余佛，react中我這樣搞的

 useEffect(() => {
    // !動態(tài)改變編輯器的代碼提示，必須重新設(shè)置
    complete(editorInstance.current.editor)
  }, [completers])

全部代碼如下：

import React, { useEffect, useRef } from 'react'
import AceEditor from 'react-ace'
import 'ace-builds/src-noconflict/mode-javascript'
import 'ace-builds/src-noconflict/theme-xcode'
import 'ace-builds/src-noconflict/ext-language_tools'
import 'ace-builds/webpack-resolver'
// 編輯器需要自定義時的數(shù)據(jù)結(jié)構(gòu)
// const completers = [
//   {
//     // name: 'name',
//     value: 'price',
//     // score: 100,
//     meta: '變量類-單價',
//   },
//   {
//     // name: 'name',
//     value: 'Waybill.price',
//     // score: 100,
//     meta: '變量類-單價',
//   },
// ]

const SqlEditor = (props: any) => {
  const editorInstance = useRef<any>() // 獲取編輯器實例
  const { placeholder, defaultValue, onChange, completers } = props
  const complete = (editor: any) => {
    editor.completers = [
      // 自己的代碼提示
      {
        getCompletions: function (
          editor: any,
          session: any,
          pos: any,
          prefix: any,
          callback: any
        ) {
          callback(null, completers)
        },
      },
      // 編輯器的代碼提示
      // ...editor.completers,
    ]
  }

  useEffect(() => {
    // !動態(tài)改變編輯器的代碼提示窍荧，必須重新設(shè)置
    complete(editorInstance.current.editor)
  }, [completers])
  return (
    <AceEditor
      ref={editorInstance}
      placeholder={placeholder}
      mode="javascript"
      theme="xcode"
      name="UNIQUE_ID_OF_DIV"
      fontSize={14}
      defaultValue={defaultValue}
      editorProps={{
        $blockScrolling: false,
      }}
      onChange={onChange}
      onPaste={onChange}
      onLoad={complete}
      showPrintMargin={false}
      showGutter={true}
      highlightActiveLine={true}
      setOptions={{
        useWorker: false,
        enableBasicAutocompletion: true,
        enableLiveAutocompletion: true,
        enableSnippets: true,
        showLineNumbers: false,
        tabSize: 2,
      }}
    />
  )
}

export default SqlEditor

最終實現(xiàn)效果如下：

image.png

bug處理

useWorker的時候辉巡，會報錯Unable to infer path to ace from script src, use ace.config.set('basePath', 'path') to enable dynamic loading of modes and themes or with webpack use ace/webpack-resolver， 需要引入：

import 'ace-builds/webpack-resolver'