ビジュアルエディタとHTMLエディタの間の変換では、属性値のエンティティが解除される。

最近気付いたことなんですが、というかビジュアルエディタを最近まで使っていなかったので当然なんですが、ワードプレスのTinyMCEのビジュアルエディタとHTMLエディタの切り替えの際、ちょっとした変換処理がJavaScriptによって行われるのですが、HTMLエディタからビジュアルエディタに変換する際、HTMLエンティティがデコードされてしまうんですね。

出来れば、プラグイン「WP Theme ShapeShifter Extensions」で対処しようと思っていますが、先に問題になったことを紹介しておこうと思います。

 HTMLエンティティのデコード

ビジュアルエディタは基本的に、HTMLエディタに入力したエンティティ状態のテキストをデコードして、ビジュアルエディタのiframe内にhtmlとして出力されます。

ここで問題なのは、無条件に全てのエンティティをデコードしてしまうのに対し、HTMLエディタに変換する際、属性値のエンティティエンコード処理がなされないことです。

つまり、HTMLの属性値にエンティティテキストが存在する場合、ビジュアルエディタに切り替える度に属性値もデコードされた状態に変換されます。

「じゃビジュアルエディタだけ使って変換しなければ問題無いじゃん」と思うかもしれませんが、ビジュアルエディタは最初にロードする際に必ず一度HTMLエディタに出力するテキストを変換処理していますので、下書き保存や更新ボタンを押す度にロードされるテキストが変換されるんです。

ええ、保存を繰り返すだけで属性値のエスケープが解除されてしまいます。

ですから、「>」や「”」といった文字が属性値として存在するとエライこっちゃとなるわけです。

実際に起こった失敗例

僕が実際に使用してみて気付いたケースですが、「メディアの追加」ボタンにより画像を挿入するケースです。

イメージに使用する代替テキスト（alt）の値を入力しますから、これが問題となります。

ただ、僕の場合は、実際に挿入するのではなく、既にそういうテキストを代替テキストの値として持つIMGタグなどが存在するページの編集をする場合です。テキスト例としては、”「外観」->「テーマの設定」”といった代替テキストなどです。「>」がエンティティに変換されないために途中でタグを閉じるように変換されてしまうんですよ。

 問題の対処法は？

JavaScriptで修正することになるんですが、エンティティ文字に変換されるべきテキストが使用される可能性のある属性値を変換してしまうことが必要になります。

「メディアを追加」ボタンで挿入されるIMGタグなどが一番の対象となるように、特定のタグに絞る方が良いのかもしれません。

あとはHTMLエディタで編集する際、変な属性値を与えないようにすることでしょうか。

まぁ実際にはまだ何も試していないので何とも言えないんですけどね。

プラグイン「WP Theme ShapeShifter Extensions」では対処予定

他にもプラグインで対処されているか、もしくはワードプレスのアップデートで対処されるかもしれません。

ただ、まぁ個人的にはさっさと対処してしまいたいと思っています。

上で書いたような処理で何とか成るのであればいいんですが、特定の要素以外に、全体的にフィルターを掛けるのはちょっとリスキーな気がしますので、ちょっと慎重に更新してみようかと。

まぁワードプレスがこのままにしているということは、何か問題があるのかもしれませんから、ちょっと気になってはいるんです。