Movable TypeのリッチテキストでA要素の中にDIV要素を入れられない時のワークアラウンド

  • 投稿日:
  • by
  • カテゴリ:

tl;dr;

MTAppjQueryを使っている場合にはuser.jsに以下のような記述を追加すると、A要素の中にDIV要素をいれてもリッチテキストエディタに変更されてしまうというトラブルを回避できます。

どんな問題か

HTML5ではA要素に入れられる内容が結構幅広くなっているので、DIV要素も入れらるようになっているのですが、Movable Type(r.4603以下)のリッチテキストではソースモードで入れたとしても消されてしまったりという問題があります。

具体的には、ソースモードなどから以下のようなHTMLを入力した時に、WYSIWYGモードに戻して保存するとA要素が消えるなどの症状が発生します。

<a href="#"><div>contents</div></a>

ポイントは2点あって、それらが合わさって意図しない書き換えが発生しています。

  • A要素の中にDIV要素を入れることが正しくないと認識されてしまう。
  • A要素がトップレベルにあると、最上位の要素としてP要素が補完されてしまう。

これらを回避するのが上の設定です。

「forced_root_block: false」をすると最上位のP要素の補完がなくなるので、それが好ましくない場合には設定の方を以下のようにした上で、

記事を書くときに、以下のように「A要素を最上位にせずにDIV要素で囲む」などの運用でカバーすることもできると思います。

<div><a href="#"><div>contents</div></a></div>