CodeMirror Editor

CodeMirrorコードエディタライブラリをDrupalに統合し、テキストエリア、フィールド、テキストフォーマットにシンタックスハイライトとコード編集機能を提供します。

codemirror_editor
3,766 sites
21
drupal.org
gui api field development
editor code editor syntax highlighting codemirror code developer tools field widget field formatter text filter
Drupal 10 Drupal 11

インストール

Drupal 11, 10 v2.0.4
composer require 'drupal/codemirror_editor:^2.0'

概要

CodeMirror Editorモジュールは、人気のあるCodeMirror JavaScriptライブラリをDrupalに統合し、様々なプログラミング言語のシンタックスハイライトを備えた高度なコード編集機能を実現します。

このモジュールは複数の統合ポイントを提供します：DrupalのEditorモジュールと連携してWYSIWYGスタイルの設定が可能なテキストエディタプラグイン、string_longおよびtext_longフィールドでコードを編集するためのフィールドウィジェット、シンタックスハイライト付きでコードを表示するフィールドフォーマッター、そして<code data-mode="...">タグを使用してコンテンツにシンタックスハイライトを追加するテキストフィルターです。

CodeMirrorには50以上のカラーテーマ（Monokai、Dracula、Material、Solarizedなど）、12種類のプログラミング言語の標準サポート（PHP、JavaScript、CSS、HTML、Python、SQL、YAML、Twigなど）、行番号、コードの折りたたみ、タグの自動閉じ、フルスクリーンモード、フォーマットボタン付きのカスタマイズ可能なツールバーなどの機能が含まれています。

ライブラリはCDN（デフォルト）から読み込むか、提供されているDrushコマンドを使用してローカルにインストールできます。また、他のモジュールがカスタム言語モードを追加できるプラグインシステムも提供しています。

Features

  • テキストフォーマット設定用にDrupalのEditorモジュールと統合するテキストエディタプラグイン
  • string_longおよびtext_longフィールドでシンタックスハイライト付きコード編集を可能にするフィールドウィジェット
  • フィールド出力で読み取り専用のシンタックスハイライト付きコードを表示するフィールドフォーマッター
  • <code data-mode="mode">...</code>タグをシンタックスハイライト付きコードブロックに変換するテキストフィルター
  • カスタムフォームで使用するためのカスタムフォーム要素（#type => 'codemirror'）
  • 12の組み込み言語モードをサポート：C-like、CSS、HTML mixed、JavaScript、Markdown、PHP、Python、Ruby、SQL、Twig、XML、YAML
  • Monokai、Dracula、Material、Solarized、Eclipseなど50以上のカラーテーマ
  • 太字、斜体、下線、リスト、リンク、水平線、元に戻す/やり直し、書式のクリア、フルスクリーン切り替えボタンを備えた設定可能なツールバー
  • 行番号、行の折り返し、コードの折りたたみ（折りたたみガター）、タグの自動閉じ、アクティブ行のハイライトオプション
  • CDN読み込み（デフォルト）またはDrushコマンドによるローカルライブラリインストール
  • Cookieによるページロード間での言語モードの永続化
  • キーボードショートカット：Ctrl+Dで行を複製、Ctrl+/でコメント切り替え、F11でフルスクリーン、Escでフルスクリーン終了
  • YAMLファイルを通じて他のモジュールがカスタムモードを定義できる言語モード用プラグインシステム
  • 適切なハイライトでTwigテンプレートを編集するためのHTML/Twigオーバーレイモード

Use Cases

コンテンツ内のコードスニペット保存

CodeMirrorウィジェットを使用したtext_longフィールドを持つ「コードスニペット」コンテンツタイプを作成します。作成者はシンタックスハイライトサポート付きでコードを書くことができ、コンテンツはCodeMirrorフォーマッターを使用して適切にハイライトされた読み取り専用のコードブロックとして訪問者に表示されます。

カスタムモジュール/テーマ開発

コード入力を必要とする管理インターフェース（カスタムCSSフィールド、テンプレートオーバーライド、コード形式の設定など）を構築する際に、#type => 'codemirror'フォーム要素を使用して開発者に適切なコード編集体験を提供します。

ドキュメントおよびチュートリアルサイト

テキストフォーマットでCodeMirrorテキストフィルターを有効にし、コンテンツ作成者が<code data-mode="php">...</code>タグを使用してコンテンツにコード例を埋め込めるようにします。コードは表示時に自動的にシンタックスハイライトされます。

設定エクスポートインターフェース

YAML設定を表示または編集するテキストエリアにYAMLモードのCodeMirrorエディタプラグインを使用し、Drupal設定ファイルの適切なハイライトを提供します。

Twigテンプレート編集

このモジュールにはHTMLテンプレート内のTwig構文を適切にハイライトする特別なHTML/Twigオーバーレイモードが含まれており、ユーザーがTwigテンプレートを直接編集するインターフェースに適しています。

Tips

  • より速い編集のためにキーボードショートカットを使用：Ctrl+Dで現在の行を複製、Ctrl+/でコメント切り替え、F11でフルスクリーンモード、Escでフルスクリーン終了
  • 選択された言語モードはテキストエリアごとにCookieに保存されるため、ユーザーのモード設定はページロード間で維持されます
  • bower-asset/codemirrorでComposerを使用している場合、Composerでインストールされたパッケージには通常非圧縮ファイルのみが含まれるため、モジュール設定で「minified」オプションを無効にすることを忘れないでください
  • カスタムモジュールはモード定義を含むMODULE_NAME.codemirror_modes.ymlファイルを作成することで新しい言語モードを追加できます
  • CodeMirrorテキストフィルターは<code data-mode="mode">...</code>タグで囲まれたコードを期待します - data-mode属性でシンタックスハイライト用の言語を指定します
  • ユーザーが異なるコード言語を切り替えられるようにするフィールドの場合、複数のモードが有効な場合にツールバーにモードセレクタードロップダウンが表示されます

Technical Details

Admin Pages 1
CodeMirror設定 /admin/config/content/codemirror

ライブラリの読み込み方法、テーマ選択、有効な言語モードなど、CodeMirrorエディタのグローバル設定を行います。

権限 1
CodeMirror設定の管理

/admin/config/content/codemirrorのCodeMirror設定ページへのアクセスを許可します。この権限はアクセス制限があります。

Hooks 2
hook_codemirror_mode_info_alter

CodeMirror言語モードのリストを変更します。このhookを使用して、'usage'配列にモジュール名を追加することで、特定の言語モードが常に読み込まれるようにします。

hook_codemirror_editor_assets_alter

CodeMirrorアセット（JavaScriptおよびCSSファイル）のリストを変更します。追加のCodeMirrorアドオンやカスタムアセットを追加するために使用します。言語モードの要求にはhook_codemirror_mode_info_alter()の方が適しています。

Drush Commands 1
drush codemirror:download

CodeMirrorライブラリをCDNからローカルのlibraries/codemirrorディレクトリにダウンロードします。このコマンドは現在の設定（有効なモード、テーマ、アドオン）に基づいて必要なすべてのJavaScriptとCSSファイルを取得します。

Troubleshooting 5
コンソールに「CodeMirrorライブラリが読み込まれていません」という警告が表示される

モジュールが正しくインストールされていて、ライブラリがCDNから読み込まれている（「CDNからライブラリを読み込む」設定を確認）か、ローカルにインストールされていることを確認してください。ローカルインストールを使用している場合は、'drush codemirror:download'を実行してライブラリファイルをダウンロードしてください。

BigPipeが有効な場合、エディタが正しく動作しないことがある

これはBigPipeによってキャッシュプレースホルダー内で親フォームがレンダリングされる場合の既知の問題です。CodeMirrorを使用するフォームをBigPipeキャッシュから除外するか、キャッシュ戦略を調整することを検討してください。

CDNが無効の場合、ライブラリが見つからないエラーが発生する

ローカルインストールを使用する場合、必要なすべてのファイルがlibraries/codemirror/に存在することを確認してください。'drush codemirror:download'を実行して必要なファイルをすべて自動的にダウンロードします。ファイルが不足している場合、ステータスレポートページ（/admin/reports/status）にエラーが表示されます。

モードセレクターで言語モードが利用できない

管理画面 > 環境設定 > コンテンツのオーサリング > CodeMirrorに移動し、「言語モード」セクションで目的の言語モードを有効にしてください。一部のモードには自動的に読み込まれる依存関係があります。

テーマが正しく適用されない

テーマ設定はグローバルであり、テキストエリアごとに変更することはできません。モジュール設定で正しいテーマが選択されていることを確認してください。ローカルインストールを使用している場合は、テーマCSSファイルがlibraries/codemirror/theme/に存在することを確認してください。

Security Notes 4
  • Editorプラグインは'is_xss_safe'がFALSEに設定されているため、CodeMirrorで編集されたコンテンツはXSS攻撃を防ぐために出力前に適切にフィルタリングする必要があります
  • テキストフィルターはHTML::escape()を使用してレンダリング前にコードコンテンツをサニタイズし、表示されるコードブロックでのインジェクション攻撃を防ぎます
  • 'administer codemirror editor'権限は'restrict access: true'が設定されており、信頼できる管理者ロールにのみ付与すべきことを示しています
  • 注意：JS CookieモジュールはデフォルトでCDNを使用しており、GDPRコンプライアンスに影響を与える可能性があります - プライバシーを重視するデプロイメントではjs_cookieライブラリをローカルにインストールすることを検討してください