react使用ace代码编辑器

最新推荐文章于 2024-08-10 07:36:03 发布

a堅強的泡沫

最新推荐文章于 2024-08-10 07:36:03 发布

阅读量363

点赞数 1

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

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

版权

实战经验专栏收录该内容

32 篇文章 1 订阅

订阅专栏

文章介绍了如何在Web应用中使用ACE编辑器，提供了两种方法：一是通过CDN引入，二是本地导入。同时，详细展示了如何设置编辑器的语言模式、主题，以及在React项目中使用react-ace组件的步骤，并强调了需要设置编辑器的高度和宽度。

摘要由CSDN通过智能技术生成

参考：ace官网使用指南，ace-builds，ace-cdn，react-ace，react-ace编辑器 —— 快速使用，最好用的web端代码文本编辑器ACE

方法一

<!-- 第一种：使用cdn上的资源 -->
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.14.0/ace.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.14.0/mode-golang.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.14.0/theme-twilight.js"></script>

<!-- 第二种：需要把ace-builds里面的src文件copy到自己本地目录下 -->
<script src="../static/ace/ace.js"></script>
<script src="../static/ace/mode-golang.js"></script>
<script src="../static/ace/theme-twilight.js"></script>

const editor = ace.edit('ace-editor');
ace.config.set('basePath', 'https://unpkg.com/ace-builds@1.4.6/src-noconflict');
// 设置语言和主题
editor.session.setMode('ace/mode/golang');
editor.setTheme('ace/theme/twilight');
// 设置值
editor.getSession().setValue(res?.result.extend_script);
// 读取值
editor.getSession().getValue();


// 必须得设置高度
<div id="ace-editor" style={{ height: 600 }} />

方法二

需要先安装库yarn add react-ace ace-builds。

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

<AceEditor
  name="ace-editor"
  mode="golang"
  theme="twilight"
  value={extendCode}
  onChange={(value: string) => setExtendCode(value)}
  style={{ height: 600, width: '100%' }} // 必须得设置宽高
/>