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与函数式编程解释
Apr 27 Javascript
把JS与CSS写在同一个文件里的书写方法
Jun 02 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
Oct 09 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
JavaScript 数组去重并统计重复元素出现的次数实例
Dec 14 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
JS异步处理的进化史深入讲解
Aug 25 Javascript
如何理解Vue简单状态管理之store模式
May 15 Vue.js
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使用array_fill定义多维数组的方法
2015/03/18 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
JS input 数字验证代码
2009/07/30 Javascript
js 分栏效果实现代码
2009/08/29 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
BootStrap Fileinput的使用教程
2016/12/30 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
[00:48]DOTA2国际邀请赛公开赛报名开始 扫码开启逐梦之旅
2018/06/06 DOTA
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
python3 深浅copy对比详解
2019/08/12 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
Django ModelForm操作及验证方式
2020/03/30 Python
Python包和模块的分发详细介绍
2020/06/19 Python
英国在线药房和在线医生:LloydsPharmacy
2019/10/21 全球购物
中学门卫岗位职责
2013/12/26 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
司法局火灾防控方案
2014/06/05 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
2014年行政部工作总结
2014/11/19 职场文书
2014年残联工作总结
2014/11/21 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
初中美术教学反思
2016/02/17 职场文书
vue ref如何获取子组件属性值
2022/03/31 Vue.js