前端页面中使用代码编辑器
Ace是一个功能非常强大的编辑器。它实现了语法着色，缩进，代码提示功能。且具有大量的主题，支持大量语言。
示例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/ace/1.4.6/ace.js"></script>
<script src="https://cdn.bootcss.com/ace/1.4.6/ext-beautify.js"></script>
<script src="https://cdn.bootcss.com/ace/1.4.6/ext-language_tools.js"></script>
<script src="https://cdn.bootcss.com/ace/1.4.6/mode-javascript.js"></script>
<script src="https://cdn.bootcss.com/ace/1.4.6/theme-xcode.js"></script>
</head>
<body>
<div class="convertImage">
<!--代码输入框（注意请务必设置高度，否则无法显示）-->
<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");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
editor.setFontSize(16); //字体大小
document.getElementById("code").style.lineHeight="30px";//设置行高;
editor.setReadOnly(false);//设置只读（true时只读，用于展示代码）
//自动换行,设置为off关闭
editor.setOption("wrap", "free");
//启用提示菜单
ace.require("ace/ext/language_tools");
//以下部分是设置输入代码提示的
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
editor.setHighlightActiveLine(true); //代码高亮
editor.setShowPrintMargin(false);
//editor.setTheme('ace/theme/solarized_dark'); //引入模板
editor.getSession().setUseWorker(false);
editor.getSession().setUseWrapMode(true); //支持代码折叠
//editor.getSession().setMode('ace/mode/javascript'); //设置语言模式
editor.selection.getCursor(); //获取光标所在行或列
//editor.gotoLine(lineNumber); //跳转到行
editor.session.getLength(); //获取总行数
// editor.insert("Something cool");
editor.getSession().setUseSoftTabs(true);
</script>
</div>
</body>
</html>
网友评论