react ace代码编辑器

a堅強的泡沫

已于 2023-02-10 18:11:51 修改

阅读量248

点赞数

分类专栏：实战经验文章标签： react.js 前端 javascript

于 2023-02-08 17:02:37 首次发布

本文链接：https://blog.csdn.net/weixin_43973415/article/details/128938888

版权

实战经验专栏收录该内容

32 篇文章 1 订阅

订阅专栏

1、安装
yarn add react-ace ace-builds
2、使用

import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-golang';
import 'ace-builds/src-noconflict/theme-twilight';

const editorRef = useRef(null);

const fetchData = async () => {
  try {
     // api
     // 需要手动设置值，组件的value不生效
     editorRef?.current?.editor?.getSession().setValue(res?.result?.extend_script);
     setExtendCode(res?.result?.extend_script);
  } catch (err) {
    console.warn('err:', err);
  }
};

<AceEditor
  name="ace-editor"
  mode="golang"
  theme="twilight"
  ref={editorRef}
  value={extendCode}
  onChange={(value: string) => setExtendCode(value)}
  style={{ height: 600, width: '100%' }}
/>