アイデアとコードの詳細を強調表示する入力ボックス エディタ構文の JavaScript 実装

textarea 要素は Web IDE で広く使用されています。通常、Web サイトに付属のテキストエリア エディターでは、オンラインでコードを編集したり、コードをハイライトしたりする必要があることがよくあります。そのため、この記事では、いくつかの実用的な機能を追加できます。入力ボックス効果の作成には、JavaScript ライブラリ ACE が使用されます。これは完全にオープンソースのスクリプトです。このスクリプトを使用すると、開発者は構文の強調表示をサポートする入力ボックスを作成できます。その後、Web サイトのどこにでもコードを埋め込むことができます

ライブラリをダウンロードする まず、Github から ACE コードをダウンロードする必要があります。 ダウンロード後、解凍してヘッダーセクションにjsファイルを導入します

<script src="src-min/ace.js" type="text/javascript" charset="utf-8"></script>

コードをエディターに追加します

最初にエディターのIDを使用してpを設定し、スクリプトでace.edit()メソッドを呼び出します。コードは次のとおりです。以下のように

var editor = ace.edit("editor"); 
editor.getSession().setMode("ace/mode/javascript");

変数の名前は変更できます。便宜上、var editor を変数として定義しましたが、var Demoneditor を変数として定義することもできます。 2 行目は、使用する言語の強調表示のタイプを宣言します。 src ディレクトリから追加の言語コレクションを選択できます。サポートされている言語のコレクションは次のとおりです:

SQL
Ruby
SASS
PHP
Objectivec
Csharp
Java
JSON
追加パラメータを使用する

editor.setTheme("ace/theme/dawn"); 
editor.getSession().setTabSize(2); 
editor.getSession().setUseWrapMode(true);

これらの 3 行のコードはテキスト入力効果に関するもので、最初の行は変更しますデフォルトの構文の色とコードのテーマ。src ディレクトリには数十の新しいテーマがあり、他の 2 つのオプションはユーザー エクスペリエンスに関するものです。通常、キーボードの Tab キーを押すと 4 つのスペースが入力されます。また、デフォルトではテキストが自動的に折り返されず、横スクロール バーが追加されて外側に拡張されます。 。しかし、このメソッド setUseWrapMode(true) を使用すると、ワードラップの問題を解決できます。
他にもいくつかのコマンドがあります。ACE ウィザードを参照してください。これには、カーソル位置の変更、新しいコンテンツの動的追加、テキストのコピーまでのすべてが含まれます。

CSSコード

#editor { 
margin-left: 15px; 
margin-top: 15px; 
width: 1000px; 
height: 400px; 
}

以上がアイデアとコードの詳細を強調表示する入力ボックス エディタ構文の JavaScript 実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。