文章转自 http://www.cnblogs.com/HansBug/p/6546606.html
身为一个早已退役的Oier，当然忘不了当年一个个OJ页面上的代码显示和代码编辑器。
其中，洛谷使用的ACE Editor就是之一，非常的简洁美观。以及实际上在前端页面上搭建一个ACE Editor也是一件非常容易的事
在一般情况下，我们需要引入的js库是两个：ace.js，ext-language_tools.js
接下来就是按照ACE Editor的官方API指示进行搭建（如果看着有点迷的话，简易入门在此）
（注：经笔者测试官方demo仍然存在一些问题，笔者参考了几个相关的OJ的前端代码作此总结归纳）
代码如下（含注释）：
<!DOCTYPE html><html> <head> <title>Demo of ACE Editor</title> <!--导入js库--> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/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" style="min-height:400px"><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 = "c_cpp" editor.setTheme("ace/theme/" + theme); editor.session.setMode("ace/mode/" + language); //字体大小 editor.setFontSize(18); //设置只读（true时只读，用于展示代码） editor.setReadOnly(false); //自动换行,设置为off关闭 editor.setOption("wrap", "free") //启用提示菜单 ace.require("ace/ext/language_tools"); editor.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true }); </script>
</body></html>
效果图（纯本机测试，Notepad++ + Firefox）：
以上代码经过了笔者的亲自测试和精简，希望能够帮到想要快速搭建代码编辑器的码农们^_^
转载于:https://www.cnblogs.com/chengxu931106/p/7196271.html
相关资源：ace editor