Sunvisor Lab.

Register Now | Log in | Lost Password

SyntaxHighlighterとFCKeditorの相性が悪い件

トップ (メニュー)  >  Movable Type  >  SyntaxHighlighterとFCKeditorの相性が悪い件

ブログ中でソースコードを記述するとき,EclipseなどのIDEやvimのように色分けして表示してあるサイトをよく見かけます。それと同じことをやろうとして調べてみると,SyntaxHighlighterというのがきれいに表示できるし便利そうだったので使ってみました。

確かに便利ですし,きれいなソース表示になります。ところがこれ,FCKEditorと相性が悪く,入力が非常に面倒になってしまいます。そこで,この相性の悪さをなんとかする方法がないかを調べてみました。

http://fckeditor.biz/viewtopic.php?p=2555&sid=571686dc6c64965fab5dd3bd2670d8bb

上記のページにTigrouMeowという人が,FCKEditorとSyntaxHighlighterの共存について質問を書き,レスポンスが得られないので,自己レスとして他の方法を紹介しています。つまりこの二つはどうにも相性が悪く,組み合わせて使うべきではないということです。

代替手段 - Geshi for FCKeditor

代替手段とはいってもこれはなかなかによい解決方法であるように思います。Geshi for FCKeditorはFCKEditorのプラグインで,こいつをインストールするとFCKEditorのツールバーにInsert Syntax Highlighted Codeというボタンがつきます。そのボタンをクリックするとソースコード入力用のダイアログが表示されるので,そこにコードをペーストして,言語を選択してOKをクリックするだけで,色つきになったソースコードがカーソル位置に挿入されます。

Geshi for FCKeditorのインストール方法

ファイルのダウンロードと配置

  • こちらから,Geshi for FCKeditorをダウンロードして解凍します。
  • 出てきたgeshighlighterフォルダをまるごとFCKEditorのプラグインフォルダにコピーします。MTFCKEditorプラグインを使用している場合は,mt-static/MTFCKeditor/editor/pluginsがその場所です。

fckconfig.jsの編集

fckconfig.jsはmt-static/MTFCKeditorにあります。

  • 次の行を見つけます。
FCKConfig.Plugins.Add( 'autogrow' ) ;
  • それをコメントアウトして1行加えます。
//FCKConfig.AutoGrowMax = 400 ;
FCKConfig.Plugins.Add( 'geshighlighter', 'en,nl' ) ;
  • ToolbarSetsの定義に'RtHighlight'を加えます。僕の場合はWYSIWYGエディタを入れるで説明したように,独自のツールバーセッティングをしているので次のように書きました。
FCKConfig.ToolbarSets["Blog"] = [
 ['PasteText','PasteWord'],
 ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
 ['OrderedList','UnorderedList','-','Outdent','Indent'],
 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
 ['Link','Unlink','RtHighlight'],
 ['Image','Table','Rule'],
 ['FontFormat','FontSize', 'TextColor','BGColor'],['Source', 'FitWindow','About']
] ;

以上で完了です。

 

プリンタ用画面
友達に伝える
投票数:0 平均点:0.00

前
SpamLookupのセッティング
カテゴリートップ
Movable Type
Powered by XOOPS Cube 2.0 © 2005-2006 The XOOPS Project | Designd by Theme4u.Net