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

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;
}

赞 (0)

相关推荐

  • JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】 原创

    JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】 原创

    本文实例讲述了JavaScript语法高亮库highlight.js用法.分享给大家供大家参考,具体如下: highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库可以用在博客系统中,其使用方法及其简单,几乎不需要任何学习成本,下面介绍highlight.js的使用. 1.获取highlight.js库,用户可以从官网获取: 地址:https://hig

  • php实现简单的语法高亮函数实例分析

    本文实例讲述了php实现简单的语法高亮函数.分享给大家供大家参考.具体分析如下: 这是一个php实现的简单语法高亮显示的函数,注意:这个函数设计的比较简单,可能对某些语法不能高亮显示,你可以自己扩充该函数的功能 function syntax_highlight($code){ // this matches --> "foobar" <-- $code = preg_replace( '/"(.*?)"/U', '"<span styl

  • 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子

    jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法. 使用说明 需要使用jQuery库文件 和AjaxFileUpload库文件 使用实例 一,包含文件部分 复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script> <scr

  • jQuery语法高亮插件支持各种程序源代码语法着色加亮

    jQuery语法高亮插件支持各种程序源代码语法着色加亮

    1) highlightjs Highlight.js能够对页面中的各种程序源代码语法着色加亮.支持的语言包括: •Python •Ruby •Perl •PHP •XML •HTML •CSS •Django •Javascript •VBScript •Delphi •Java •C++ •RenderMan (RSL and RIB) •SQL •SmallTalk •Axapta •1C •Ini •Diff •DOS .bat •Bash 2) google-code-prettify

  • 轻量级的原生js日历插件calendar.js使用指南

    使用说明: 需要引入插件calendar.js/calendar.min.js 须要引入calendar.css 样式表,可以自定义自己想要的皮肤 本日历插件支持cmd模块化 如下调用: 复制代码 代码如下: xvDate({ 'targetId':'date1',//时间写入对象的id 'triggerId':['date1','dateBtn1'],//触发事件的对象id 'alignId':'datesWrap1',//日历对齐对象 'format':'-',//时间格式 默认'YYYY-

  • 9个javascript语法高亮插件 推荐

    9个javascript语法高亮插件 推荐

    下面介绍的是一些纯javascript实现的语法高亮插件. 英文原文:http://www.webdesignbooth.com/9-useful-javascript-syntax-highlighting-scripts/ 1. SyntaxHighlighter我相信这个插件是我们使用多的,它支持超多的语言,如果遇到不支持的语法还支持自定义. 2. SHJSSHJS 是js语法高亮插件的代表,它支持很多编程语言,兼容Firefox 2 &3, IE 6 & 7, Opera 9.6,

  • JavaScript/jQuery 表单美化插件小结

    JavaScript/jQuery 表单美化插件小结

    Niceforms Niceforms是一款独立的表单美化工具,当前版本为2.0 官方主页:http://www.emblematiq.com/lab/niceforms/ 官方演示:http://www.emblematiq.com/lab/niceforms/demo/niceforms.html GitHub:https://github.com/emblematiq/Niceforms 使用方法,在页面头部引入以下脚本及样式即可: 复制代码 代码如下: <link href="ni

  • Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件

    从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下. 解决思路大致是两点,一是从LazyLoad本身的滤镜参数下手,发现有一个参数在IE6和IE7是可以用的,就是show,那么在IE6和IE7下用这个特效:二是IE8以上(包

  • 2016年最热门的15 款代码语法高亮工具，美化你的代码

    2016年最热门的15 款代码语法高亮工具，美化你的代码

    前言: 代码高亮很有用,特别是在需要在网站或者blog中显示自己编写的代码的时候,或者给其他人查看或调试语法错误的时候.我们可以将代码高亮,以便阅读者可以十分方便的读取代码块,增加用户阅读代码的良好体验. 语法高亮是文本编辑器用来显示文本的,特别是源代码,根据不同的类别来用不同的颜色和字体显示.这个功能有助于编写结构化的语言,比如编程语言,标记语言,这些语言的语法错误显示是有区别的.语法高亮并不会影响文本自身的意义,而且能很好的符合人们的阅读习惯. 目前,有很多免费而且有用的代码高亮脚本.这些脚

  • js 玩转正则表达式之语法高亮

    学了几天正则,差不多该总结整理写成果了,之前就想写语法高亮匹配来着,不过水平不够,看着例子都不理解. 那么我们来分析下两位大神 次碳酸钴 和 Barret Lee 语法高亮实现. 先说 Barret Lee 的这篇 <几个小例子教你如何实现正则表达式highlight高亮> 之前看的时候只觉的神奇,特别是下面那个一步一步分开匹配的例子,更是霸气测漏,不过作者也说了,分开只是为了演示方便,可以很直观的看到这一步匹配了什么,不然一步到位匹配完成,你都不知道发生了什么就处理完毕了.来看下他的正则 复

随机推荐