此文章发布于61
个月前,部分信息可能已经过时
,请自行斟酌确认。
ACE
是一个开源的、独立的、基于浏览器的代码编辑器,可以嵌入到任何 web 页面或 JavaScript 应用程序中。微酷测试了下体验非常不错,强烈推荐。
官网:https://ace.c9.io
Github:https://github.com/ajaxorg/ace-builds/releases
1、下载 ace-builds 包,注意不是 ace 源码包
2、引用 src 开头的任意一个目录
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>ace editor demo</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<!-- 你的HTML代码 -->
<div style="width:500px;margin:50px auto;border:1px solid red" id="app">
<div id="editor">
function foo(items) {
var x = "All this is syntax highlighted";
return x;
}
</div>
</div>
<script src="ace/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/chrome");
editor.session.setMode("ace/mode/javascript");
</script>
</body>
</html>