Editor在线代码编辑器Ace

by · 2018年06月27日 · 1318 Words · ~3min reading time | Improve on


原文链接： Editor在线代码编辑器Ace

在线demo

开启自动补全

ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.setOptions({
    enableBasicAutocompletion: true //开启自动补全
});

1.初始化editor(）

ace.edit(domId[string])

domId: dom元素id字符串（不加#）
return : editor对象

举例

<style>
     #editor{
         width:600px;
         height:300px;
     }
</style>
<div id="editor"></div>
<script>
     var editor = ace.edit('editor');
</script>

注意：

必须给包裹元素设置宽高

2.设置主题

editor.setTheme(moduleId)

moduleId: theme文件路径

举例

editor.setTheme("ace/theme/monokai");
editor.setTheme("ace/theme/twilight");

3.设置编辑语言

editor.getSession().setMode("ace/mode/html");

4.获取编辑内容

editor.getValue();

5.设置编辑内容

var editorValue='';
editor.setValue(editorValue);

6.移动光标

editor.moveCursorTo(0, 0);//移动光标至第0行，第0列

7.编辑内容搜索

editor.execCommand('find');//与ctrl+f功能一致

备注：

   其实上面clone的源码包，可以node生成本地文档，但是好多资源地址还是国外的，想要加载完整的本地api还是得翻墙。换言之，都能翻墙了，你还要本地api干嘛。

    贴上ace官网地址：https://ace.c9.io/

效果：http://tool.jtahstu.com/compile/1
引入头文件

首先这里就是个大坑，js文件是不能乱引入的，虽然同样是ace.js，但是却大不相同，在上面第一个github的地址引入进去的话是不能用的，应为他竟然没有编译，你在逗我？第二个地址我没试，可能是可以的，你可以下下来尝试一下。

所以我们的解决方法就是从cdn引入，这里本人使用的是bootstrap中文网提供的cdn服务，主页是 http://www.bootcdn.cn/ ,本人也是经常使用这个cdn的，ACE项目的地址是 http://www.bootcdn.cn/ace/

ok，引入这四个文件

解释一下

第一个js文件是编辑器的最主要文件
第二个js文件是用来提供代码提示和自动补全的插件
第三个js文件看名字就知道，是为了兼容旧版本IE的，IE虽然恶心，但是谁叫他是操作系统中的爸爸呢
第四个js文件是编辑器的主题插件，这里采用monokai插件，为什么？好看啊

编辑器

<div class="" id="compile-editor-div">
<div id="compile-editor" name="" class=" form-control">
/**
 * Created on: 2016年09月16日 10:52:56
 * Author: Guest
 * Copyright (c) 2016, tool.usta.wiki , All Rights Reserved.
 */
#include &lt;stdio.h&gt;

int main()
{
   /* 我的第一个 C 程序 */
   printf(&quot;Hello, World! \n&quot;);
   return 0;
}
</div>
</div>

$('#compile-editor').height(600);

这个是我这个项目中的写法，自己写的话可以写的简单一点

像这样写就可以了，然后需要给个长宽
#editor {
position: absolute;
width: 500px;
height: 400px;

}
后面需要像这样写
require("ace/ext/old_ie");
ace.require("ace/ext/language_tools");
var editor = ace.edit("compile-editor");
editor.$blockScrolling = Infinity;
editor.setFontSize(16);
editor.session.setMode("ace/mode/c_cpp");
editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true
});
editor.setTheme("ace/theme/monokai");

当然啦本人这写的东西还是不少的，不然功能不完整，OK，一句一句解释
引入兼容IE的模块
引入代码补全和提示模块
以id为compile-editor的html元素创建编辑器
不知道，这个是解决ace.js的不知道为啥报错问题
设置编辑器里字体的大小，貌似这个可以在外面加CSS样式，但是我试了不行，所以这样写
设置代码补全和提示的语法为c/c++，这个需要为不同的语言写不同的模块，不然没有提示功能
这个到大括号结束是说设置编辑器是否自动补全，是否自动提示等
设置主题为monokai

editor options
selectionStyle: "line"|"text"
highlightActiveLine: true|false
highlightSelectedWord: true|false
readOnly: true|false
cursorStyle: "ace"|"slim"|"smooth"|"wide"
mergeUndoDeltas: false|true|"always"
behavioursEnabled: boolean
wrapBehavioursEnabled: boolean
// this is needed if editor is inside scrollable page
autoScrollEditorIntoView: boolean (defaults to false)
// copy/cut the full line if selection is empty, defaults to false
copyWithEmptySelection: boolean
useSoftTabs: boolean (defaults to false)
navigateWithinSoftTabs: boolean (defaults to false)
renderer options
hScrollBarAlwaysVisible: boolean
vScrollBarAlwaysVisible: boolean
highlightGutterLine: boolean
animatedScroll: boolean
showInvisibles: boolean
showPrintMargin: boolean
printMarginColumn: number (defaults to 80)
// shortcut for showPrintMargin and printMarginColumn
printMargin: false|number
fadeFoldWidgets: boolean
showFoldWidgets: boolean (defaults to true)
showLineNumbers: boolean (defaults to true)
showGutter: boolean (defaults to true)
displayIndentGuides: boolean (defaults to true)
fontSize: number or css font-size string
fontFamily: css font-family value
// resize editor based on the contents of the editor until the number of lines reaches maxLines
maxLines: number
minLines: number
// number of page sizes to scroll after document end (typical values are 0, 0.5, and 1)
scrollPastEnd: number|boolean
fixedWidthGutter: boolean (defaults to false)
theme: path to a theme e.g "ace/theme/textmate"
mouseHandler options
scrollSpeed: number
dragDelay: number
dragEnabled: boolean (defaults to true)
focusTimout: number
tooltipFollowsMouse: boolean
session options
firstLineNumber: number defaults to 1
overwrite: boolean
newLineMode: "auto" | "unix" | "windows"
useWorker: boolean
useSoftTabs: boolean
tabSize: number
wrap: boolean|number
foldStyle: "markbegin"|"markbeginend"|"manual"
mode: path to a mode e.g "ace/mode/text"
editor options defined by extensions
enableMultiselect: boolean # on by default
enableEmmet: boolean
enableBasicAutocompletion: boolean
enableLiveAutocompletion: boolean
enableSnippets: boolean
spellcheck: boolean
useElasticTabstops: boolean
Tags:
`