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('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>
<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都有一股自豪感！以下是我的微信订阅号二维码，感兴趣的可以交流沟通！

AceEditor使用小结相关推荐

【阶段小结】协同开发——这学期的Git使用小结
[阶段小结]协同开发--这学期的Git使用小结一.Git简介 1. Git简单介绍 2. Git工作流程以及各个区域 3. Git文件状态变化二.Git安装&Git基本配置三.个人踩坑 ...
正则表达式(括号)、[中括号]、{大括号}的区别小结
正则表达式(括号).[中括号].{大括号}的区别小结 </h1><div class="clear"></div><div class=& ...
php中$_REQUEST、$_POST、$_GET的区别和联系小结
php中$_REQUEST.$_POST.$_GET的区别和联系小结作者: 字体:[增加减小] 类型:转载 php中有$_request与$_post.$_get用于接受表单数据,当时他们有何种区 ...
c cin.get()的用法小结_c语言中static 用法
static在c里面可以用来修饰变量,也可以用来修饰函数. 先看用来修饰变量的时候.变量在c里面可分为存在全局数据区.栈和堆里.其实我们平时所说的堆栈是栈而不是堆,不要弄混. int a ; int ...
linux 压缩文件夹格式,Linux下常见文件格式的压缩、解压小结
Linux下常见文件格式的压缩.解压小结 .tar 解包: tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!) ...
设计模式：简单工厂、工厂方法、抽象工厂之小结与区别
简单工厂,工厂方法,抽象工厂都属于设计模式中的创建型模式.其主要功能都是帮助我们把对象的实例化部分抽取了出来,优化了系统的架构,并且增强了系统的扩展性. 本文是本人对这三种模式学习后的一个小结以及对他 ...
flash 入门课知识小结
一. 几种类型帧的小结:(关键帧.空白关键帧.普通帧) 1. 特点帧--是进行flash动画制作的最基本的单位,每一个精彩的flash动画都是由很多个精心雕琢的帧构成的,在时间轴上的每一帧都可以 ...
Eigen/Matlab 使用小结
文章目录 [Eigen Matlab使用小结](https://www.cnblogs.com/rainbow70626/p/8819119.html) Eigen初始化 0.[官网资料](http: ...
MATLAB【十三】————仿真函数记录以及matlab变成小结
part one:matlab 编程小结. 1.char 与string的区别,char使用的单引号 '' ,string使用的是双引号"". 2.一般标题中的输出一定要通过 nu ...

AceEditor使用小结

AceEditor使用小结相关推荐

最新文章

热门文章