Wordpress 編輯器升級到 FCKeditor 2.5.x
雖然自從 Wordpress 2.x 開始,就內建了 TinyMCE 這套 WYSIWYG 的編輯器,但因為之前使用 EditorMonkey 裡面的 FCKeditor 功能實在強大,又能依據我的需要進行 customization,因此我仍然還是使用 EditorMonkey。可是,EditorMonkey 內附的 FCKeditor 是 2.2 版,已經很舊了,在使用的過程中,也一再地發現某些 bug,甚至培養出了迴避這些 bug 的編輯行為。
是故,我一直在思考著,是不是什麼時候,來升級一下。就在編寫 dprintf() 系列文章的過程中,實在是受不了了舊版 FCKeditor 的一些 bug 的情況下,再加上 FCKeditor 就在 2007-10-10,剛剛釋出了 2.5 Beta 版,所以一不小心,就把 editormonkey 拔掉,搞出了個 FCKeditor 2.5.x 的 wordpress plug-in 來。
當然,我並沒有那麼厲害,能夠無中生有的憑空造出一個 plug-in 來,主要還是參考了 Dean's FCKEditor For Wordpress,這是官方的 wordpress plugin directory 裡用 fckeditor 當關鍵字,所可以找到的唯一一套真正的 fckeditor 編輯器的 plug-in。不過,Dean Lee 的版本,尚無法符合我的需求,所以我修改了一下,加了一些新功能:
- 完全不碰觸
FCKeditor/目錄,以便以後方便升級 fckeditor。 - 新設
themes/目錄,裡面有config.js.php、fck_editorarea.css.php、fckstyles.xml.php與fcktemplates.xml.php,這些是 fckeditor 的設定檔,改成 PHP 檔,然後於config.js.php修改設定,讓 fckeditor 改到這些 theme 檔讀取設定。 - 把 smiley 與 file upload 功能拔掉。
- 除了名為
default的 theme 以外,緩慢編修名為docbook的 theme。我準備慢慢地以 docbook 的 tag 名,標示文章各處內容的 semantics[1]。
不過,即使是這最新釋出的 FCKeditor 2.5 Beta 版,還是有著一些小問題:
- 當
<pre>裡面有<、>,當切到 source 去,將其改成<與>時,切回 WYSIWYG 後,會變成<和>。 - 找不到方法調整 hot-key 或乾脆關掉,因此 Ctrl-Tab 被綁架成 Source/WYSIWYG 切換,因而無法在 firefox 裡切換 tab,Ctrl-L 與 Ctrl-K 也被綁架成不知道什麼功能,因此無法直接將 focus 轉到網址列與搜尋框。
- 修改
fckstyles.xml以便客制化自己常用的幾個 styles:code、inline_code、screen、footnote、sidenote等,結果工具列裡 style 這個 drop-down,還是會留有一個叫Red Title的樣式,不曉得是從哪裡來的,無法移除。
第一個問題最嚴重,還好馬上在官網上看到 #1414 已經列出了這個 bug,然後在 r1025/r1026 解掉了,幸好我沒有直接修改 FCKeditor/ 目錄,而是把設定都拉到 themes/ 目錄下修改,所以直接改成從 SVN 把 branch 2.5.x 拉下來,問題就解決了。
至於剩下來的問題,就只能再研究囉。
2008-01-16 更新:
Hot-key 的問題,修改 fckconfig.js 裡的 FCKConfig.Keystrokes 這一個表格即可修正。格式就我實驗的結果,應該為:
FCKConfig.Keystrokes = [
// key-codes, true for pass-though to browser,
// or string to invoke key function
// ----------------------------
// [ CTRL + 65 /*A*/, true ],
[ CTRL + 67 /*C*/, true ],
[ CTRL + 75 /*K*/, true ], // add by jeffhung
[ CTRL + 76 /*L*/, true ], // add by jeffhung
// [ CTRL + 70 /*F*/, true ],
// [ CTRL + 83 /*S*/, true ],
// [ CTRL + 88 /*X*/, true ],
[ CTRL + 86 /*V*/, 'Paste' ],
// [ SHIFT + 45 /*INS*/, 'Paste' ],
[ CTRL + 88 /*X*/, 'Cut' ],
// [ SHIFT + 46 /*DEL*/, 'Cut' ],
[ CTRL + 90 /*Z*/, 'Undo' ],
// [ CTRL + 89 /*Y*/, 'Redo' ],
// [ CTRL + SHIFT + 90 /*Z*/, 'Redo' ],
// [ CTRL + 76 /*L*/, 'Link' ],
// [ CTRL + 66 /*B*/, 'Bold' ],
// [ CTRL + 73 /*I*/, 'Italic' ],
// [ CTRL + 85 /*U*/, 'Underline' ],
// [ CTRL + SHIFT + 83 /*S*/, 'Save' ],
// [ CTRL + ALT + 13 /*ENTER*/, 'FitWindow' ],
// [ CTRL + 9 /*TAB*/, 'Source' ]
];
所以,把「Ctrl + 90 /*Z*/」對應到「Undo (反悔)」,「Ctrl + 88 /*X*/」對應到「Cut (剪下)」、「Ctrl + 86 /*V*/」對應到「Paste (貼上)」,但「Ctrl + 67 /*C*/」必須對應到 true,直接讓 browser 處理「Copy (複製)」的功能,以避免 FCKeditor 的複製功能,被 browser 的安全機制攔阻。最後,再加上對「Ctrl + 75 /*K*/」與「Ctrl + 76 /*L*/」放行,就可以用 hot-key 把 focus 跳到 firefox 的網址列與搜尋列了。
- 可搭配《把 wordpress 的 dump 檔轉成 DocBook 格式》,轉出一整套的 docbook 檔案,以便後續用其他工具轉成如 PDF 等格式。 ↩
Random Posts
- None Found
Similar Posts
- None Found
One Comment
Hi,
I found your comments from Googling 'FCKeditor 2.5' :)
Regarding your questions...
1. I've fixed the symbols in tags already, as you've said.
2, 3. Both the hotkey and the custom style settings can be set by editing the file 'fckconfig.js'. The new style system in FCKeditor 2.5 allows styles to be set in both the fckstyles.xml file and in JavaScript since we've found some use cases where a more dynamic way of setting styles is needed.
Best Regards,
Martin Kou
Core JavaScript Developer, FCKeditor
Post a Comment