JavaScript建立一个语法高亮输入框实现思路


Posted in Javascript onFebruary 26, 2013

textarea元素已被广泛用于网页Web的IDE。通常网站自带的textarea编辑器不能满足我们的需求,作为一名开发者我们经常需要进行代码的在线编辑,高亮显示代码等,因此,通过其他的开源项目,我们可以添加一些实用的功能, 在这篇文章中,我将使用JavaScript库ACE来创建一个输入框效果。这是一个完全开源的脚本。该脚本允许开发人员创建支持语法高亮的输入框。然后你可以代码嵌入到网站中的任何地方
下载库 首先我们需要Github上下载ACE代码。 下载完成后解压缩,在你的header部分引入js文件

<script src="src-min/ace.js" type="text/javascript" charset="utf-8"></script>

添加代码到编辑器
首先设置一个id为editor的div 然后在script里面调用ace.edit()方法,代码如下
var editor = ace.edit("editor"); 
editor.getSession().setMode("ace/mode/javascript");您可以重命名变量,为了方便起见,我定义了var editor作为变量,你也可以定义var demoeditor作为变量。第二行声明使用哪种类型的语言高亮显示。您可以从 src 目录选择其他语言集合。这里是一些支持支持的语言集合:

SQL
Ruby
SASS
PHP
Objectivec
Csharp
Java
JSON
使用额外的参数
editor.setTheme("ace/theme/dawn"); 
editor.getSession().setTabSize(2); 
editor.getSession().setUseWrapMode(true);

这3行代码是关于文本输入效果的,第一行改变代码默认的语法颜色和主题,在src目录下个有几十个新的主题,你可以从中任意选择
另外两个选项是关于用户体验。通常情况下,按一个键盘上的Tab键将输入4个空格,这里我设置成2个空格,此外,该文本在默认情况下将不会自动换行,超了会追加一个水平滚动条向外延伸。但使用这种方法setUseWrapMode(true),我们可以修复自动换行的问题。
还有一些其他的命令,你可以参考ACE向导。这里面包含了改变光标的位置,动态添加新内容,或复制的文本的全部内容。
CSS代码
#editor { 
margin-left: 15px; 
margin-top: 15px; 
width: 1000px; 
height: 400px; 
}

JavaScript建立一个语法高亮输入框实现思路
Javascript 相关文章推荐
javascript的内存管理详解
Aug 07 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 #Javascript
js 获取计算后的样式写法及注意事项
Feb 25 #Javascript
js调用webservice中的方法实现思路及代码
Feb 25 #Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 #Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 #Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 #Javascript
30分钟就入门的正则表达式基础教程
Feb 25 #Javascript
You might like
DC动漫人物排行
2020/03/03 欧美动漫
php模拟登陆的实现方法分析
2015/01/09 PHP
laravel model 两表联查示例
2019/10/24 PHP
js 单引号 传递方法
2009/06/22 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
Djang中静态文件配置方法
2015/07/30 Python
python并发编程之线程实例解析
2017/12/27 Python
django数据库自动重连的方法实例
2019/07/21 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
numba提升python运行速度的实例方法
2021/01/25 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
企业新年寄语
2014/04/04 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
异地恋情人节寄语
2015/02/28 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
JavaScript实现简单计时器
2021/06/22 Javascript