歡迎光臨, 訪客. 請先 登入註冊一個帳號.
二月 25, 2024, 09:22:18 上午
19595 文章 在 3865 主題 由 4580 會員
最新註冊會員: aa123aa1
LifeType 中文開發論壇  |  開發  |  外掛程式  |  讓 TinyMCE 也能有 Syntax Highlight 功能 « 上篇主題 下篇主題 »
頁: [1]
作者 主題: 讓 TinyMCE 也能有 Syntax Highlight 功能  (閱讀 9901 次)
twu2
初級會員
**
文章: 61



檢視個人資料 個人網站
« 於: 四月 04, 2007, 11:02:57 下午 »

轉自: http://blog.teatime.com.tw/1/post/222

前不久就打算在 LifeType 中加上 Syntax Highlight 的功能, 也找了 dp.SyntaxHighlighter 回來研究了一下, 不過一直試不出來, 而且... 這個程式是用 Javascript 處理的, 在 LifeType 的 TinyMCE 中, 每次要使用, 必須要進到 html 模式, 自己修改程式碼之後, 才能顯示出來. 所以當初試了一下就放棄了.

今天又找了一下類似的軟體, 發現在 TinyMCE 中, 有個 3rd party 的 plugin: insertcode, 搭配 GeSHi, 可以做出類似的效果. 下載回來, 發現這個應該是配合 TinyMCE 2.0.1 或之前的版本使用, 在後續的版本需要做一些修改才能使用. 該討論串中, 也有人貼了一段程式碼, 應該是修改過後的版本, 不過, 我試了一下, 發現如果速度很快 (code 的內容不多的話), 可以正確的把產生的程式碼, 再放回 TinyMCE 中, 不過... 如果連線速度不快, code 很多的話, 通常就會無法把程式的內容再傳回給 TinyMCE 中.

查看了一下程式碼, 發現是利用 Ajax 的功能, 把程式碼傳回到伺服器去利用 GeSHi 來產生 Syntax Highlight 的效果, 然後再傳回到 client, 等收到之後, 再傳回給 TinyMCE. 利用 firebug 追了一下, 看起來在伺服器端並沒有問題, 可以正確的產生資料. 可是 client 端的 Javascript 就是無法取得資料. 因於原本程式的寫法, 執行 Ajax 與接收的地方, 都使用相同的函式來處理, 且程式在呼叫後, 並沒有判斷是否收到資料, 就繼續後頭的動作, 所以傳輸過程一慢, 就會有問題.

動手改了一下程式碼, 也順便把原本做的 "行號" 的功能移除 (因為我不喜歡有這個, 在複製時, 就不會是真的程式內容, 比較麻煩). 整個程式可以由這個地方抓取: http://www.teatime.com.tw/~tommy/files/lifetype/tinymce_insertcode.tgz

下載後, 在 TinyMCE 的 plugins 目錄中解開, 然後修改 insertcode/config/config.php 中的 IC_GESHI_PATH 的設定, 指到你的 GeSHi 的安裝目錄. 然後在 tiny_mce-plog.js 中, 在 plugins 與 theme_advanced_buttons2 中加上 insertcode 之後, 就可以使用這個功能了.

另外, 還需要修改 TinyMCE 的 themes/advanced/css/editor_content.css 的內容與你所使用的樣板的 style.css 的內容, 加上下面的 css 設定:
程式碼:
/* twu2 begin, code attribute */
pre {
border-style: outset;
border-width: thin;
overflow: auto;
font-family: Courier New,Courier,mono;
background-color: #ccffff;
width: 98%;
padding: 1px;
margin: 1px auto 1px auto;
max-height: 100em;
line-height: normal;
}
/* twu2 end, code attribute */
/* twu2 begin insert code */
pre .de1, pre .de2 {font-family: 'Courier New', Courier, monospace; font-weight: normal;color: #000020;}
pre .imp {font-weight: bold; color: red;}
pre .kw1 {color: blue;}
pre .kw2 {color: #000000; font-weight: bold;}
pre .kw3 {color: #000066;}
pre .kw4 {color: #f63333;}
pre .co1, pre .co2, pre .coMULTI {color: #808080; font-style: italic;}
pre .es0 {color: #000099; font-weight: bold;}
pre .br0 {color: #66cc66;}
pre .st0 {color: #ff0000;}
pre .nu0 { color: #cc66cc; }
pre .me1 {color: #006600;}
pre .me2 {color: #006600;}
pre .re0 {color: #0000ff;}
pre .head {font-family: Verdana, Arial, sans-serif;color: #333333;font-weight: bold;background-color: #f0f0ff;border-bottom: 1px solid #d0d0d0;padding: 2px;font-size: 12px;}
pre li {font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;font: normal normal 95% 'Courier New', Courier, monospace; color: #003030;}
pre li.li2 {font-weight: bold;font-weight: bold; color: #006060;}
pre .foot {display: none;}
pre a:link {color: #000060;}
pre a:hover {background-color: #f0f000;}
/* twu2 end intercode */

這樣子就可以做到與我這邊相同的效果了. 當然... 如果顏色不喜歡, 請自行修改吧.

PS. 剛剛發現, 重新編輯文章時, 由 LifeType 再回傳過來的 HTML 中, 把那些 span 的 class 都移除了. 等等再找看看是 LifeType 還是 TinyMCE 造成的.
« 最後編輯時間: 四月 04, 2007, 11:10:39 下午 由 twu2 » 已記錄

twu2
初級會員
**
文章: 61



檢視個人資料 個人網站
« 回覆文章 #1 於: 四月 04, 2007, 11:24:38 下午 »

查了一下, 是因為 TinyMCE 造成的問題, 在 tiny_mce-plog.js 中, 把
程式碼:
cleanup_on_startup : false
上頭這個 cleanup_on_startup 設成 false 就不會有這個問題了.
已記錄

marcoyan
新手見習
*
文章: 8


檢視個人資料
« 回覆文章 #2 於: 四月 07, 2007, 11:12:59 下午 »

剛裝了insertcode還是不能用
後來想說可能是geshi沒裝,所以找了一下

補充:由於它說要搭配Geshi,所以記得要下載喔。
Geshi官網:http://qbnz.com/highlighter/
下載後解壓到 /usr/share/php-geshi,就可以用了,如果你是hosting主機,那你就上傳到你的目錄,然後修改
plugins/insertcode/config/config.php 將 define('IC_GESHI_PATH', '/usr/share/php-geshi/'); 改成你存放的位置就好了

如果有錯歡迎指正喔。
已記錄

相信,用心就能夠看見
http://marcoyan.no-ip.org
lss
我不是被~拉~~出來的,不要叫我大大!
總版主
超級會員
*****
文章: 1511



檢視個人資料 個人網站
« 回覆文章 #3 於: 五月 07, 2007, 12:47:20 上午 »

感謝 tommy 大師,以前找了很久都沒找到,您卻連升級及 bug 都處理好了。

我的 blog 已經安裝了,感謝 tommy 大師啊,請受我三拜 ...or2
lss
« 最後編輯時間: 五月 07, 2007, 12:51:29 上午 由 lss » 已記錄

沒找過 常見問題集或不知道 如何在 LifeType 中文開發論壇發問的人,恕不回答問題
頁: [1]
LifeType 中文開發論壇  |  開發  |  外掛程式  |  讓 TinyMCE 也能有 Syntax Highlight 功能 « 上篇主題 下篇主題 »
    前往: