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的p 然後在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實作輸入框編輯器語法高亮思路及程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！