AceEditor使用小结

         之前用mirrorcode作为前台编辑器，但是缺少代码提醒等快捷键操作，使用起来非常不便。后来考虑使用AceEditor。在一般情况下，我们需要引入的js库是两个：ace.js，ext-language_tools.js接下来就是按照ACE Editor的官方API指示进行搭建（如果看着有点迷的话，简易入门在此，去网上下载ace的包，地址：https://github.com/ajaxorg/ace/downloads）

第一步：引用JS

<script type="text/javascript" src="../libs/ace/ace.js"></script>
<script type="text/javascript" src="../libs/ace/ext-language_tools.js"></script>

第二步：初始化对象，设置相应属性（记得引用show_own_source.js，后续有用）

<script>
			//初始化对象
			editor = ace.edit("code");//绑定dom对象
			theme = "chrome";//主题
			language = "javascript";//程序语言
			editor.setTheme("ace/theme/" + theme);//设置主题
			editor.getSession().setMode("ace/mode/javascript");//设置程序语言
 			editor.setFontSize(15);	//字体大小
 			document.getElementById("code").style.lineHeight="25px";//设置行高;
			editor.setReadOnly(false);//设置只读（true时只读，用于展示代码）
//			editor.setOptions({
//			    maxLines: "350px" //自适应高度
//			});
			//自动换行,设置为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(&#39;ace/theme/solarized_dark&#39;); //引入模板  
			editor.getSession().setUseWorker(false);  
			editor.getSession().setUseWrapMode(true); //支持代码折叠  
			//editor.getSession().setMode(&#39;ace/mode/javascript&#39;); //设置语言模式  
			editor.selection.getCursor(); //获取光标所在行或列
			//editor.gotoLine(lineNumber); //跳转到行
			editor.session.getLength(); //获取总行数
			// editor.insert("Something cool");
			editor.getSession().setUseSoftTabs(true);
</script>
<script src="./show_own_source.js"></script>

第三步：绑定容器

<div id = "code" class = "ace_editor" style = "height: 350px;min-height:inherit;max-height: 800px;"></div>

第四步：根据需要绑定初始化你要显示的html。以下是show_own_source.js种的源码。红色标注种可以绑定你要显示内容的html内容。当修改前端代码后，想运行最新的修改代码。那如何获取最新的内容呢？着难不倒我们，既然由el.env.editor.setValue(),那么就可以用el.env.editor.getValue()获取最新内容。

后续小编的主要精力放到GIS理论开发知识的大众化的道路了，通过浅显易懂的语言，结合多年行业应用开发，通过微信订阅号传播（每周更新三篇文章及相关GIS编码知识），为GIS的发展尽微博之力。终极目标是让GIS不再专业，让GIS更加大众，使得GIS深入各行业应用，让每位GISER都有一股自豪感！以下是我的微信订阅号二维码，感兴趣的可以交流沟通！