React中安装以及使用 AceEditor(代码编辑器)

开发那点事儿~

已于 2023-05-21 16:50:10 修改

阅读量1.5k

点赞数

分类专栏： React typescript 文章标签： react.js 编辑器前端

于 2023-05-18 18:01:16 首次发布

本文链接：https://blog.csdn.net/m0_58293192/article/details/130752396

版权

React 同时被 2 个专栏收录

10 篇文章

订阅专栏

typescript

9 篇文章

订阅专栏

文章讲述了在基于antdPro的项目中使用AceEditor插件遇到版本冲突问题，通过升级react版本得以解决。代码示例展示了如何导入和配置AceEditor，包括设置语言模式、主题、事件处理，以及如何清空编辑器内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本项目是基于 antd Pro 搭建开发的.在安装 AceEditor 插件时,会引起版本冲突,后来升级了react的版本才解决.

完整代码:

import React, {useRef, useState} from 'react';
import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/theme-monokai';// monokai的主题样式
import 'ace-builds/src-noconflict/ext-language_tools'; // 代码联想
import ace from 'ace-builds'; // 引入ace的库(脚本),里面有一些方法
import 'ace-builds/src-noconflict/mode-jsx';// 引入jsx的模式
import 'ace-builds/src-noconflict/mode-sql'; // 引入sql的模式

const sqlPort: React.FC = () => {
    const [jsx, setJsx] = useState<any>();

    return (
        <AceEditor
          mode='sql'// 代码编辑器的语言(sql语言) 需要什么语言上面就引入什么语言
          // mode='jsx'// 代码编辑器的语言(jsx语言) 需要什么语言上面就引入什么语言
          theme="monokai"
          name="sqlDetail"
          fontSize={16}
          showPrintMargin
          height="200px"
          width="82%"
          showGutter
          /*onChange={value => {
             console.log(value); // 输出代码编辑器内值改变后的值
          }}*/
          onBlur={e => {
            /*
              如果直接通过 e.target.value 来获取输入的值,会引发一个问题: 就是当你点击sql编辑器            
              的外部(也就是onBlur失去焦点时,会删除输入的内容)
              这里我用: editor.getValue() 来获取输入的值
            */
        
            var editor = ace.edit("sqlDetail"); // 获取编辑器
            // editor.getValue(); // 获取编辑器的值
            setJsx(editor.getValue()); // 保存编辑器的值
            setSortColumn(null); // 清空输出字段和参数名
            setDataSource2([]); // 清空请求参数
            setDataSource([]); // 清空信息项表格            
            GainSortColumn(dataSourceName?.value,editor.getValue());
            formRef?.current?.setFieldsValue({
              reqParam: undefined, // 清空请求参数
            });
           }}
           value={jsx}// 代码编辑器的值
           wrapEnabled //自动换行
           highlightActiveLine  //突出活动线
           enableSnippets  //启用代码段
           setOptions={{
             enableBasicAutocompletion: true,   //启用基本自动完成功能
             enableLiveAutocompletion: true,   //启用实时自动完成功能 （比如：智能代码提示）
             enableSnippets: true,  //启用代码段
             showLineNumbers: true,
             tabSize: 2,
           }}
           // annotations={[{ row: 0, column: 2, type: 'error', text: 'Some error.'}]} // 错误，警告
       />
    )
}

export default sqlPort;

想要清空编辑器中的内容时使用:

var editor = ace.edit("sqlDetail"); // 获取编辑器

editor.getValue(); // 获取编辑器的值
editor.setValue(''); // 清空编辑器内容