使⽤AceEditor实现⼀个HTML在线代码编辑器
1、Ace Editor介绍
代码编辑器怎么下载Ace是⼀个⽤JavaScript编写的可嵌⼊代码编辑器。它与Sublime，Vim和TextMate等本机编辑器的功能和性能相匹配。它可以轻松地嵌⼊任何⽹页和JavaScript应⽤程序中。
2、配置参考博客
Ace editor中⽂⽂档：
3、Demo
<!DOCTYPE html>
<html>
<head>
<title>Demo of ACE Editor</title>
<!--导⼊js库-->
<script src="cdnjs.cloudflare/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="cdnjs.cloudflare/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--代码输⼊框（注意请务必设置⾼度，否则⽆法显⽰）-->
<pre id="code" class="ace_editor" ><textarea class="ace_text-input">
#include <cstdio>
int main(){
int n,m;
scanf("%d %d",&n,&m);
printf("%d",n+m);
return 0;
}
</textarea></pre>
<script>
//初始化对象
editor = ace.edit("code");
//设置风格和语⾔（更多风格和语⾔，请到github上相应⽬录查看）
theme = "clouds"
language = "java"
editor.setTheme("ace/theme/" + theme);
editor.session.setMode("ace/mode/" + language);
//字体⼤⼩
editor.setFontSize(18);
//设置只读（true时只读，⽤于展⽰代码）
editor.setReadOnly(false);
//⾃动换⾏，设置为off关闭
editor.setOption("wrap", "free")
//启⽤提⽰菜单
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
</script>
</body>
</html>
4、运⾏结果（还有代码提⽰功能哦。截图没截上去）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。