コードエディタ拡張
baserCMS5の「テーマファイル編集」機能における標準のテキストエリアを、行番号やシンタックスハイライトを備えた本格的なコードエディタ（CodeMirror5）に置き換えるプラグインです。
設定は一切不要です。有効化するだけで、テーマ開発やカスタマイズの作業効率を劇的に向上させることができます。
3つのポイント
- 最適な編集モードの自動判定：開いたファイルの拡張子やURLから、CSS、JavaScript、HTML混在、PHPといった最適な編集モードを自動判定し、コードを視覚的に色分け（ハイライト）して表示します。
- 全画面表示と配色の切り替え：編集領域をブラウザの全画面に広げて作業に集中できる機能や、目への負担を軽減するダーク背景／ライト背景の切り替え機能を搭載しています（選択状態はブラウザに記憶されます）。
- 離脱防止の確認ダイアログ：編集内容が変更されている状態で誤って「一覧に戻る」ボタンを押してしまった際、確認ダイアログを表示して大切なデータ消失を防ぐ安全設計です。
対象となる画面
管理画面で、テーマ内のファイルを新規作成・編集するときにのみCodeMirrorが適用されます。
【対象ファイルの例】
- レイアウトテンプレート（例: default.php）
- エレメントテンプレート（例: header.php）
- コンテンツテンプレート（例: default.php）
- CSS スタイルシート（例: style.css）
- JavaScript スクリプト（例: common.js）
対応環境
- baserCMS 5.x（5.2.x で動作確認済み）※BcThemeFileプラグインが有効であること
- PHP 8.1 以上
インストール方法
- baserマーケットのマイページから、本プラグインのZIPファイルをダウンロードします。
- baserCMS管理画面にログインし、「プラグイン管理」を開きます。
- 「新規追加」ボタンからZIPファイルを選択し、アップロードします。
- プラグイン一覧に「BcCodeEditor（コードエディタ拡張）」が表示されたら、「インストール」をクリックします。
仕様・制限事項
- 適用されない画面について：本プラグインは「テーマファイル編集」専用です。ブログ記事や固定ページなどの本文エディタ（WYSIWYGエディタ）や、他のプラグインの設定画面などには適用されません。用途の取り違えにご注意ください。
- 入力中のピンク背景（シンタックスハイライト）について：HTMLテンプレートの編集時などに、属性の引用符（" や '）に欠落や不整合があると、入力と同時に該当箇所以降がピンク背景になることがあります。これはエディタの標準的な構文解析による仕様であり、プラグインの不具合やバグではありません。引用符を正しく修正すると元の背景色に戻ります。
- ライブラリの同梱について：CodeMirror本体（MIT License）をプラグイン内に完全同梱しています。外部CDNサーバーへの通信が発生しないため、管理画面の読み込み遅延を防ぎ、サードパーティに依存しない安定した動作を実現します。
- Pro版（上位版）について：より高度な開発支援機能（検索・置換、簡易Lintチェックによる構文エラー検知、元に戻す／やり直し、ローカルファイルの直接読み書き）が必要な場合は、上位版の「コードエディタ拡張Pro（BcCodeEditorPro）」をご検討ください。
配色切り替え
レイアウトテンプレート例（ライト背景）
レイアウトテンプレート例（ダーク背景）
CSS例（ライト背景）
CSS例（ダーク背景）
離脱防止の確認ダイアログ
この商品に対するご感想をぜひお寄せください。
