SyntaxHighliter Evolvedのショートコード([code][/code]等)を使うと、TinyMCE Advancedにてテキストモードからヴィジュアルモードに切り替えた際に、投稿したHTMLが欠損するという現象に悩まされて、昨晩夜明け前まで数時間格闘していました。その結果、やっとバグの特定ができました。
問題の原因
<pre>タグが自動挿入される
SyntaxHighliter Evolvedのショートコードは、"Stop Removing the <p> and <br /> tags"オプションが有効の際には、編集画面でテキストモードからヴィジュアルモードに変更するとき<pre></pre>タグが自動挿入されます。
<pre><pre></pre></pre>によるバグ
ただ、ショートコードの外側にpreタグに自動変更されるとタグの欠損による表示バグが発生します。
編集画面上は、以下の様なコードになっています。
元のコード
[code] [/code]
ヴィジュアルモードに変更で自動整形されたコードです。
<pre>[code] [/code]</pre>
投稿後、実際の表示の際には、一旦次のように置き換わります。
<pre><pre> </pre></pre>
こうなると、preタグ内には通常はpreを入れ子にする状態となってしまい、本来のpreタグの使い方と異なってしまいます。このまま記事を投稿すると、HTML構造が壊れてしまいます。
<pre><pre></pre>
記事中は、このようなにが自動整形で</pre>の一つが削除されてしまうようです。決まりが悪いのは、記事編集画面になると、ショートコード反映前の状態が表示されるためもとのコードが表示されてしまうことです。
<pre>[code] [/code]</pre>
これでは、編集画面上ではHTML構造が壊れているわけではないので、何が問題でこのような形になってしまっているか原因の特定がとても難しくなっていました。
バグレポートとして、SyntaxHighlighter Evolvedのフォーラムに投稿しておきました。
解決策
TinyMCE Advancedのオプションをオフにする
"Stop Removing the <p> and <br /> tags"のオプションをオフにすることで、とりあえずは解決すると思います。ただ、オプションをオフにしたとしても、ショートコードがpreタグで囲まれている場合の表示バグは存在しています。そのため、次の解決策のほうがお勧めです。
ショートコードを使わないこと
SyntaxHighlighter Evolvedのショートコードを使わず、<pre class="brush:lang"></pre>のように、ソース挿入の際はpreタグで対応することです。私の場合は、SyntaxHighliter Evolvedではショートコードを使わない使い方ができないため、Crayon Syntax Highlighterに切り替えました。
個人的にTinyMCEはとても便利なので、テキスト、ヴィジュアルモードの変更でHTMLが崩れることのないようなWordPress環境構築に頑張っていこうと思っています。
Crayon Syntax Highlighterの使い方
明日に使い方の記事を投稿する予定です。お楽しみに！
コメント