Ace Code Editor

Ace JavaScriptコードエディタをDrupalに統合し、テキストエリア、フィールド表示、埋め込みコードスニペットに対してシンタックスハイライト、オートコンプリート、コード編集機能を提供します。

ace_editor
5,297 sites
30
drupal.org
gui field theme
code editor syntax highlighting ace editor text editor field formatter text filter code display development content authoring
Drupal 8 Drupal 9 Drupal 10 Drupal 11

インストール

Drupal 11, 10 v2.0.2
composer require 'drupal/ace_editor:^2.0'
Drupal 9, 8 v8.x-1.4
composer require 'drupal/ace_editor:8.x-1.4'

概要

Ace Code Editorは、人気の高いAceエディタJavaScriptライブラリをDrupalに包括的に統合するモジュールです。Aceは、JavaScriptで書かれたスタンドアロンのコードエディタで、100以上のプログラミング言語に対応したシンタックスハイライト、適切なインデント、キーボードショートカット、正規表現対応の検索と置換、オートコンプリートなど、プロフェッショナルレベルの機能を提供します。

このモジュールは3つの主要な統合ポイントを提供します：(1) テキストフォーマットに割り当て可能なテキストエディタプラグインで、コンテンツ編集フォームの標準テキストエリアをAceエディタに置き換えます。(2) テキストフィールドのコンテンツをシンタックスハイライト付きの読み取り専用コードとして表示するフィールドフォーマッター。(3) コンテンツ内のカスタム<ace>タグを処理し、設定可能なシンタックスハイライトでコードスニペットを埋め込み表示するテキストフィルター。

このモジュールは、テーマ選択（Monokai、Cobalt、Twilightなど35種類以上）、シンタックスモード選択（PHP、JavaScript、HTML、Python、YAMLなど100種類以上の言語モード）、エディタサイズ、フォントサイズ、行番号、印刷マージン、不可視文字表示、ワードラップ、オートコンプリートなど、広範なカスタマイズオプションをサポートしています。

Features

  • Drupalのテキストエリアを、ノードやブロックの編集フォームでプロフェッショナルなシンタックスハイライトとコード編集機能を備えたAceコードエディタに置き換えます
  • PHP、JavaScript、HTML、CSS、Python、Ruby、Java、SQL、YAML、JSON、Markdownなど、100種類以上のプログラミング言語シンタックスモードをサポート
  • Monokai、Cobalt、Twilight、Solarized Dark/Light、Tomorrow Night、GitHubなど、35種類以上の人気カラーテーマを提供
  • コード編集中にCtrl+Spaceキーボードショートカットでオートコンプリートを有効化
  • フィールドフォーマッターにより、エンティティ表示モードでテキストフィールドのコンテンツを読み取り専用のシンタックスハイライト付きコードとして表示
  • テキストフィルターが<ace>タグを処理し、カスタマイズ可能な属性でシンタックスハイライト付きのコードスニペットをコンテンツに直接埋め込み表示
  • 高さ、幅、フォントサイズ、行番号、印刷マージン、不可視文字、ワードラップなど、エディタ設定をカスタマイズ可能
  • パフォーマンス最適化のため、必要なテーマとモードのJavaScriptファイルのみを動的にロード
  • テキストフォーマット統合をサポートし、任意のテキストフォーマット設定でAceエディタを使用可能

Use Cases

コンテンツ内でのHTML/PHPテンプレート編集

ノードやブロックコンテンツ内でHTML、PHP、JavaScriptコードを直接保存・編集する必要があるサイトビルダーや開発者は、Ace Editorを使用してプロフェッショナルなコーディング体験を得られます。Aceをテキストエディタとするテキストフォーマットを設定し、コードを含むコンテンツタイプでそのフォーマットを使用します。シンタックスハイライトとオートコンプリート機能により、コードスニペットの作成と保守が大幅に容易になります。

ドキュメントでのコード例表示

技術ドキュメントサイトでは、Aceフィルターを使用して、美しくフォーマットされたコード例を記事コンテンツに直接埋め込むことができます。著者がコードを<ace syntax="php" theme="monokai">タグで囲むと、フィルターがプロフェッショナルなシンタックスハイライトでコードをレンダリングします。同じコンテンツ内の異なるコードブロックに、異なる言語とテーマを使用できます。

コードスニペットフィールドの表示

コードを保存するための専用フィールド（「コード例」text_longフィールドなど）を含むコンテンツタイプでは、Aceフォーマッターを使用してエンティティビューでフィールドをシンタックスハイライト付きで表示できます。フィールド表示を「Aceフォーマット」に設定し、期待されるコンテンツに適したシンタックスモードを選択します。

設定ファイルの編集

サイト管理者がDrupalインターフェース内でYAML、JSON、その他の設定フォーマットを直接編集する必要がある場合、Ace Editorは適切なシンタックスハイライトと視覚的なフィードバックによる検証を提供し、設定エラーを減らします。

開発者ブログやチュートリアルサイト

コードチュートリアルを紹介する開発者ブログでは、3つの機能すべてを活用できます：記事コンテンツの作成にAce Editorを使用し、本文へのコード例の埋め込みにフィルターを使用し、別フィールドに保存された完全なコードファイルコンテンツの表示にフォーマッターを使用します。サイトのデザイン美学に合わせて複数のテーマを使用できます。

Tips

  • Aceエディタでコード編集中にCtrl+Spaceを使用するとオートコンプリートがトリガーされます
  • <ace>タグはデフォルト設定を上書きする属性をサポート：theme、syntax、height、width、font-size、line-numbers、print-margin、invisibles
  • 例：<ace theme="monokai" syntax="php" height="400px">ここにコード</ace>
  • フィルターでは、line-numbersなどのブール属性は機能を有効/無効にするために'1'または'0'の値を受け付けます
  • Aceライブラリは1つのバージョンのみ必要です - 本番環境ではminifiedバージョン（src-minまたはsrc-min-noconflict）を推奨
  • 動的ライブラリ読み込みにより、実際に使用されるテーマとモードファイルのみがロードされ、ページパフォーマンスが最適化されます
  • フォーマッターはコンテンツを読み取り専用で表示します - ユーザーは表示されたコードを編集できないため、フロントエンド表示に安全です

Technical Details

Admin Pages 1
テキストフォーマット設定 - Ace Editor設定 /admin/config/content/formats/manage/{format_id}

テキストフォーマットのテキストエディタとしてAce Editorを選択すると、エディタの外観と動作を設定するための追加設定が利用可能になります。これらの設定は、このテキストフォーマットを使用するすべてのテキストエリアに適用されます。

権限 1
AceEditorの管理

Ace Editorの設定と構成を管理できます。これは制限付きパーミッションです。

Hooks 2
hook_library_info_build

Aceライブラリディレクトリをスキャンしてtheme-*.jsとmode-*.jsファイルを探し、利用可能なすべてのAceテーマとシンタックスモードのライブラリ定義を動的に構築します。

hook_library_info_alter

検出されたライブラリパスに基づいて、コアのace.jsファイルとext-language_tools.js（オートコンプリート用）を適切なライブラリに追加するためにライブラリ定義を変更します。

Troubleshooting 5
ステータスレポートでAceライブラリが見つからないエラー

Ace JavaScriptライブラリは/libraries/ディレクトリにインストールする必要があります。https://github.com/ajaxorg/ace-buildsからace-buildsをダウンロードするか、npm-assetリポジトリでComposerを使用してください。ace.jsが/libraries/ace/ace.jsや/libraries/ace-builds/src-min/ace.jsのようなパスでアクセス可能であることを確認してください。1つのバージョン（minified、noconflictなど）のみが必要です。

テキストフォーマットでエディタが表示されない

次の点を確認してください：(1) /admin/config/content/formatsでテキストフォーマットのテキストエディタとして「Ace Editor」が選択されている、(2) ユーザーがそのテキストフォーマットを使用する権限を持っている、(3) Aceライブラリが正しくインストールされ検出されている。

特定の言語でシンタックスハイライトが機能しない

対応するmode-*.jsファイルがAceライブラリのインストール先に存在することを確認してください。モジュールは利用可能なモードを動的にスキャンします。モードが見つからない場合は、すべての言語モードを含む完全なace-buildsパッケージをダウンロードしてください。

コンテンツ内の<ace>タグが処理されない

/admin/config/content/formats/manage/{format_id}で、コンテンツが使用するテキストフォーマットに対して「Ace Filter」を有効にしてください。タグが処理されシンタックスハイライトで表示されるには、フィルターを有効にする必要があります。

モジュールをアンインストールしても「Ace Editor」テキストフォーマットが残る

モジュールはコンテンツを保持するため、アンインストール時に「Ace Editor」テキストフォーマットを意図的に削除しません。このフォーマットを使用しているコンテンツがないことが確実な場合は、/admin/config/content/formatsで手動で無効化または削除してください。

Security Notes 4
  • Editorプラグインはis_xss_safe = FALSEとマークされており、コンテンツはXSSセーフであることが保証されていないため、適切なテキストフォーマットフィルターと一緒に使用する必要があります
  • 'administer ace_editor'パーミッションは制限付きアクセスとしてマークされています - このパーミッションは慎重に付与してください
  • フォーマッターまたはフィルターで表示されるコードは読み取り専用モードでレンダリングされ、クライアント側での変更を防ぎます
  • ユーザー送信コンテンツでフィルターを使用する場合は、悪意のある入力をサニタイズするために他の適切なテキストフィルターが設定されていることを確認してください