WordPress 的 FckEditor 新增樣式以搭配 WP-CodeBox

前一篇介紹了 WP-CodeBox 效果 , 但在編輯文章上仍有不完美之處 , 要是可以不用手寫 <pre lang="xxx"> , 而可以直接在文章編輯的地方指定該段程式碼是屬於何種程式那這樣是不是很棒 !

由於我非常討厭 WordPress 的 TinyMCE , 因此我老早就把 WordPress 的文字編輯器改成 FCKEditor , 我用的外掛是叫 Dean’s FCKEditor for WordPress plugin , 下載網址如下

http://wordpress.org/extend/plugins/fckeditor-for-wordpress-plugin/

安裝方法就是解開後放到 plugin 目錄 , 然後去啟用即可 , 很簡單

接下來就是見證奇蹟的時刻了 !! 要如何在 FCKEditor 中也能很方便的直接將內文中的程式碼套用 WP-CodeBox 的樣式呢 ? 我們將一步步來做

新增 FCKEditor  的樣式

首先到我們的 wordpress 目錄下的  /wp-content/plugins/fckeditor-for-wordpress-plugin/fckeditor 找到一個檔案叫 fckstyle.xml , 這個檔案可以讓我們定義一些樣式讓我們可以在 FCKEditor 中以選取的方式來套用自定的樣式 , 例如我們新增一段 XML 在 Styles 的節點之內

<Style name="Code HTML" element="pre">
    <Attribute name="lang" value="html4strict" />
    <Attribute name="colla" value="+" />
    <Attribute name="line" value="1" />
</Style>

這段 XML 加入之後 , 在 FCK Editor 的樣式的功能就會多了一個選項 "Code HTML" , 如下圖 ,  當使用這個樣式的的時候就會幫你產生出 <pre lang="html4strict" colla="+" line="1">

請注意 , 由於瀏覽器可能有快取 , 若無法看到我們新增的樣式 , 可能要清除瀏覽器的快取資料 , 然後再重新進入文章中編輯

善用 FCKEditor 的顯示區塊功能

為了更方便編輯我們的文章 , 通常我會把 FCKEditor 的 "顯示區塊"的功能打開

然後我們可發現我們的文章會把區塊的標籤顯示出來

將程式碼套用自定的樣式

接著我們在編輯文章的時候 , 很簡單 , 直接將程式碼用滑鼠選取起來 , 然後選擇樣式如下圖

接著去預覽這篇文章你就會看見如下的結果了

<html>
<head><title>Hello</title></head>
<body>
Hello World !!
</body>
</html>

照著以上方法 , 就不用切換到原始碼模式去修改 <pre> 標籤了 , 真的是爽呆了 , 哇哈哈哈

這兒有我自己輸入好的範例檔有興趣的可以直接下載來用喔

Exit mobile version