💻 自由な HTML 編集とリアルタイムなエラー診断
ビジュアルエディタ(WYSIWYG)だけでは表現が難しい高度なコーディングをCMS上で行うため、HTMLソースコードビューワープラグイン(htmlSourceViewer) を実装しました。
🛠️ プラグインの機能
- インプレースコードビューワー: ツールバーの「</>」ボタンを押すことで、WYSIWYGのエディタ画面そのものが瞬時にフル機能のコードエディタ(CodeMirror 6)に切り替わります。
- HTMLHint によるリアルタイム検証: ソースコードを編集すると、裏側で HTMLHint が構文チェックを実行。閉じタグ忘れや無効な要素がある場合は、赤波線で警告し、下部の診断パネルにエラー詳細をリアルタイムで出力します。
- 自動コード整形: js-beautify と連携し、ワンクリックでネストを揃えてインデントされた綺麗な HTML コードに自動整形します。