Wizard In The Market
システムトレードの魔術師

*

SyntaxHighlighter EvolvedとTinyMCEの組み合わせでバグる

SyntaxHighliter Evolvedのショートコード([code][/code]等)を使うと、TinyMCE Advancedにてテキストモードからヴィジュアルモードに切り替えた際に、投稿したHTMLが欠損するという現象に悩まされて、昨晩夜明け前まで数時間格闘していました。その結果、やっとバグの特定ができました。

問題の原因

<pre>タグが自動挿入される

SyntaxHighliter Evolvedのショートコードは、”Stop Removing the <p> and <br /> tags”オプションが有効の際には、編集画面でテキストモードからヴィジュアルモードに変更するとき<pre></pre>タグが自動挿入されます。

<pre><pre></pre></pre>によるバグ

ただ、ショートコードの外側にpreタグに自動変更されるとタグの欠損による表示バグが発生します。

編集画面上は、以下の様なコードになっています。

元のコード

ヴィジュアルモードに変更で自動整形されたコードです。

投稿後、実際の表示の際には、一旦次のように置き換わります。

こうなると、preタグ内には通常はpreを入れ子にする状態となってしまい、本来のpreタグの使い方と異なってしまいます。このまま記事を投稿すると、HTML構造が壊れてしまいます。

記事中は、このようなにが自動整形で</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の使い方

明日に使い方の記事を投稿する予定です。お楽しみに!

にほんブログ村 為替ブログへ 
Fx-Kirin

About Fx-Kirin

2009年10月にFXを開始、翌年2010年5月から脱サラをしてFX業界に専念。 2012年10月頃から本格的に勝ち始め、一月で資産を倍にする、2年半月間負けなし等、安定した収支で2013年11月に生涯FX収支が1億を超える。 投資スタイルはシステムトレード。プログラミングの知識がほぼない状態から、独学で自分がしたいと思うことであればほぼ実現することが可能なレベルまで成長。好きな言語はRuby, Python。必要となればC++からVBA、Pascal等なんでも行う。MT4/MT5のプログラミングも得意。 2011年にはFXで稼いだ資金をもとにシンガポールに移住し、留学も兼ねて起業をチャレンジするほど、ビジネスを興すことに熱意がある。国内の業者を主に使い始めたことから、2012年に帰国。零細株式会社経営中。

Adsense

  • このエントリーをはてなブックマークに追加
  • Pocket
  • 67 follow us in feedly

関連記事

2chまとめを無料で作るならこれ! エディターツールの紹介

以前、クリック証券での999円狩りを見てから初めて2chまとめを作ってみたものの、慣れない作業というのは難しいものですよ

記事を読む

乗っ取られてからでは遅い!WordPressのログインのセキュリティを向上

WordPressはBrute Force Attackに弱い [bm url="http://wpdocs.sou

記事を読む

セキュリティ向上、スパム対策にGoogle Captcaで画像認証!

昨日からの続きで、ログインページのセキュリティ向上や、コメントスパムの対応策としてGoogle Captch

記事を読む

バグ回避!Crayon SyntaxHighliterの上手な使い方

先日の記事で、TinyMCE AdvancedとSyntaxHighlighter Evolvedを併用すると表示バ

記事を読む

高さが変?Stinger3でTwitterの挿入のスマホ表示のバグの修正

ブログでのTweetの紹介はとっても便利 Twitter EmbedというWordpress用プラグインがあります。

記事を読む

WPBlogではPHPや外観の設定を変更してもすぐには反映されない

先日の記事にて、WPBlogがお勧めな理由をご紹介しました。 WordPressで運用を始めるならWPBlogがお勧め

記事を読む

概要がおかしい!そんなときのTwitter Cards Meta のバグ修正

こんにちは!キリンです。先日の記事で、Twitter Cards Metaを使えば簡単にTwitter Cardsが表示

記事を読む

WordPress Popular Postsにはてなブックマーク数を表示!

こんにちは、キリンです。最近は日銀の追加緩和の影響でなかなかブログ記事に集中できない日が続きます。((ブログ

記事を読む

WordPressで運用を始めるならWPBlogがお勧め

少しでも生活の足しになれば・・・。 FX専業投資家として活動を続けてきていますが、この度幸いなことに結婚をして子宝

記事を読む

これは困る!TinyMCE AdvancedでHTML escapeができない

快適なWordPress環境の追求 ひたすらWordPress関連の記事が続きます・・・。 今までに何回か立ち上

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Adsense

Fixing kernel error AMD-Vi: Event logged IO_PAGE_FAULT on Ryzen Machine

My pc was periodically shut down on 7:40 am JS

Ubuntu で仮想ディスプレイを使う

雑多な備忘録ですが、せっかくなので残しておきます。 Ubuntu 18.04 の resolv.c

PYPIへの登録を10秒でできるようになる方法

pip 使ってますよね Pythonを使っている人であれば、pip installでライブラリ

The art of debugging with GDB, DDD, and Eclipse の読書メモ

GDBの勉強がしたくて、下の本を原著で読んでみました。10年前の本だけど全然現役でした。

JupyterでボタンからJavascriptを実行して追加のアウトプットをさせない方法

Javascriptを実行するとアウトプットセルの行が増える これがとても面倒だった。上の

→もっと見る

PAGE TOP ↑