FCKEditorでpreタグの改行が消えてしまう原因
FCKEditorを使用していてpreタグの中の改行コードが消えてしまう事象が発生
これは、ある特定の場合に発生していることが判明しました
- IE以外のブラウザを使用している。
（FireFoxなど） - preタグの中でspanタグを使用していて、そのspanタグの中で改行コードが使用されている
（ソースコードの整形の為のシンタックスハイライトを行っている場合に良く発生します）
この条件がそろうとFCKEditorで「ソースモード」と「WYSIWYGモード」を切り替えているとpreタグの中のspanタグの中にあった改行コードがなくなってしまいます
原因を調査した結果以下のことが判明しました。
- FCKEditorでは、preタグ直下の要素の改行はそのまま改行と判断し、残します。
- preタグ以外のタグの中でbrでないただの改行コードがあった場合、半角スペースに置き換えます。
となるとpreタグの中に別のタグがあった場合、別のタグの要素として判断され改行コードを半角スペースに置き換えてしまいます。
ということは、preタグの中のspanタグの中の改行コードは、半角スペースに変更されてしまうということです。（spanタグの中の改行コードと判断される為）
なのでこれを対策する為にFCKEditorのコアファイルに修正を加えました。
修正内容）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
*** original/fckxhtml.js 2008-10-07 13:52:24.000000000 +0900 --- fckxhtml.js 2009-02-12 09:47:39.000000000 +0900 *************** *** 189,195 **** // This is a workaround for the Gecko bug here: https://bugzilla.mozilla.org/show_bug.cgi?id=92921 if ( FCKBrowserInfo.IsGecko && htmlNode.tagName.toLowerCase() == 'br' ! && htmlNode.parentNode.tagName.toLowerCase() == 'pre' ) { var val = '\r' ; if ( htmlNode == htmlNode.parentNode.firstChild ) --- 189,199 ---- // This is a workaround for the Gecko bug here: https://bugzilla.mozilla.org/show_bug.cgi?id=92921 if ( FCKBrowserInfo.IsGecko && htmlNode.tagName.toLowerCase() == 'br' ! && ( ! htmlNode.parentNode.tagName.toLowerCase() == 'pre' || ! ( htmlNode.parentNode && htmlNode.parentNode.parentNode && htmlNode.parentNode.parentNode.nodeName.IEquals( 'pre' ) ) ! ) ! ) { var val = '\r' ; if ( htmlNode == htmlNode.parentNode.firstChild ) *************** *** 270,276 **** // Text Node. case 3 : ! if ( htmlNode.parentNode && htmlNode.parentNode.nodeName.IEquals( 'pre' ) ) return this._AppendTextNode( xmlNode, htmlNode.nodeValue ) ; return this._AppendTextNode( xmlNode, htmlNode.nodeValue.ReplaceNewLineChars(' ') ) ; --- 274,283 ---- // Text Node. case 3 : ! if ( ! ( htmlNode.parentNode && htmlNode.parentNode.nodeName.IEquals( 'pre' ) ) || ! ( htmlNode.parentNode && htmlNode.parentNode.parentNode && htmlNode.parentNode.parentNode.nodeName.IEquals( 'pre' ) ) ! ) return this._AppendTextNode( xmlNode, htmlNode.nodeValue ) ; return this._AppendTextNode( xmlNode, htmlNode.nodeValue.ReplaceNewLineChars(' ') ) ; |
対象の要素の親の親のタグがpreかどうか判断するという方法に修正しました。
これで修正が完璧かというと完璧ではないと思います。
なのでそれぞれの環境に合うように修正して使用してください。
それでは、修正の反映方法です。
FCKEditorのプラグインGeshiProを改造
FCKEditorのプラグインGeghiProを改造しました。
行番号とソースコードをテーブル組みに変えてソースコードのみを選択コピーできるようにしました。
例えば
1 2 3 4 5 |
<div style="width: 300px;"> <div style="margin: 0px auto; width:20px; border:1px solid red;"> ○ </div> </div> |
こんな感じです。
後は、スタイルシートでデザインすればOK！！
その他、行数を1以外からもはじめられるように修正しました。
100 101 102 103 104 |
<div style="width: 300px;"> <div style="margin: 0px auto; width:20px; border:1px solid red;"> ○ </div> </div> |
こんな感じです。
よかったら使ってみてください
ダウンロードファイルは、「Dean’s FCKEditor for WordPress plugin」というプラグインにGeshiProを同梱してあります。
インストール方法：
