What's New 一覧へProduct Update

Monaco/CodeMirror 連携 HTML ソースビューワーと構文チェック

2026.05.31

💻 自由な HTML 編集とリアルタイムなエラー診断

ビジュアルエディタ(WYSIWYG)だけでは表現が難しい高度なコーディングをCMS上で行うため、HTMLソースコードビューワープラグイン(htmlSourceViewer を実装しました。

🛠️ プラグインの機能

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