FCKEditorでpreタグの改行が消えてしまう原因

gensan — Wed, 11 Feb 2009 04:52:32 +0000

FCKEditorを使用していてpreタグの中の改行コードが消えてしまう事象が発生

これは、ある特定の場合に発生していることが判明しました

IE以外のブラウザを使用している。
（FireFoxなど）
preタグの中でspanタグを使用していて、そのspanタグの中で改行コードが使用されている
（ソースコードの整形の為のシンタックスハイライトを行っている場合に良く発生します）

この条件がそろうとFCKEditorで「ソースモード」と「WYSIWYGモード」を切り替えているとpreタグの中のspanタグの中にあった改行コードがなくなってしまいます

原因を調査した結果以下のことが判明しました。

FCKEditorでは、preタグ直下の要素の改行はそのまま改行と判断し、残します。
preタグ以外のタグの中でbrでないただの改行コードがあった場合、半角スペースに置き換えます。

となるとpreタグの中に別のタグがあった場合、別のタグの要素として判断され改行コードを半角スペースに置き換えてしまいます。

ということは、preタグの中のspanタグの中の改行コードは、半角スペースに変更されてしまうということです。（spanタグの中の改行コードと判断される為）

なのでこれを対策する為にFCKEditorのコアファイルに修正を加えました。

修正内容）

*** 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の修正は完了です

設定方法が、もしわからんかったら連絡もらえたら教えますよ

FCKEditorのプラグインGeshiProを改造

gensan — Sun, 01 Feb 2009 20:37:36 +0000

FCKEditorのプラグインGeghiProを改造しました。

行番号とソースコードをテーブル組みに変えてソースコードのみを選択コピーできるようにしました。

例えば

 style="width: 300px;">
     style="margin: 0px auto; width:20px; border:1px solid red;">
        ○

こんな感じです。

後は、スタイルシートでデザインすればOK！！

その他、行数を1以外からもはじめられるように修正しました。

 style="width: 300px;">
     style="margin: 0px auto; width:20px; border:1px solid red;">
        ○

こんな感じです。

よかったら使ってみてください

ダウンロードファイルは、「Dean’s FCKEditor for WordPress plugin」というプラグインにGeshiProを同梱してあります。

インストール方法：

以下のリンクからWordPressのプラグインの圧縮ファイルをダウンロードします。
ダウンロードした圧縮したダウンロードファイルを解凍します。
解凍してできたフォルダをWordPressのプラグインのフォルダにまるごとアップロードします（「wp-content\plugins」へアップロード)
WordPressの管理画面から「Dean’s FCKEditor For WordPress」のプラグインを有効にします。
これで完了です。

あとは、新規作成ボタンを押下するとFCKEditorが立ち上がるので、

このアイコンをクリックするとGeshiProの改造版が使用できます。

ダウンロードファイル：GeshiPro(改造版)

PHPプログラマのバリ・ポジ情報ブログ » fckeditor

FCKEditorでpreタグの改行が消えてしまう原因

FCKEditorのプラグインGeshiProを改造