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 cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
js实现简单的随机点名器
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
php session 预定义数组
2009/03/16 PHP
10 个经典PHP函数
2013/10/17 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
php curl批处理实现可控并发异步操作示例
2018/05/09 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
JS验证不重复验证码
2017/02/10 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
美术专业个人自我评价
2014/01/18 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
社区国庆节活动总结
2015/03/23 职场文书
获奖感言怎么写
2015/07/31 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技