AceEditor使用 - 技术栈

1. 安装步骤

安装 react-ace

react-ace 是一个 React 组件库，允许你在 React 项目中使用 Ace Editor。

js 复制代码

npm install react-ace --save
yarn add react-ace --save

安装 ace-builds

ace-builds 包含 Ace Editor 的核心文件和模块。需要它来提供编辑功能。

js 复制代码

npm install ace-builds --save
yarn add ace-builds --save

2.使用 AceEditor

安装完这些包后，你可以在项目中进行引入并使用。

js 复制代码

import React, { useEffect, useRef } from 'react'
import AceEditor from 'react-ace'
//支持json格式
import 'ace-builds/src-noconflict/mode-json'
//支持java格式
import 'ace-builds/src-noconflict/mode-java'
////支持各种样式
import 'ace-builds/src-noconflict/theme-monokai'
// import 'ace-builds/src-noconflict/theme-twilight'
// import 'ace-builds/src-noconflict/theme-solarized_dark'
// import 'ace-builds/src-noconflict/theme-dracula'
// import 'ace-builds/src-noconflict/theme-chaos'
// import 'ace-builds/src-noconflict/theme-terminal'
// import 'ace-builds/src-noconflict/theme-gruvbox'
// 导入搜索框扩展
import 'ace-builds/src-noconflict/ext-searchbox'
//引入自定义样式
import '@/pages/lark/styles/aceEditor.scss'
const CustomeCanvas = observer((props: any) => {

    const aceEditorRef = useRef<any>()
    useEffect(() => {
    if (aceEditorRef && aceEditorRef.current) {
      // 加载aceEditor搜索
      const editor = aceEditorRef.current.editor
      editor.commands.addCommand({
        name: 'showSearchBox',
        bindKey: { win: 'Ctrl-F', mac: 'Command-F' },
        exec: () => {
          editor.execCommand('find')
        },
      })
    }
    }, [aceEditorRef, aceEditorRef.current])
    return (
        <AceEditor
          ref={aceEditorRef}
          mode="json"
          theme="monokai"
          name="code_editor"
          onChange={onChangeJsonParams}
          fontSize={14}
          showPrintMargin
          showGutter
          highlightActiveLine={false}
          value={jsonParams}
          wrapEnabled // 启用代码换行
          // readOnly    //是否支持编辑
          setOptions={{
            enableBasicAutocompletion: true,
            enableLiveAutocompletion: true,
            enableSnippets: true,
            showLineNumbers: true,
            tabSize: 2, // 空格
            printMargin: false, // 隐藏中间的边距线
          }}
          style={{ width: '100%', height: '830px' }}
        />
    )
})
export default CustomeCanvas

自定义样式

js 复制代码

.ace_editor .ace_line {
  line-height: 1.5; /* 设置行间距为1.5倍 */
}
//左侧序列号模块
.ace_gutter {
  background: #282c34;
  color: #7d8799;
}
.ace_layer .ace_gutter-layer .ace_folding-enabled {
  background: #282c34 !important;
  color: #7d8799 !important;
}
.ace_gutter-active-line .ace_gutter-cell {
  background: #282c34;
  color: #7d8799;
}
.ace-monokai .ace_gutter-active-line {
  background: #282c34;
  color: #7d8799;
}
.ace-monokai .ace_gutter {
  background: #282c34;
  color: #7d8799;
}
//右侧JSON数据展示模块
//整个模块背景色
.ace_scroller {
  background: #282c34;
  color: #7d8799;
  font-family: monospace;
}
//key
.ace_variable {
  color: #e06c75 !important;
}
//字符类型
.ace_string {
  color: #98c379 !important;
}
//Boolean类型
.ace-monokai .ace_constant.ace_character,
.ace-monokai .ace_constant.ace_language,
.ace-monokai .ace_constant.ace_numeric,
.ace-monokai .ace_constant.ace_other {
  color: #d19a66 !important;
}
//{}和[]的颜色
.ace_line_group {
  color: rgba(255, 255, 255, 0.6) !important; /* 白色，50%透明度 */
}
//选中数据的样式
.ace-monokai .ace_marker-layer .ace_selection {
  background-color: #72a1ff59;
  outline: 1px solid #457dff;
  border-radius: 0 !important;
}
.ace-monokai .ace_marker-layer .ace_selected-word {
  border: 1px solid #457dff;
  border-radius: 0 !important;
}