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のルートフォルダ「fckeditor」フォルダに移動します。
（ここには「fckconfig.js」などのソースファイルが格納されています。） - そのフォルダから「fckeditor\editor\_source\internals」フォルダに移動します。
- 「fckxhtml.js」ファイルを開き、189～195行目、270～276行目を上記内容に修正します。
- fckpackager.exeをダウンロードしてきます
（これは、FCKEditorのソースファイルを圧縮するためのツールです。詳しくはこちら） - ダウンロードしてきたファイルをfckeditorのルートフォルダにコピーします。
- 「fckpackager.exe」を実行します。
- 実行が成功すると、「fckeditor\editor\js」フォルダの「fckeditorcode_ie.js」と「fckeditorcode_gecko.js」が更新されるのでその２つのファイルをFCKEditorを使用しているフォルダにアップロードします。
- これでFCKEditorの修正は完了です
設定方法が、もしわからん
かったら連絡もらえたら教えますよ
コメント：0件
トラックバック：0件
