WordPressデフォルトのTinyMCEはどうも使いづらい。なので、比較的スマートに使えるFCKeditorをベースに変更することにした。
単純にプラグインをインストールするだけではなく、しっかり使えるようにする。
ここで使用しているWordPressは、WordPressME2.2.3。
まず、FCKeditorのWordPress用プラグインをダウンロードしてくる。今回はv2.2を使用した。
http://www.deanlee.cn/wordpress/fckeditor-for-wordpress-plugin/
ひとまずwp-content/pluginsディレクトリに展開し、適用してみる。ファイルパーミッションに注意。
問題はなさそうに見えるが、入力を行ってみるとEnterキーでpタグになることや利用しないツールボタンなどが気になる。また、通常の画像アップロードフォームからの挿入ができなかったりする。
まずは、使わないツールボタンを消す。
FCKEditorのプラグインディレクトリにある、custom_config_js.phpにツールボタンの設定があるので編集する。下記はデフォルト。
FCKConfig.ToolbarSets["Default"] = [ ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'], ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'], '/', ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'], ['OrderedList','UnorderedList','-','Outdent','Indent'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'], ['Link','Unlink','Anchor'], ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak','-','wpmore'], '/', ['Style','FontFormat','FontName','FontSize'], ['TextColor','BGColor'], ['FitWindow','-','About'] ] ;
custom_config_js.phpのファイル以外は書き換えたくないので、FCKConfig.ToolbarSets["Default"]を変更して使うことにする。
Enterキーを押すとbrタグを挿入するようにするため、行末に、
FCKConfig.EnterMode = 'br';
と追記しておく。
これでツールボタンもすっきりして、改行でも困らない。
と思いきや、エディタでbrをたくさん書いていても、WordPressがbrを消去してpタグに置き換えてしまう。どうやらWordPress2.2以上でこうなるらしい。原因はwpautopという関数のようだ。
これを解決するために、Disable wpautopというプラグインを導入した。*1
これである程度、エディタは操作しやすくなっただろうか。
続いて、画像挿入部分にとりかかる。
画像挿入部分ではjavascriptエラーが出るが、これはwp-admin/upload.jsがTinyMCE用に作られているのが原因になっている。
249〜254行目あたりを変更する。
/* tinyMCE = win.tinyMCE; if ( typeof tinyMCE != 'undefined' && tinyMCE.getInstanceById('content') ) { tinyMCE.selectedInstance.getWin().focus(); tinyMCE.execCommand('mceInsertContent', false, h); } else win.edInsertContent(win.edCanvas, h); */ oEditor = win.FCKeditorAPI.GetInstance('content'); oEditor.InsertHtml(h);
これで画像を挿入できるようになった。
完成。
