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

 

演示，在下面的編輯框中你可以任意編輯代碼

ACE官網    github下載

 

本文地址： 使用JavaScript建立一個語法高亮輸入框

hide