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 相关文章推荐
Hutia 的 JS 代码集
Oct 24 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
js简单的表格添加行和删除行操作示例
Mar 31 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
jQuery 改变P标签文本值方法
Feb 24 jQuery
JavaScript中set与get方法用法示例
Aug 15 Javascript
vuex 中插件的编写案例解析
Jun 10 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
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
JQuery实现防止退格键返回的方法
2015/02/12 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
Python随机读取文件实现实例
2017/05/25 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
Python序列化pickle模块使用详解
2020/03/05 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
商铺租房协议书范本
2014/12/04 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
呐喊读书笔记
2015/06/30 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
MySQL基础(一)
2021/04/05 MySQL
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python