使用足够简单,功能足够强大,体验足够优秀

之前有一个系列文章介绍我在运维系统开发过程中用到的那些顺手的前端插件,总共发了四篇文章介绍了三个非常棒的插件,分别是bootstrap-duallistboxselect2datatables,今天再更此系列,让好东西让更多的人知道,受益!

本次介绍ace.js,这是一个用JavaScript编写的独立代码编辑器。支持超过120种语言的语法高亮,超过20个不同风格的主题,同时还支持实时语法检查,自定义快捷键绑定,代码折叠,搜索替换,自动缩进等等功能

项目地址为:https://ace.c9.io

我主要用它来替换表单中的textarea标签,以及实现在网页上修改文件的展示,例如之前配置中心Kerrigan文章中讲到的web端修改配置文件就用了ace

基本使用

这个项目引入非常简单,只需要引入一个ace.js文件即可,然后实例化即可

// 引入js文件
<script src="/static/js/ace.js"></script> <pre id="content" style="height:620px"></pre> // 实例化编辑器
var editor = ace.edit("content");

github上除了源码文件外,ace还贴心的准备了编译好的项目文件,以方便用户使用,我们只需要将编译好的文件目录copy到我们项目的js目录下即可,编译好的仓库地址是:https://github.com/ajaxorg/ace-builds

推荐同时引入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可以设置制表符的长度

editor.getSession().setTabSize(4);

同时可以通过setUseSoftTabs将制表符变成对应长度的空格

editor.session.setUseSoftTabs(true);

如果你不想编辑,可以通过setReadOnly可以将编辑器设置为只读模式

editor.setReadOnly(true)

默认情况下ace编辑器中会有一道竖线标识打印的边距,可以通过setShowPrintMargin来控制其是否显示

editor.setShowPrintMargin(false);

编辑器操作

ace可以方便的对编辑器内的数据进行获取和写入,甚至可以只获取选中的内容,同时也能实现获取行数,跳转到行等操作

通过getValue可以获取到编辑器中的全部数据

editor.getSession().getValue()

如果编辑器内有部分数据被选中,则可以通过getSelectionRange来获取选中的部分内容

editor.session.getTextRange(editor.getSelectionRange())

这在特性我实现SQL查询的功能中有用到,如果查询框内有多条SQL,可以选择其中一条SQL进行查询

通过setValue可以给编辑器初始化数据

editor.getSession().setValue("ops-coffee.cn")

当你想往编辑器插入数据时,可以通过insert在光标处插入数据

editor.insert('ops-coffee.cn')

通过getLength可以获取到编辑器内数据的总行数

editor.session.getLength()

goLine则可以跳转到指定的行

editor.gotoLine(37)

通过getCursor可以获取到编辑器内光标的位置,输出结果为一个标识行和列的字典,像这样:{row:13,column:37}

editor.selection.getCursor()

搜索与替换

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查找到的字符串进行替换

editor.replace('ops-coffee.cn');

而通过replaceAll则可以对find查找到的所有内容替换

editor.replaceAll('ops-coffee.cn');

需要注意的是,无论是replace还是replaceAll都需要配合find一起使用

监听变化

ace另一个强大的地方是实现了对编辑器的监听,除了可以监听内容的变化外,还能监听选中内容的变化,甚至是光标的变化

通过change可以监听到编辑器内容的变化

editor.getSession().on('change', function(e) {
console.log('内容有变化')
});

changeSelection则可以监听到选择内容的变化

editor.getSession().selection.on('changeSelection', function(e) {
console.log('选择内容有变化')
});

连光标的变化都可以通过changeCursor监听到

editor.getSession().selection.on('changeCursor', function(e) {
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" style="height:415px"></pre>
</div>
</div>
</form> // 加载ace editor
var editor = ace.edit("content");
var textarea = $('textarea[name="content"]').hide();
editor.getSession().on('change', function(){
textarea.val(editor.getSession().getValue());
});

非常完美的弥补了textarea的不足,简单好用且足够强大


相关文章推荐阅读:

最好用的web端代码文本编辑器ACE的更多相关文章

  1. 移动端富文本编辑器artEditor

    摘要: 由于手机上打字比较慢,并不适合长篇大论的文章,所以移动端的富文本编辑器很少.artEditor是一款基于jQuery的移动端富文本编辑器,支持插入图片,后续完善其他功能. 插件地址:https ...

  2. web端代码提示

    web端代码提示 这个功能是基本完成了,但是与需求不一致.但是废弃挺可惜的,所以就单独拿出来作为一个例子记录一下. 其中还包括了,java代码的自动编译和执行,在web端显示执行结果. 下载链接: h ...

  3. JS代码高亮编辑器 ace.js

    JS代码高亮编辑器 ace.js 字数254 阅读2 评论0 喜欢0 瞎扯 ace 是 js 实现的代码编辑器 编译打包之后的 ACE 代码 官网,未提供编译好的文件 ACE 拥有的特点 语法高亮超过 ...

  4. web 常用富文本编辑器

    1. 百度家的 UEditor  官网地址http://ueditor.baidu.com/website/;在线演示地址:http://ueditor.baidu.com/website/onlin ...

  5. 富文本编辑器实现从word中复制图片(外挂)

    1问题 基于web的富文本编辑器的功能普遍较弱,而word是公认的宇宙第一好用的文档编辑器,所以许多人都习惯先在word中编辑,然后再将内容粘到web富文本编辑器中. 但是,这种操作有一个问题:图片带 ...

  6. JS代码格式化排版工具,web文本编辑器

    js格式化代码工具:http://www.cnblogs.com/blodfox777/archive/2008/10/09/1307462.html web文本编辑器 :http://www.div ...

  7. 重构wangEditor(web富文本编辑器),欢迎指正!

    提示:最新版wangEditor请参见:wangEditor.github.io 或者 https://github.com/wangfupeng1988/wangEditor 1. 前言 (下载源码 ...

  8. 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明

    ====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...

  9. 移动端强大的富文本编辑器richeditor-android

    代码地址如下:http://www.demodashi.com/demo/14883.html 一.运行效果图 二.代码具体实现 1.引入richeditor-android richeditor-a ...

随机推荐

  1. 洛谷$P4249\ [WC2007]$剪刀石头布 网络流

    正解:网络流 解题报告: 传送门$QwQ$ 题目大意其实就说有一个$n$个节点的有向完全图,然后部分边的方向已经给定了,要求确定所有边的方向使三元环数目有$max$.这里三元环的定义是说三条边的方向一 ...

  2. FlyweightPattern(享元模式)-----Java/.Net

    享元模式(Flyweight Pattern)主要用于减少创建对象的数量,以减少内存占用和提高性能.这种类型的设计模式属于结构型模式,它提供了减少对象数量从而改善应用所需的对象结构的方式

  3. 「洛谷P1343」地震逃生 解题报告

    P1343 地震逃生 题目描述 汶川地震发生时,四川XX中学正在上课,一看地震发生,老师们立刻带领x名学生逃跑,整个学校可以抽象地看成一个有向图,图中有n个点,m条边.1号点为教室,n号点为安全地带, ...

  4. oracle官网下载jdk跑不动太慢了,给出快速下载方式mac

    oracle官网下载jdk8跑不动太慢了,给出快速下载方式 之前在oracle官网下载jdk1.8实在速度太慢,只有20K左右的下载速度,有时候甚至不动,最关键的慢也就算了,cookie有效期有限,有 ...

  5. Linux下扫描服务器IP地址是否冲突(arp-scan)

    部署服务突然发现,连接的服务器断开了,因为服务器用户名密码是一样的,所以重新连接后,发现文件变了,跟之前不一样. 猜想是不是ip地址冲突了,两次连接的服务器不同. 网上查找资料说可以用工具扫描.工具: ...

  6. html 小游戏合集(1.0)

    最近做了个小游戏合集,有点沙雕,毕竟是1.0,将就看看. <!DOCTYPE html> <html> <head> <meta charset=" ...

  7. nginx 负载均衡及反向代理

    Nginx简介 Nginx是一款高性能的http 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器.由俄罗斯的程序设计师开发,官方测试nginx能够支支撑5万并发链接,并且cpu.内存 ...

  8. FullPage.js-基于 jQuery 的插件全屏滚动插件

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容, ...

  9. Ubuntu 19.10 安装 jupyter

    安装pip3 ubuntu 19.10 已经没有python了,取代的是python3. 执行sudo apt install python3-pip安装pip3 安装jupyter 执行sudo p ...

  10. 76.纯 CSS 创作一组单元素办公用品

    原文地址:https://segmentfault.com/a/1190000015607676 学习后效果地址:https://scrimba.com/c/c8PQ3PTB 感想:利用css的制图. ...