Ace在线代码编辑器使用
这边文章https://blog.csdn.net/liuxiao723846/article/details/106732401 介绍了Ace的使用,本文围绕Ace的api深入介绍其具体功能。
官网api使用文档:https://ace.c9.io/#nav=howto
1、基本配置:
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);
2、编辑操作
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()
3、搜索与替换
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
一起使用
4、监听变化
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的不足,简单好用且足够强大
Ace在线代码编辑器使用相关推荐
- WebRTC与Ace在线代码编辑器合作,实现实时协作编程
为什么80%的码农都做不了架构师?>>> 日期:2013-5-17 来源:GBin1.com 距离WebRTC真正的应用到一些很酷的应用中还有一段时日,但是即便是这样,很多开 ...
- Ace(在线代码编辑器)介绍、使用
介绍 Ace是一个用JavaScript编写的可嵌入代码编辑器.它与Sublime,Vim和TextMate等本机编辑器的功能和性能相匹配.它可以轻松地嵌入任何网页和JavaScript应用程序中. ...
- ace.js实现一个在线代码编辑器
背景 ACE简介: 功能实现 1.引入js 2.添加控件 3.初始化组件 4.保存时代码语法检测 5.效果图: 6.官网在线测试: 7.遇到的一些问题: 背景 项目需要,在一些场景,用户需要手动编写一 ...
- 127.0.0.1 zxt.php_php单文件版在线代码编辑器使用方法
这篇文章主要介绍了php单文件版在线代码编辑器,个人感觉相当不错,分享给大家,需要的朋友可以参考下 密码加密方式: * md5(自设密码+$ace) //$ace为cdn镜像地址 使用方法: * 1. ...
- CodeMirror 5.26.0 发布,在线代码编辑器
CodeMirror 5.26.0 已发布,CodeMirror 是一款"Online Source Editor",基于 Javascript,短小精悍,实时在线代码高亮显示,它 ...
- Codemirror-开源在线代码编辑器
Codemirror是一款"Online Source Editor",基于Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎 ...
- 20个最强的基于浏览器的在线代码编辑器 - OPEN资讯
20个最强的基于浏览器的在线代码编辑器 - OPEN资讯 20个最强的基于浏览器的在线代码编辑器
- (视频) 《快速创建网站》 3.2 WordPress多站点及Azure在线代码编辑器 - 扔掉你的ftp工具吧,修改代码全部云端搞定...
本文是<快速创建网站>系列的第6篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http://devopshub.cn/tag ...
- 在线代码编辑器 CodeMirror 配置说明 - javascript开发的代码语法高亮显示引擎
CodeMirror是一款在线的支持语法高亮的代码编辑器.官网: http://codemirror.net/ 下载后,解压开得到的文件夹中,lib下是放的是核心库和核心css,mode下放的是各种支 ...
- au如何关闭预览编辑器_在线IDE开发入门之从零实现一个在线代码编辑器
前言 3年前在AWS re:Invent 大会上AWS 宣布推出 Cloud9, 用于在云端编写.运行和调试代码,它可以直接运行在浏览器中,也就是传说中的 Web IDE.3年后的今天随着国内云计算的 ...
最新文章
- 双屏全屏跳回到主屏_双屏双倍乐趣?华硕灵耀X2 Duo笔记本评测
- Python识别表格图_使用Python究竟可以做什么?下面是Python的3个主要应用
- ReactNative开发环境
- sudo mysql压缩备份解压操作_高效管理文件之压缩及解压缩 .bz2 文件
- cmake编译多个文件夹_cmake多目录构建(二)
- DataGrid 首次进入页面时,不要加载任何数据
- jquery 李南江老师jquery和ajax视频教程
- GreenPlum分布式集群数据库实战培训课程(2天速成版)
- mysql实体完整性实现方法_mysql 完整性约束
- wp8.1 java_UWP tips (与wp8.1的不同)
- 原神迷城战线光界篇冰结试炼怎么过
- 在所难免!我也阳了。。
- 微信公众号--开发模式之用户关注后自动回复(Java实现)
- 关于克苏鲁神话的细节
- Eigen教程(1)
- 如何用python赚钱_一篇文章教你使用Python自动赚取支付宝积分,网友:发家致富?...
- java压缩文件或文件夹并返回流给前端
- 抖音上的战斗力测试软件,抖音战斗力测试app
- 51单片机——矩阵按键逐行扫描短按长按一直按方案1.2
- 三亚价格最公道的婚纱摄影机构——诠释视觉婚纱摄影
热门文章
- js margin作用到父元素_子元素的 margin-top 传递给了父元素
- 计算机专业怎么转行做建筑,【土木转行·续集】土建类同学转行计算机,什么时间转最合适?...
- weui开发文档_微信小程序云开发挑战赛 之体验
- 陈国荣 计算机科学,信息工程中计算机网络技术的应用-网络技术论文-计算机论文(10页)-原创力文档...
- 关于消息队列的一些问题
- IIS6上Ssl开发环境的搭建
- Linq Expression
- div加jquery实现iframe标签的功能
- FZU《C语言程序综合设计》
- MacPorts 命令集合