close

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 去，將其改成 &lt; 與 &gt; 時，切回 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 的網址列與搜尋列了。

  1. 可搭配《把 wordpress 的 dump 檔轉成 DocBook 格式》，轉出一整套的 docbook 檔案，以便後續用其他工具轉成如 PDF 等格式。

資料來源：http://www.jeffhung.net/blog/articles/jeffhung/1017/

arrow
arrow
    全站熱搜

    白努力電腦日記 發表在 痞客邦 留言(0) 人氣()