Posted on 2013-03-20 21:35
小胡子 閱讀(341)
評(píng)論(0) 編輯 收藏 所屬分類:
JQuery
textarea元素已被廣泛用于網(wǎng)頁Web的IDE。通常網(wǎng)站自帶的textarea編輯器不能滿足我們的需求，作為一名開發(fā)者我們經(jīng)常需要進(jìn)行代碼的在線編輯，高亮顯示代碼等，因此，通過其他的開源項(xiàng)目，我們可以添加一些實(shí)用的功能， 在這篇文章中，我將使用
JavaScript庫
ACE來創(chuàng)建一個(gè)輸入框效果。這是一個(gè)完全開源的腳本。該腳本允許開發(fā)人員創(chuàng)建支持語法高亮的輸入框。然后你可以代碼嵌入到網(wǎng)站中的任何地方
下載庫 首先我們需要Github上下載ACE代碼。 下載完成后解壓縮，在你的header部分引入js文件
<script src="src-min/ace.js" type="text/javascript" charset="utf-8"></script>
添加代碼到編輯器
首先設(shè)置一個(gè)id為editor的div 然后在script里面調(diào)用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
使用額外的參數(shù)
editor.setTheme("ace/theme/dawn");
editor.getSession().setTabSize(2);
editor.getSession().setUseWrapMode(true);
這3行代碼是關(guān)于文本輸入效果的，第一行改變代碼默認(rèn)的語法顏色和主題，在src目錄下個(gè)有幾十個(gè)新的主題，你可以從中任意選擇
另外兩個(gè)選項(xiàng)是關(guān)于用戶體驗(yàn)。通常情況下，按一個(gè)鍵盤上的Tab鍵將輸入4個(gè)空格，這里我設(shè)置成2個(gè)空格，此外，該文本在默認(rèn)情況下將不會(huì)自動(dòng)換行，超了會(huì)追加一個(gè)水平滾動(dòng)條向外延伸。但使用這種方法setUseWrapMode（true），我們可以修復(fù)自動(dòng)換行的問題。
還有一些其他的命令，你可以參考ACE向?qū)?/span>。這里面包含了改變光標(biāo)的位置，動(dòng)態(tài)添加新內(nèi)容，或復(fù)制的文本的全部?jī)?nèi)容。
CSS代碼
#editor {
margin-left: 15px;
margin-top: 15px;
width: 1000px;
height: 400px; } 原文出自：
http://www.cnblogs.com/58top/archive/2013/01/28/building-a-syntax-highlighted-input-box-with-javascript.html