JavaScript建立一個(gè)語(yǔ)法高亮輸入框?qū)崿F(xiàn)思路
更新時(shí)間：2013年02月26日 09:55:53 作者：
通常網(wǎng)站自帶的textarea編輯器不能滿(mǎn)足我們的需求比如高亮顯示代碼等,在這篇文章中，我將使用JavaScript庫(kù)ACE來(lái)創(chuàng)建一個(gè)輸入框效果,該腳本允許開(kāi)發(fā)人員創(chuàng)建支持語(yǔ)法高亮的輸入框,感興趣的你可不要錯(cuò)過(guò)了哈
textarea元素已被廣泛用于網(wǎng)頁(yè)Web的IDE。通常網(wǎng)站自帶的textarea編輯器不能滿(mǎn)足我們的需求，作為一名開(kāi)發(fā)者我們經(jīng)常需要進(jìn)行代碼的在線(xiàn)編輯，高亮顯示代碼等，因此，通過(guò)其他的開(kāi)源項(xiàng)目，我們可以添加一些實(shí)用的功能， 在這篇文章中，我將使用JavaScript庫(kù)ACE來(lái)創(chuàng)建一個(gè)輸入框效果。這是一個(gè)完全開(kāi)源的腳本。該腳本允許開(kāi)發(fā)人員創(chuàng)建支持語(yǔ)法高亮的輸入框。然后你可以代碼嵌入到網(wǎng)站中的任何地方
下載庫(kù) 首先我們需要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");您可以重命名變量，為了方便起見(jiàn)，我定義了var editor作為變量，你也可以定義var demoeditor作為變量。第二行聲明使用哪種類(lèi)型的語(yǔ)言高亮顯示。您可以從 src 目錄選擇其他語(yǔ)言集合。這里是一些支持支持的語(yǔ)言集合：
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)的語(yǔ)法顏色和主題，在src目錄下個(gè)有幾十個(gè)新的主題，你可以從中任意選擇
另外兩個(gè)選項(xiàng)是關(guān)于用戶(hù)體驗(yàn)。通常情況下，按一個(gè)鍵盤(pán)上的Tab鍵將輸入4個(gè)空格，這里我設(shè)置成2個(gè)空格，此外，該文本在默認(rèn)情況下將不會(huì)自動(dòng)換行，超了會(huì)追加一個(gè)水平滾動(dòng)條向外延伸。但使用這種方法setUseWrapMode（true），我們可以修復(fù)自動(dòng)換行的問(wèn)題。
還有一些其他的命令，你可以參考ACE向?qū)?。這里面包含了改變光標(biāo)的位置，動(dòng)態(tài)添加新內(nèi)容，或復(fù)制的文本的全部?jī)?nèi)容。
CSS代碼
#editor {
margin-left: 15px;
margin-top: 15px;
width: 1000px;
height: 400px;
}
下載庫(kù) 首先我們需要Github上下載ACE代碼。 下載完成后解壓縮，在你的header部分引入js文件
復(fù)制代碼 代碼如下:
<script src="src-min/ace.js" type="text/javascript" charset="utf-8"></script>
添加代碼到編輯器
首先設(shè)置一個(gè)id為editor的div 然后在script里面調(diào)用ace.edit()方法，代碼如下
復(fù)制代碼 代碼如下:
var editor = ace.edit("editor");
editor.getSession().setMode("ace/mode/javascript");您可以重命名變量，為了方便起見(jiàn)，我定義了var editor作為變量，你也可以定義var demoeditor作為變量。第二行聲明使用哪種類(lèi)型的語(yǔ)言高亮顯示。您可以從 src 目錄選擇其他語(yǔ)言集合。這里是一些支持支持的語(yǔ)言集合：
SQL
Ruby
SASS
PHP
Objectivec
Csharp
Java
JSON
使用額外的參數(shù)
復(fù)制代碼 代碼如下:
editor.setTheme("ace/theme/dawn");
editor.getSession().setTabSize(2);
editor.getSession().setUseWrapMode(true);
這3行代碼是關(guān)于文本輸入效果的，第一行改變代碼默認(rèn)的語(yǔ)法顏色和主題，在src目錄下個(gè)有幾十個(gè)新的主題，你可以從中任意選擇
另外兩個(gè)選項(xiàng)是關(guān)于用戶(hù)體驗(yàn)。通常情況下，按一個(gè)鍵盤(pán)上的Tab鍵將輸入4個(gè)空格，這里我設(shè)置成2個(gè)空格，此外，該文本在默認(rèn)情況下將不會(huì)自動(dòng)換行，超了會(huì)追加一個(gè)水平滾動(dòng)條向外延伸。但使用這種方法setUseWrapMode（true），我們可以修復(fù)自動(dòng)換行的問(wèn)題。
還有一些其他的命令，你可以參考ACE向?qū)?。這里面包含了改變光標(biāo)的位置，動(dòng)態(tài)添加新內(nèi)容，或復(fù)制的文本的全部?jī)?nèi)容。
CSS代碼
復(fù)制代碼 代碼如下:
#editor {
margin-left: 15px;
margin-top: 15px;
width: 1000px;
height: 400px;
}
相關(guān)文章
Javascript中this關(guān)鍵字的一些小知識(shí)
這篇文章主要介紹了Javascript中this關(guān)鍵字的一些小知識(shí),本文講解了this的隱性綁定、var that = this兩部份內(nèi)容,需要的朋友可以參考下2015-03-03
微信小程序開(kāi)發(fā)之大轉(zhuǎn)盤(pán) 仿天貓超市抽獎(jiǎng)實(shí)例
本篇文章主要介紹了微信小程序開(kāi)發(fā)之大轉(zhuǎn)盤(pán) 仿天貓超市抽獎(jiǎng)實(shí)例，這里整理了詳細(xì)的代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-12-12
echarts餅圖自定義設(shè)置顏色的3種實(shí)現(xiàn)方式
ECharts餅圖的顏色可以通過(guò)多種方式進(jìn)行設(shè)置,下面這篇文章主要給大家介紹了關(guān)于echarts餅圖自定義設(shè)置顏色的3種實(shí)現(xiàn)方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
這篇文章主要介紹了javascript中的異步調(diào)用機(jī)制,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
Javascript實(shí)現(xiàn)DIV滾動(dòng)自動(dòng)滾動(dòng)到底部的代碼
一個(gè)比較特殊的客戶(hù)要求，在一個(gè)頁(yè)面用表格顯示數(shù)據(jù)，數(shù)據(jù)量不是很多，不希望使用瀏覽器的滾動(dòng)條，只能在Div中滾動(dòng)table中的數(shù)據(jù)，但是有個(gè)特殊的要求，就是必須將滾動(dòng)條自動(dòng)滾動(dòng)到底部2012-03-03
JavaScript 阻止超鏈接跳轉(zhuǎn)的操作方法(多種寫(xiě)法)
很多朋友問(wèn)小編能否通過(guò)JavaScript來(lái)阻止超鏈接的跳轉(zhuǎn)呢，今天給大家通過(guò)多種寫(xiě)法來(lái)實(shí)現(xiàn)這一功能，具體實(shí)例代碼跟隨小編一起看看吧2021-06-06
通過(guò)JavaScript實(shí)現(xiàn)撲克牌游戲的示例代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript如何通過(guò)面向?qū)ο髮?shí)現(xiàn)一個(gè)簡(jiǎn)單的撲克牌游戲，文中的示例代碼代碼講解詳細(xì)，感興趣的可以學(xué)習(xí)一下2022-07-07
uniapp使用uni.chooseLocation()打開(kāi)地圖選擇位置詳解
這篇文章主要給大家介紹了關(guān)于uniapp使用uni.chooseLocation()打開(kāi)地圖選擇位置的相關(guān)資料,因?yàn)樽罱陧?xiàng)目中遇到一個(gè)要用戶(hù)授權(quán)位置且可以用戶(hù)自己選擇位置的功能,需要的朋友可以參考下2023-06-06
動(dòng)態(tài)的9*9乘法表效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇?jiǎng)討B(tài)的9*9乘法表效果的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-05-05
uniapp uni-swipe-action 滑動(dòng)操作狀態(tài)恢復(fù)功能實(shí)現(xiàn)
按照uni-app官方文檔的寫(xiě)法,當(dāng)前一條滑動(dòng)確認(rèn)之后頁(yè)面列表刷新但是滑動(dòng)的狀態(tài)還在,我們需要在滑動(dòng)確認(rèn)之后 頁(yè)面刷新 滑動(dòng)狀態(tài)恢復(fù),下面小編給大家分享uniapp uni-swipe-action 滑動(dòng)操作狀態(tài)恢復(fù)功能實(shí)現(xiàn),感興趣的朋友跟隨小編一起看看吧2024-06-06