Ace是一个功能非常强大的编辑器。它实现了语法着色,缩进,代码提示功能。且具有大量的主题,支持大量语言。
官网地址:https://ace.c9.io/ Github: https://github.com/ajaxorg/ace/ vue版:https://github.com/chairuosen/vue2-ace-editor
<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>
<pre id="code" class="ace_editor" style="min-height:400px">
<textarea class="ace_text-input"></textarea>
</pre>
<script>
//初始化对象
editor = ace.edit("code");
//设置风格和语言(更多风格和语言,请到github上相应目录查看)
theme = "monokai"
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")
//启用提示菜单
ace.require("ace/mode/java");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
</script>