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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
从0搭建vue-cli4脚手架
Jun 17 Javascript
Vue实现简单的留言板
Oct 23 Javascript
微信小程序实现点赞业务
Feb 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
VFP与其他应用程序的集成
2006/10/09 PHP
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
MySql中正则表达式的使用方法描述
2008/07/30 PHP
PHP开发注意事项总结
2015/02/04 PHP
基于php编程规范(详解)
2017/08/17 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
Python 实现淘宝秒杀的示例代码
2018/01/02 Python
Python实现的简单计算器功能详解
2018/08/25 Python
简单了解Django ContentType内置组件
2019/07/23 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
LINUX下线程,GDI类的解释
2012/04/17 面试题
厂长岗位职责
2014/02/19 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
安全例会汇报材料
2014/08/23 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
地球一小时活动总结
2015/02/27 职场文书
家长会感言
2015/08/01 职场文书
2019求职信大礼包
2019/05/15 职场文书