lss實驗室

lss實驗室 http://blog.nlhs.tyc.edu.tw/blog/2 我的心得記事，包括 pLog 、 PHP 、 Moodle 、網路管理、電腦科教學、 Wiki ...... lss 2008-11-21T11:11:24Z 更新 TinyMCE 編輯器版本至 2.0.1 final (updated) http://blog.nlhs.tyc.edu.tw/post/2/76 2006/07/24  補充說明：<blockquote>因為 LifeType 1.1 已經將 TinyMCE 做為預設的編輯器，我不準備再更新這個更換 LifeType 編輯器的 patch 。大家一起期待快要推出的 1.1 吧！ </blockquote>謝謝<a title="鍾愛永存" href="http://163.26.95.51/plog/1">鍾愛永存的站長 yugn</a> 替大家打包了更新版本的 TinyMCE <img border="0" alt="微笑" src="http://blog.nlhs.tyc.edu.tw/js/tinymce/jscripts/tiny_mce/plugins/emotions/images/smiley-smile.gif" />。這個更新版本使用了官方最新的 <a title="TinyMCE 下載頁" href="http://tinymce.moxiecode.com/download.php">TinyMCE 2.0.1 final</a> 版本，解決了一些問題，並且包含了 utf-8 的中文化語系。yuan 很客氣的寄給我，讓我先試用。我把其中的一些中文化不正常部份做了一些修改，並且在 Linux 下用 zip 重新打包，免得 Linux 用戶還得手動修改權限。因為 TinyMCE 的文章開始有點多起來了，我未來應該也會多花點時間在關注他，所以增加一個 TinyMCE實驗室的文章分類。以下為更新版本的下載及更新說明： 下載：<a title="LifeType 1.0.2b 使用的 TinyMCE 2.0.1 補充包，用來把 LifeType 內建的 Xinha 編輯器換成 TinyMCE。" href="http://blog.nlhs.tyc.edu.tw/resserver.php?blogId=2&resource=lifetype-1.0.2b-tinymce-2.0.1.zip">lifetype-1.0.2b-tinymce-2.0.1.zip</a>因為 LifeType 預計要 1.1 版之後才會把內建編輯器改成 TinyMCE ，而且最近又要發佈 LifeType 1.0.2 的正式版了，為了應該未來可能的版本變更，我把下載檔的檔名改成如下格式：lifetype-{$lifetype版本}-tinymce-{$tinymce版本}.zip這樣，未來不管因應 LifeType 或 TinyMCE 更新版本而做了放佈新的更新包，都可以從檔名知道這是那個版本用的。TinyMCE 2.0.1更新部份：<ul><li>修正了之前版本無法更新文字的前景色、背景色的錯誤了。 </li><li>官方新增加了繁體中文語系，包括 Big5 ( zh_tw ) 和 UTF-8 ( zh_tw_utf8 )。 (我先前還花了不少時間做中文化說！<img border="0" alt="å“¼ï¼æ&Dagger;¶å¾—ç&dagger;ä½ " src="http://blog.nlhs.tyc.edu.tw/js/tinymce/jscripts/tiny_mce/plugins/emotions/images/smiley-frown.gif" /> )</li><li>其他請參考官方的 <a title="tinymce change log" href="http://tinymce.moxiecode.com/changelog.php">change log</a> 。 </li></ul>本人額外更新部份：<ul><li>已經預設使用 zh_tw_utf8 語系。 </li><li>修正全螢幕無法正常顯示中文語系部份。</li><li>修正插入日期、時間的 tool tips 無法顯示中文的部份。 </li><li>將所有編輯視窗裡的字型大小 ( font-size ) 屬性一律改成 12pt 。</li><li>將插入flash 按鈕從預設工具中移除。</li><li>將插入時間，插入日期加入預設工作按鈕第二列。 </li><li>其他的不記得了… Orz</li></ul>安裝方法，請參考先前的文章：<a title="pLog-TinyMCE-1.0.2-full Part II" href="http://blog.nlhs.tyc.edu.tw/post/2/22">pLog-TinyMCE-1.0.2-full Part II</a> 。另外，關於插入 flash 無法在 IE 顯示的問題，宗欣兄已經<a title="flash 在 IE 不能顯示問題" href="http://plog.hlps.tcc.edu.tw/plog/post/1/378">抓到問題</a>所在了，這確定跟 TinyMCE 無關，目並沒空抓蟲。還有，反斜線( )消失的問題也確定與 TinyMCE 無關，我已經有一點眉目了，不過，最近真的太忙… LifeType實驗室 TinyMCE實驗室 2005-12-09T13:16:18Z lss 替回響加上 TiyMCE 的功能(增修 1 版) http://blog.nlhs.tyc.edu.tw/post/2/63 原來我是覺得，回響不需要這麼複雜的功能，沒什麼興趣實作。可是看了網友 uranusforever 的慘痛經驗(請參閱論壇的這個討論串：<a title="慘痛經驗" href="http://forum.lifetype.org.tw/index.php?topic=1466.0">關於tinymce的問題與建議</a>)，心想有這麼困難嗎？於是便試作看看。剛巧，被<a title="阿欣的部落格" href="http://163.17.156.130/plog/2">阿欣</a>看到了…反正，照下面這樣做就對了： <blockquote>增修 1 版：<ul><li>日期：2005-11-27 </li><li>增加解決在 IE 下無法顯示回響編輯區問題的方法。 </li></ul></blockquote>蠻早之前， <a title="reic's place" href="http://reic.twbbs.org/1">reic</a> 就實作了回響加入 TinyMCE 編輯器的功能，也寫了一篇<a title="http://reic.twbbs.org/post/1/161" href="http://reic.twbbs.org/post/1/161">教學文章</a>，裡面的說明也很清楚，照理應該是無痛安裝享用才對，真是奇怪？ 因為我之前已經把寫文章的 WYSIWYG 編輯器換成 TinyMCE 了，所以等於已經安裝完畢，只要在模版裡面加入相關的 Javascript 程式碼就可以了。首先設定目標： <h4>目標</h4> <ol> <li>回響可以加粗體、斜體、底線、<strike>刪除線</strike>、縮排、超連結、表情符號<img border="0" alt="Cool" title="Cool" src="http://blog.nlhs.tyc.edu.tw/js/tinymce/jscripts/tiny_mce/plugins/emotions/images/smiley-cool.gif" />。</li> <li>按 Enter 鍵時換行而不換段。 </li> </ol> <h4>系統設定值調整 </h4> 回響允許的 HTML 標籤，預設只有 、 、 、 、 、 <a> 這幾個，也就是粗體、斜體、底線、換行、超連結這五個。要達成目標 1 ，得再加上 <strike> (刪除線) 和 <blockquote> (縮排)兩個標籤。 表情符號相當於插入圖檔，所以還要加入 <img> 標籤。不過不用怕網友亂貼圖，只要不提供他插入圖檔的按鈕就好了。  除此之外，配合 TinyMCE 要符合 XHTML 的標籤規範， 要換成 ，而 要換成 。 最後，在 全部站台管控 > 全域設定 的 html_allowed_tags_in_comments 要設定成如下： <blockquote>  <a> <img><strike><blockquote> </blockquote> <h4>模版的修改</h4> TinyMCE 的<a title="官方安裝範例" href="http://tinymce.moxiecode.com/tinymce/docs/installing.html">官方安裝範例</a>是把 Javascript 碼寫在 <head>...</head> 區塊裡，不過，沒有需要寫回響的頁面還要載入這堆 Javascript 蠻浪費頻寬的。大概所有的模版都把寫回響的表單放在 commentform.template 裡，所以，就把這些程式放在這裡吧。把以下的 Javascript 程式碼加入 commentform.template 的最上面。 <blockquote> // 這行是要使用 TinyMCE 時一定要加入的，請參考官方的 TinyMCE 安裝範例。 // src 屬性所指的 tiny_mce.js 的路徑依照替換 Xinha 為後台寫文章路徑，請依你自己網站的安裝自行修改。 <script language="javascript" type="text/javascript" xsrc="{$url->getBaseUrl()}/js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> // 這行則是把 TInyMCE 的所有設定放在另一個 .js 檔裡面，方便編輯管理。 <script language="javascript" type="text/javascript" xsrc="{$url->getTemplateFile("tiny_mce-commentform.js")}"></script> </blockquote> 然後，是這個 tiny_mce-commentform.js 內容。這個檔的位置是放在樣版的所在目錄，這樣才可以很方便的使用 $url->getTemplateFile() 取得檔案路徑。 <blockquote> tinyMCE.init({ mode : "textareas", //theme : "advanced",   // 這個是預設值，所以可以省略！ relative_urls : false,       // 網址不使用相對路徑。 plugins : " emotions",    // 啟用表情符號外掛。要加入其他外掛，則是用逗號分隔。請參考<a title="TinyMCE plugin online documents" href="http://tinymce.moxiecode.com/tinymce/docs/reference_plugins.html">這裡</a>。 theme_advanced_buttons1 : ""          // 依序加入粗/斜/底/刪/縮排/凸排/連結/取消連結/表情符號     +"bold,italic,underline,strikethrough,outdent,indent,link,unlink,emotions", theme_advanced_buttons2 : "",         // 第二工具列不要按鈕。 theme_advanced_buttons3 : "",         // 第三工具列不要按鈕。 language : "zh_tw",                            // 使用繁體中文語系。請確認你有語系檔，我是自己做的中文化，沒做完。 theme_advanced_toolbar_location : "top",      // 工具列靠上。 theme_advanced_toolbar_align : "left",           // 工具列靠左。 force_p_newlines : false                     // 讓按 Enter 由 (段落) 改成 (換行) 。請參考<a title="force_p_newlines" href="http://tinymce.moxiecode.com/tinymce/docs/option_force_p_newlines.html">這裡</a>。 }) </blockquote> 這樣就算完成了，網友寫回響時已經有 TinyMCE 可用了。範例？看文章的回響區啊！ <h4>注意事項 </h4> <ol> <li>再強調一次，我用的 TinyMCE 是由官方網站下載的，路徑則是以「用 TinyMCE 替換 HTMLArea」之後的路徑為準。</li> <li>因為 template editor plugin 預設不支援上傳/建立 .js 檔。如果你用 template editor 產生/編輯 tiny_mce-commentform.template 時，要先在 全部站台管控 > 模版編輯器設定 裡將 .js 加入附加檔名清單後再操作。 </li> <li>如果看不到修改後的結果，請先試試 清除瀏覽器 cache > refresh 網頁 ，應該就可以看到了。當然，前提是以上步驟都沒錯。</li> <li>若嘗試增加功能，只要修改 tiny_mce-commentform.template 就可以了。修改完記得重複步驟 3 才能看到更改後的結果。</li> </ol> 好啦，寫完了。因為趕忙著寫，也許有筆誤的地方。若有疏漏之處，敬請不吝告知，謝謝！ 什麼，怎麼沒有做好的檔案下載？自己動手樂趣多啦！而且，熟悉 LifeType 的人們，自己從我的網站偷吧！很容易耶<img border="0" alt="Wink" title="Wink" src="http://blog.nlhs.tyc.edu.tw/js/tinymce/jscripts/tiny_mce/plugins/emotions/images/smiley-wink.gif" />。 <h4>解決在 IE 下無法顯示回響編輯區的問題 </h4> 謝謝阿欣幫忙發現了這個問題<img border="0" alt="Smile" title="Smile" src="http://blog.nlhs.tyc.edu.tw/js/tinymce/jscripts/tiny_mce/plugins/emotions/images/smiley-smile.gif" />，找到問題所在了<img border="0" alt="Cool" title="Cool" src="http://blog.nlhs.tyc.edu.tw/js/tinymce/jscripts/tiny_mce/plugins/emotions/images/smiley-cool.gif" />。 這個問題並不會發生在每個人身上，因為，問題出在樣版。<a title="TinyMCE's FAQ" href="http://tinymce.moxiecode.com/tinymce/docs/faq.html">官方網站的 FAQ 裡</a>說的很明白： <blockquote>   <h2>TinyMCE is broken, what should I do?</h2> There are a few things you should check before posting questions about your problem at the forum or sourceforge.   <ul> <li>Does TinyMCE work on the <a href="http://tinymce.moxiecode.com/example_full.php?example=true">TinyMCE website</a>. Then you know that TinyMCE works with your browser.</li> <li>Try to disable any other JavaScripts on the page, some scripts interfere with internal functions that TinyMCE uses. Those scripts are probably poorly written.</li> <li>Check that you havn't missed removing the last , character in your initialization code and that all the other rows have a trailing , character.</li> <li>Verify that the path/URL to TinyMCE is correct, you can use the excellent tool <a href="http://www.fiddlertool.com/fiddler/">Fiddler</a> for this and other HTTP debugging.</li> <li>Do not cross domain load TinyMCE or any other script unless you really really must, since this will invoke various browser security features. In other words, try placing everything on the same server.</li> <li>Don't place textareas within paragraph elements since this is not valid HTML and it will break MSIE and TinyMCE.</li> </ul> </blockquote> 最後一點說到，不要把 textareas (也就是寫迴響的那個編輯區， <textarea> ) 放在段落標籤 () 裡面，因為那是不合法的 HTML ，而且會切斷(這個不知道這樣翻好不好？) MSIE 和 TinyMCE 。而我用的 almost-spring 模版的 commentform.template 裡面，就是把 <textarea> 放在 裡面，所以在 IE 下就失效了： <blockquote> .....前略..... <form id="commentform" name="commentform" action="{$url->getBaseUrl()}/index.php" method="post"> <input name="userName" type="text" size="35" />{$locale->tr("comment_username")} (required) <input name="commentTopic" type="text" size="35" />{$locale->tr("comment_topic")} <input name="userUrl" type="text" size="35" />{$locale->tr("comment_url")} <input name="userEmail" type="text" size="35" />{$locale->tr("comment_email")} <strike></strike><textarea rows="10" cols="45" name="commentText"></textarea><strike></strike> <input style="font-weight: bold;" type="submit" name="post" value="&nbsp;{$locale->tr("comment_send")}&nbsp;" /> &nbsp;&nbsp;<input style="font-weight: bold;" type="reset"> .....後略..... </blockquote> 解決方法，把 <textarea> 前後的 刪除就可以了。所以，請檢查一下你的 commentform.template 裡面，<textarea> 是不是被 包住了？ 順便查了一下，這不合法的 HTML 是不合法在那裡？ <a title="HTML 4.01 的 p tag" href="http://www.w3.org/TR/html401/struct/text.html#h-9.3.1">W3C 的 HTML 4.01 中關於 標籤的說明裡面有下面這段：</a><a title="HTML 4.01 的 p tag" href="http://www.w3.org/TR/html401/struct/text.html#h-9.3.1"> </a><blockquote>The <samp class="einst"> P</samp> element represents a paragraph. It cannot contain <a href="http://www.w3.org/TR/html401/struct/global.html#block-inline">block-level elements</a> (including <a class="noxref" href="http://www.w3.org/TR/html401/struct/text.html#edef-P"><samp class="einst">P</samp></a> itself). </blockquote> 後面那一句告訴我們 裡面不可以包含區塊型的標籤，包括 自己。而 <textarea> 正是一個區塊型的標籤。為什麼？看長像就知道了啊！ 這個事件給我幾個啟示： <ol> <li>改完樣版，一定要再用 IE 看一看，別只顧著 Fx 。</li> <li>再一次證明，讀英文文件也是很重要的。</li> <li>關於 標籤的這個限制， IE 做得比 Fx 符合 W3C 的標準。這可真是難得的奇聞啊！ </li> </ol> LifeType實驗室 TinyMCE實驗室 2005-11-25T18:24:36Z lss hwadm 加入 TinyMCE 功能 http://blog.nlhs.tyc.edu.tw/post/2/37 <a href="http://blog.nlhs.tyc.edu.tw/resserver.php?blogId=2&resource=hwadm-screenshot.png"><img border="0" align="right" title="hwadm 編輯作業項目使用 TinyMCE 的截圖" alt="hwadm 編輯作業項目使用 TinyMCE 的截圖" src="http://blog.nlhs.tyc.edu.tw/resserver.php?blogId=2&resource=hwadm-screenshot.png&mode=preview" /></a>hwadm 是我自己寫的一個 PHP 小程式，用來管理學生繳交檔案作業用的。前一陣子研究 TinyMCE 時，順便把編輯畫面加上 TinyMCE 的編輯功能，感覺還不錯，而且很簡單呢。<img border="0" title="Cool" alt="Cool" src="http://blog.nlhs.tyc.edu.tw/js/tinymce/jscripts/tiny_mce/plugins/emotions/images/smiley-cool.gif" />  PHP實驗室 TinyMCE實驗室 2005-11-07T00:41:16Z lss 調整 TinyMCE 編輯區的字型大小 http://blog.nlhs.tyc.edu.tw/post/2/30 有沒有覺得 TinyMCE 編輯區的文字太小，傷眼睛？改成像這樣如何？<img border="0" alt="16pt 大字型的 TinyMCE 編輯區" src="http://blog.nlhs.tyc.edu.tw/resserver.php?blogId=2&resource=tinymce-font-size.png" /> 教你怎麼改。 其實很簡單，找到 /var/www/blog/js/tinymce/jscripts/tinymce/themes 目錄下。因為 pLog 用的是 advanced theme ，所以接下來找 advanced/css 目錄。如果使用 simple theme 的話，則改成 simple/css 目錄。接下來只要修改 editor_content.css 裡面：<blockquote><pre> body { background-color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; scrollbar-3dlight-color: #F0F0EE; scrollbar-arrow-color: #676662; scrollbar-base-color: #F0F0EE; scrollbar-darkshadow-color: #DDDDDD; scrollbar-face-color: #E0E0DD; scrollbar-highlight-color: #F0F0EE; scrollbar-shadow-color: #F0F0EE; scrollbar-track-color: #F5F5F5; } </pre></blockquote>將 font-size 屬性加大就行了。我是改成 16px ，應該夠大了。<img border="0" alt="Smile" title="Smile" src="http://blog.nlhs.tyc.edu.tw/js/tinymce/jscripts/tiny_mce/plugins/emotions/images/smiley-smile.gif" />對了，記得要把瀏覽器的 cache 清掉並重新 renew 網頁，否則瀏覽器會用 cache 裡的 css file ，那就看不見修改效果了。 LifeType實驗室 TinyMCE實驗室 2005-10-25T09:27:17Z lss TinyMCE 小調整 http://blog.nlhs.tyc.edu.tw/post/2/28 TinyMCE 網站上的<a href="http://tinymce.moxiecode.com/example_full.php?example=true">完整範例</a>，工具列滿滿三大列，而 pLog 編輯區這麼小，放個兩列就已經看起來很滿了。還好， TinyMCE 有個 <a href="http://tinymce.moxiecode.com/tinymce/docs/plugin_fullscreen.html">fullscreen</a> 的外掛，可以讓我們用全螢幕編輯。現在的重點是，能否讓 pLog 保持剛剛好夠用的工具列，而在全螢幕時使用完整的工具列呢？答案是可以。參考 TinyMCE 官方網站關於 <a href="http://tinymce.moxiecode.com/tinymce/docs/plugin_fullscreen.html">fullscreen</a> 外掛的說明，可以加額外的參數使全螢幕時的使用不同的功能設定值如下(官方文件範例)：<blockquote><pre>tinyMCE.init({  theme : "advanced",  mode : "textareas",  plugins : "fullscreen",  theme_advanced_buttons3_add : "fullscreen",  fullscreen_settings : {   theme_advanced_path_location : "top"  } }); </pre></blockquote>紅色部份就是加額外參數的地方。我主要是想把表格的所有工具按鈕都放在全螢幕的第三列工具列上，所以，我在 /var/www/blog/js/tinymce/jscripts/tinymce/ 目錄下的 tiny_mce-plog.js 設定檔，第 17 - 19 行處，做了如下的修改：<pre>        theme_advanced_buttons3 : "",         fullscreen_settings : {                 theme_advanced_buttons3 : "tablecontrols"         },         theme_advanced_toolbar_location : "top",         theme_advanced_toolbar_align : "left",         theme_advanced_path_location : "bottom",</pre>也就是全螢幕模式下，將第三列工具列加上 tablecontrols ，也就是所有表格工具。特別注意，別忘記右大括號旁那個逗點。少了它，會讓 IE 的編輯工能失常。 LifeType實驗室 TinyMCE實驗室 2005-10-21T15:43:42Z lss pLog-TinyMCE-1.0.2-full Part III http://blog.nlhs.tyc.edu.tw/post/2/23 我調測過的編輯環境是我自己認為已經夠用了。但是每個人的感覺不同，不能一概而論。可以調整的部份，大概就是工具列按鈕了。這個部份，<a href="http://ajer001.blog.twntwn.info/">阿駕</a>在他的部落格發表了篇文章「<a target="_blank" href="http://ajer001.blog.twntwn.info/post/1/535">修改 TinyMCE 編輯器的按鈕</a>」，寫的蠻清楚的，值得參考。我只打算寫下一些注意事項及個人調校心得。 調整 TinyMCE 環境，要編輯的檔案為 /var/www/blog/js/tinymce/jscripts/tinymce/tiny_mce-plog.js 。TinyMCE 有許多 plugin 可以調用，這些 plugin 安裝在 /var/www/blog/js/tinymce/jscripts/tinymce/plugins 目錄下。要調用時，請修改 tiny_mce-plog.js 裡的第 6 行：<blockquote>plugins : "fullscreen,table,contextmenu,emotions,flash,insertresource",</blockquote>將 plugin 的名稱(也是是 plugins 目錄下的各子目錄名稱)寫在雙引號之內，用逗號分隔。我調用的 plugin 有：<blockquote><table width="400" border="1"><tbody><tr><td align="center">fullscreen</td><td>使用全螢幕編輯模式 </td></tr><tr><td align="center">table </td><td>插入表格及各項表格功能 </td></tr><tr><td align="center">contextmenu </td><td>編輯區的右鍵選單 </td></tr><tr><td align="center"> emotions</td><td>表情符號圖示 </td></tr><tr><td align="center"> flash</td><td>支援插入 flash 動畫檔 </td></tr><tr><td align="center"> insertresource</td><td>Mark 寫的 plugin ，支援插入檔案中心的檔案。 </td></tr></tbody></table></blockquote>其它還有很多 plugin 可用。關於各 plugin 的說明，請官方網站的 <a href="http://tinymce.moxiecode.com/tinymce/docs/reference_plugins.html">plugin 說明(英文)</a> 。這邊要特別注意一件事： insertresource 一定要放在第 6 行所有列出 plugin 的最後面，否則其它 popup 視窗的 plugin 如 emotions 、 table 、 flash 等都會無法使用。為了測這一點花了我一下午的時間。我猜這可能跟 Mark 寫 insertresource 時，調用 popup 視窗的方法跟 TinyMCE 內建的方法不同所引起，目前無暇深究，況且 javascript 也非我強項。這個就等待有心人解決吧！調用了 plugin 之後，接下來要把 plugin 提供的按鈕加到工具列上。  tiny_mce-plog.js 裡的第 9 、10 、11 行分別用來設定編輯區工具列的第 1 、 2 、3 列。有那些內建的按鈕可用，可以參考官方網站的 <a href="http://tinymce.moxiecode.com/tinymce/docs/option_theme_advanced_buttons_n.html">theme_advanced_buttons<1-n></a> 說明。這裡就只要注意別讓工具列太長而破壞編輯區的版面就行了。哦！還有，就是不要打錯字啦！<img border="0" alt="Wink" title="Wink" src="http://blog.nlhs.tyc.edu.tw/js/tinymce/jscripts/tiny_mce/plugins/emotions/images/smiley-wink.gif" />那就這樣囉！如果對這一系列三篇文章有意見，歡迎討論！如果是有關技術支援的討論，請移駕 pLog 中文開發論壇<a href="http://forum.plogworld.org.tw/index.php?topic=1292.0">這裡</a>集中討論。  LifeType實驗室 LifeType架站系列 TinyMCE實驗室 2005-10-18T22:21:44Z lss pLog-TinyMCE-1.0.2-full Part II http://blog.nlhs.tyc.edu.tw/post/2/22 在開始動手前，當然先談談免責聲明，也就是說，這是我的筆記，所寫的內容已證實在我的主機上是可行的。但不保證在任何機器上都是可行的(意外難免嘛！)。在跟著動手之前，最好先做個備份，以免發生任何意想不到的狀況導致資料的毀損。那就開始吧！ 首先，請先下載我重新打包的 <a title="完整整合TinyMCE與pLog，替代Xinha的良方。" href="http://blog.nlhs.tyc.edu.tw/resserver.php?blogId=2&resource=pLog-TinyMCE-1.0.2-full.zip">pLog-TinyMCE-1.0.2-full.zip</a> (以下簡稱 full 包)。再次聲明，這裡面是原版的 TinyMCE 2.0RC2 加上 Mark 的 pLog-TinyMCE-1.0.2.zip 裡面針對 pLog 增加的功能部份，以及我的一番精心調測的結果。先說明 full 包裡面的內容：<ul><li>js 目錄：裡面是 TinyMCE 和 Mark 寫的 pLog 整合程式。</li><li>templates 目錄：裡面是 Mark 修改過管理界面會用到的樣版檔。 </li></ul>安裝的步驟與 <a title="使用TinyMCE取代HTMLArea" href="http://blog.nlhs.tyc.edu.tw/post/2/17">使用TinyMCE取代HTMLArea</a> 文章大同小異，當然，先記得備份哦！<blockquote><pre>#先將下載的 full 包解壓縮，得到 js 與 templates 兩個目錄</pre><pre>cd /tmp</pre><pre>unzip pLog-TinyMCE-1.0.2-full.zip </pre><pre>#備份原來的 js 目錄</pre><pre>cd /var/www/blog</pre><pre>tar zcvf js.tar.gz js</pre><pre>#將解開的 js 目錄覆蓋 pLog 的 js 目錄</pre><pre>cp -Rpf /tmp/js/* js</pre><pre>#備份 admin 樣版</pre><pre>cd /home/plogdata/templates</pre><pre>tar zcvf admin.tar.gz admin</pre><pre>#將解開的 templates 裡的 admin 目錄下的樣版覆蓋 pLog 的 admin 樣版</pre><pre>cp -f /tmp/templates/admin/* admin/</pre><pre>#完成</pre></blockquote>接下來可能得重新設定一次 WYSIWYG 選項：<blockquote>以管理員進管理界面 -> 全部站台管控 -> 全域設定 -> WYSIWYG 選項，先選「否」，更新，再選「是」，再更新一次。</blockquote>然後就可以脫離 HTMLArea 的魔掌，好好享用 TinyMCE 的樂趣了。下一篇則用來說明如何自行調校 TinyMCE 的工具列，讓他更符合個人需求。   LifeType實驗室 LifeType架站系列 TinyMCE實驗室 2005-10-18T21:44:30Z lss pLog-TinyMCE-1.0.2-full Part I http://blog.nlhs.tyc.edu.tw/post/2/21 根據 Mark 在 Mantis 裡的<a target="_blank" title="Mantis 的相關討論" href="http://bugs.plogworld.net/view.php?id=659">描述</a>，當初因為上載檔案的限制，他把 TinyMCE 給減肥了。於是，當我想使用 TinyMCE 的 plugin 時，沒東西可用。於是，我決定下載完整的新版 <a title="TinyMCE 2.0RC3" href="http://prdownloads.sourceforge.net/tinymce/tinymce_2_0RC3.zip?download">TinyMCE 2.0RC3</a> ，並整合 Mark 的 <a title="pLog-TinyMCE-1.0.2.zip" href="http://bugs.plogworld.net/file_download.php?file_id=300&amp;amp;amp;type=bug">pLog-TinyMCE-1.0.2.zip</a> ，製作一個全功能的 pLog-TinyMCE-1.0.2-full.zip 。先看看完成後的文章編輯介面： <blockquote> <a href="http://blog.nlhs.tyc.edu.tw/resserver.php?blogId=2&resource=tinymce-font-size.png"><img border="0" alt="16pt 大字型的 TinyMCE 編輯區" src="http://blog.nlhs.tyc.edu.tw/resserver.php?blogId=2&resource=tinymce-font-size.png&mode=preview" /></a> </blockquote> 可以看到，工具列變成兩列，除了原來的  Xinha  的工具之外，還有： <ul> <li>文字的顏色及背景顏色。</li> <li>文字的上標及下標功能。</li> <li>製作 blockquota 和階層式項目符號及編號的</li> <ul> <li>段落縮排及凸排。</li> </ul> <li>段落格式。</li> <li>插入表格。 <table width="200" border="1" style="border-width: 1px"><tbody> <tr> <td> 表格</td> <td>表格 </td> </tr> <tr> <td> 表格</td> <td> 表格</td> </tr> </tbody></table> </li> <li>水平線。 <hr width="100%" size="2" /></li> </ul> 除此之外，我還加入了： <ul> <li>插入 flash 動畫。</li> </ul> <blockquote><object classid="D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="255"><param name="movie" value="http://web.nlhs.tyc.edu.tw/~lss/homework/110753movie.swf" /><param name="quality" value="high" /><param name="menu" value="false" /><param name="wmode" value="" /><embed src="http://web.nlhs.tyc.edu.tw/~lss/homework/110753movie.swf" wmode="" quality="high" menu="false" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="255"></embed></object> </blockquote> 最重點：斜線不會隨便被吃掉了。 <blockquote><pre><?php</pre><pre>require_once 'HTML/QuickForm/Controller.php';</pre><pre>require_once 'HTML/QuickForm/Action.php';</pre>// Start the session <pre>session_start();</pre><pre>$hwupload =& new HTML_QuickForm_Controller('homeworkUpload', true);</pre><pre>$hwupload->addPage(new DisplayLogin('login'));</pre><pre>$hwupload->addPage(new DisplayHomeworkList('homeworklist'));</pre><pre>$hwupload->addPage(new DisplayUploadFile('uploadfile'));</pre><pre>$hwupload->addPage(new DisplayResult('result'));</pre><pre>$hwupload->addAction('gethomeworklist',  new ActionGetHomeworkList());</pre><pre>$hwupload->addAction('ftpfile', new ActionFtpFile());</pre><pre>$hwupload->addAction('logout', new ActionLogout());</pre><pre>$hwupload->addAction('display', new ActionDisplay());</pre><pre>$hwupload->run();</pre><pre>?></pre></blockquote> 下一篇接著說明如替換我另外打包的整合包。  LifeType實驗室 LifeType架站系列 TinyMCE實驗室 2005-10-18T19:58:01Z lss 使用TinyMCE取代HTMLArea http://blog.nlhs.tyc.edu.tw/post/2/17 pLog 的 WYSIWYG 編輯器使用的是 HTMLArea 。其 bug 一直以來都為人所垢病。1.0.2 beta 換用了 HTMLArea branch 出來的 Xinha 編輯器，用得還是不太滿意(可能有太多 HTMLArea 的影子吧，純 kimogi 問題。)Mark  曾在 mantis 上發佈一個<a target="_blank" href="http://bugs.plogworld.net/view.php?id=659">替代方案</a>，使用 <a title="TinyMCE Site" target="_self" href="http://tinymce.moxiecode.com/">TinyMCE</a> 取代 HTMLArea ，並已在 <a title="pLog 中文測試站" target="_self" href="http://dev.plogworld.org.tw">pLog 中文測試站</a>測試過可以正常運作。可惜 Oscar 要等到 pLog 1.1 版才要換用它。我等不及了，於是自己動手： 首先下載 Mark 做的 <a title="TinyMCE for plog 1.0.2 patch" target="_self" href="http://bugs.plogworld.net/file_download.php?file_id=300&type=bug">pLog-TinyMCE-1.0.2.zip</a>。 接著，解壓縮後可以得到 pLog-TinyMCE-1.0.2 目錄，裡面還有 js 和 templates 目錄。 處理 plog/js 目錄：  <blockquote>#為免意外先備份要取代的目錄： cd /var/www/blog/js tar zcvf htmlarea.tar.gz htmlarea/ editor/ ui/ #刪除 HTMLArea 相關 script rm -rf htmlarea/ editor/ ui/ #複製 Mark patch 裡的 js 目錄 cp -Rpf somewhere/pLog-TinyMCE-1.0.2/js/* . </blockquote> 處理 plog/templates/admin 目錄：  <blockquote>#為免意外先備份要取代的目錄： cd /home/plogdata/templates tar zcvf admin.tar.gz admin/ #複製 Mark pathc 裡的 templates 相關檔案 cp -Rpf somewhere/pLog-TinyMCE-1.0.2/templates/* . </blockquote> 安裝到此算是完成。接著要讓 pLog 使用新的編輯器，要修改設定： <blockquote>以管理員進管理界面 -> 全部站台管控 -> 全域設定 -> WYSIWYG 選項，先選「否」，更新，再選「是」，再更新一次。</blockquote> 接著就可以脫離 HTMLArea 的魔掌換用 TinyMCE 了。  LifeType實驗室 TinyMCE實驗室 2005-10-18T09:07:31Z lss