react中引入代码编辑器的方法

• 安装依赖

yarn add react-ace ace-builds

• 代码示例

// 核心组件
import AceEditor from 'react-ace'
// 引入对应的语言
import 'ace-builds/src-noconflict/mode-javascript'
//以下import的是风格
import 'ace-builds/src-noconflict/theme-eclipse'
// 代码提示
import 'ace-builds/src-noconflict/ext-language_tools'
import 'ace-builds/webpack-resolver'
import './code.less'
const basicCompletors = [
  {
    name: 'sqlQuery',
    value: 'sqlQuery()',
    score: 100,
    meta: 'sql查询'
  },
]
const CodeView = () => {
  
  const complete = editor => {
    //向编辑器中添加自动补全列表
    editor.completers.push({
      getCompletions: function (
        editor,
        session,
        pos,
        prefix,
        callback
      ) {
        callback(null, basicCompletors);
      }
    });
  }
  return (
    <div className='code-wrapper'>
      <AceEditor
        // name类似于id和key需要保持唯一性
        name='myCodeView'
        // 字体大小
        fontSize={16}
        style={{ width: '80%', height: '80%', minHeight: 80 }}
        mode='javascript'
        theme='eclipse'
        setOptions={{
          // 基础的自动完成
          enableBasicAutocompletion: true,
          // 实时自动完成
          enableLiveAutocompletion: true,
          // 代码块
          enableSnippets: true,
          // 显示行号
          showLineNumbers: true,
          // tab键两个空格
          tabSize: 2,
        }}
        onLoad={editor => complete(editor)}
      />
    </div>
  )
}
 
export default CodeView

• 样式

.code-wrapper {
  display: flex;
  height: calc(100vh);
  background: #f0f0f0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  justify-content: center;
  align-items: center;
}