ace.js在线代码编辑器实战

明月566

已于 2025-06-16 21:57:38 修改

阅读量1w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： js 文章标签：在线代码编辑器 js代码编辑器语法检测 ace.js ace.js在线代码编辑器

于 2020-05-21 22:07:37 首次发布

本文链接：https://blog.youkuaiyun.com/k741451/article/details/106266908

因项目需要引入在线代码编辑器，介绍了ACE开源代码编辑器，它可嵌入web页面或JavaScript应用，支持多种语言。详细说明了ace.js功能实现步骤，包括引入js、添加控件等，还提及保存时代码语法检测，最后分享了官网在线测试及遇到的语法校验数量问题的解决办法。

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

背景

项目需要，在一些场景，用户需要手动编写一些js脚本来实现自己的功能；前期一直用文本框显示，不便于编辑和查看。因此需要引入一个在线代码编辑器。效果如下：

ACE简介：

ACE是一个开源的、独立的、基于浏览器的代码编辑器，可以嵌入到任何web页面或JavaScript应用程序中。ACE支持超过40种语言语法高亮，缩进，代码提示功能且具有大量的主题；并能够处理代码多达404万行的大型文档。ACE开发团队称，ACE在性能和功能上可以媲美本地代码编辑器（如SublimeText、TextMate和Vim等）。

官方网址：https://ace.c9.io
Github地址：https://github.com/ajaxorg/ace

支持语言：java、javascript、json、jsp、markdown、mysql、nginx...

功能实现

1、引入js

方式一：下载源码

下载地址1：https://github.com/ajaxorg/ace-builds/

<!-- 代码编辑ace.js  本地-->
<script src="../js/ace/src-min/ace.js" type="text/javascript"></script>	
<script src="../js/ace/src-min/ext-language_tools.js" type="text/javascript"></script>

方式二：