web端代码⽂本编辑器ACE
ace.js，这是⼀个⽤JavaScript编写的独⽴代码编辑器。⽀持超过120种语⾔的语法⾼亮，超过20个不同风格的主题，同时还⽀持实时语法检查，⾃定义快捷键绑定，代码折叠，搜索替换，⾃动缩进等等功能
项⽬地址为：
我主要⽤它来替换表单中的textarea标签，以及实现在⽹页上修改⽂件的展⽰
基本使⽤
这个项⽬引⼊⾮常简单，只需要引⼊⼀个ace.js⽂件即可，然后实例化即可
// 引⼊js⽂件
<script src="/static/js/ace.js"></script>
<pre id="content" ></pre>
// 实例化编辑器
var editor = ace.edit("content");
github上除了源码⽂件外，ace还贴⼼的准备了编译好的项⽬⽂件，以⽅便⽤户使⽤，我们只需要将编译好的⽂件⽬录copy到我们项⽬的js⽬录下即可，编译好的仓库地址是：
推荐同时引⼊ext-searchbox.js⽂件，这样可以在编辑器中直接使⽤ctrl+F快捷键进⾏搜索
基本配置
ace有许多的配置项可供选择，通过这些配置项可以打造⾃⼰的个性编辑器
你可以通过setTheme来设置主题，需要注意的是主题⽂件要存在，并且需要与ace.js同级，命名规则为theme-主题名.js
editor.setTheme("ace/theme/twilight")
默认情况下编辑器为纯⽂本模式，你可以通过setMode来设置编辑器对应的语⾔模式，例如你想让其匹配markdown，就可以像下边这样配置，同样需要语⾔模式的⽂件存在，⽂件与ace.js同级，命名规则为mode-语⾔模式.js
editor.session.setMode("ace/mode/markdown")
通过setFontSize可以设置编辑器内⽂本字体的⼤⼩
editor.setFontSize(14);
通过setTabSize可以设置制表符的长度
同时可以通过setUseSoftTabs将制表符变成对应长度的空格
editor.session.setUseSoftTabs(true);
如果你不想编辑，可以通过setReadOnly可以将编辑器设置为只读模式
editor.setReadOnly(true)
默认情况下ace编辑器中会有⼀道竖线标识打印的边距，可以通过setShowPrintMargin来控制其是否显⽰
editor.setShowPrintMargin(false);
编辑器操作
ace可以⽅便的对编辑器内的数据进⾏获取和写⼊，甚⾄可以只获取选中的内容，同时也能实现获取⾏数，跳转到⾏等操作
通过getValue可以获取到编辑器中的全部数据
如果编辑器内有部分数据被选中，则可以通过getSelectionRange来获取选中的部分内容
SelectionRange())
这在特性我实现SQL查询的功能中有⽤到，如果查询框内有多条SQL，可以选择其中⼀条SQL进⾏查询
通过setValue可以给编辑器初始化数据
当你想往编辑器插⼊数据时，可以通过insert在光标处插⼊数据
editor.insert('ops-coffee')
通过getLength可以获取到编辑器内数据的总⾏数
Length()
goLine则可以跳转到指定的⾏
通过getCursor可以获取到编辑器内光标的位置，输出结果为⼀个标识⾏和列的字典，像这样：{row:13,column:37} Cursor()
搜索与替换
ace还实现了强⼤的搜索和替换功能，可以单个替换也可以全部替换
通过find可以进⾏搜索
editor.find('ops-coffee', {
backwards: false,
wrap: false,
caseSensitive: false,
wholeWord: false,
regExp: false
});
find后边跟了两个参数，第⼀个为要搜索的内容，第⼆个为搜索配置的字典，字典内可以配置如下⼀些参数backwards: 是否反向搜索，默认为false
wrap: 搜索到⽂档底部是否回到顶端，默认为false
caseSensitive: 是否匹配⼤⼩写搜索，默认为false
wholeWord: 是否匹配整个单词搜素，默认为false
range: 搜索范围，要搜素整个⽂档则设置为空
regExp: 搜索内容是否是正则表达式，默认为false
start: 搜索起始位置
skipCurrent: 是否不搜索当前⾏，默认为false
通过findAll可以⾼亮显⽰全部搜索到的内容
editor.findAll();
findNext则可以查下⼀个搜索到的内容
editor.findNext();
findPrevious查上⼀个匹配的内容
editor.findPrevious();
通过replace可以对当前find查到的字符串进⾏替换
⽽通过replaceAll则可以对find查到的所有内容替换
需要注意的是，⽆论是replace还是replaceAll都需要配合find⼀起使⽤
监听变化
ace另⼀个强⼤的地⽅是实现了对编辑器的监听，除了可以监听内容的变化外，还能监听选中内容的变化，甚⾄是光标的变化
通过change可以监听到编辑器内容的变化
console.log('内容有变化')
});
changeSelection则可以监听到选择内容的变化
console.log('选择内容有变化')
});
连光标的变化都可以通过changeCursor监听到
代码编辑器怎么下载
console.log('监听光标的变化')
});
替换textarea
html中的textarea⽐较鸡肋，连最基本的换⾏都⽆法实现，所以我通常都会⽤ace来代替form表单中的textarea，但默认情况下submit⽆法⾃动获取pre标签的数据做提交，这该如何处理呢？
⼀种简单的⽅式就是将textarea隐藏，同时创建⼀个ace编辑器来取代他，然后检测编辑器内数据的变化⾃动给填充到textarea内，完整的例⼦就像下边这样
<form class="form-horizontal" id="modalForm_Content" method="post" action="">{% csrf_token %}
<div class="form-group">
<label class="col-md-2 control-label"> 内容</label>
<div class="col-md-9">
<textarea class="form-control" id="form_content" name="content" rows="20"></textarea>
<pre id="content" ></pre>
</div>
</div>
</form>
// 加载ace editor
var editor = ace.edit("content");
var textarea = $('textarea[name="content"]').hide();
textarea.Session().getValue());
});
⾮常完美的弥补了textarea的不⾜，简单好⽤且⾜够强⼤
原⽂地址：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。