2005年11月25日 星期五

替回響加上 TiyMCE 的功能(增修 1 版)

原來我是覺得，回響不需要這麼複雜的功能，沒什麼興趣實作。可是看了網友 uranusforever 的慘痛經驗(請參閱論壇的這個討論串：關於tinymce的問題與建議)，心想有這麼困難嗎？於是便試作看看。剛巧，被阿欣看到了…

反正，照下面這樣做就對了：

增修 1 版：

  • 日期：2005-11-27
  • 增加解決在 IE 下無法顯示回響編輯區問題的方法。

蠻早之前， reic 就實作了回響加入 TinyMCE 編輯器的功能，也寫了一篇教學文章，裡面的說明也很清楚，照理應該是無痛安裝享用才對，真是奇怪？

因為我之前已經把寫文章的 WYSIWYG 編輯器換成 TinyMCE 了，所以等於已經安裝完畢，只要在模版裡面加入相關的 Javascript 程式碼就可以了。首先設定目標：

目標

  1. 回響可以加粗體、斜體、底線、刪除線、縮排、超連結、表情符號。
  2. 按 Enter 鍵時換行而不換段。

系統設定值調整

回響允許的 HTML 標籤，預設只有 <b> 、 <i> 、 <u> 、 <br> 、 <br /> 、 <a> 這幾個，也就是粗體、斜體、底線、換行、超連結這五個。要達成目標 1 ，得再加上 <strike> (刪除線) 和 <blockquote> (縮排)兩個標籤。

表情符號相當於插入圖檔，所以還要加入 <img> 標籤。不過不用怕網友亂貼圖，只要不提供他插入圖檔的按鈕就好了。

除此之外，配合 TinyMCE 要符合 XHTML 的標籤規範，<b> 要換成 <strong> ，而 <i> 要換成 <em> 。

最後，在 全部站台管控 > 全域設定 的 html_allowed_tags_in_comments 要設定成如下：

<a><em><br><br/><strong><img><u><strike><blockquote>

模版的修改

TinyMCE 的官方安裝範例是把 Javascript 碼寫在 <head>...</head> 區塊裡，不過，沒有需要寫回響的頁面還要載入這堆 Javascript 蠻浪費頻寬的。大概所有的模版都把寫回響的表單放在 commentform.template 裡，所以，就把這些程式放在這裡吧。把以下的 Javascript 程式碼加入 commentform.template 的最上面。

// 這行是要使用 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>

然後，是這個 tiny_mce-commentform.js 內容。這個檔的位置是放在樣版的所在目錄，這樣才可以很方便的使用 $url->getTemplateFile() 取得檔案路徑。

tinyMCE.init({
mode : "textareas",
//theme : "advanced", // 這個是預設值，所以可以省略！
relative_urls : false, // 網址不使用相對路徑。
plugins : " emotions", // 啟用表情符號外掛。要加入其他外掛，則是用逗號分隔。請參考這裡。
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 由 <p> (段落) 改成 <br> (換行) 。請參考這裡。
})

這樣就算完成了，網友寫回響時已經有 TinyMCE 可用了。範例？看文章的回響區啊！

注意事項

  1. 再強調一次，我用的 TinyMCE 是由官方網站下載的，路徑則是以「用 TinyMCE 替換 HTMLArea」之後的路徑為準。
  2. 因為 template editor plugin 預設不支援上傳/建立 .js 檔。如果你用 template editor 產生/編輯 tiny_mce-commentform.template 時，要先在 全部站台管控 > 模版編輯器設定 裡將 .js 加入附加檔名清單後再操作。
  3. 如果看不到修改後的結果，請先試試 清除瀏覽器 cache > refresh 網頁 ，應該就可以看到了。當然，前提是以上步驟都沒錯。
  4. 若嘗試增加功能，只要修改 tiny_mce-commentform.template 就可以了。修改完記得重複步驟 3 才能看到更改後的結果。

好啦，寫完了。因為趕忙著寫，也許有筆誤的地方。若有疏漏之處，敬請不吝告知，謝謝！

什麼，怎麼沒有做好的檔案下載？自己動手樂趣多啦！而且，熟悉 LifeType 的人們，自己從我的網站偷吧！很容易耶。

解決在 IE 下無法顯示回響編輯區的問題

謝謝阿欣幫忙發現了這個問題，找到問題所在了。

這個問題並不會發生在每個人身上，因為，問題出在樣版。官方網站的 FAQ 裡說的很明白：

TinyMCE is broken, what should I do?

There are a few things you should check before posting questions about your problem at the forum or sourceforge.

  • Does TinyMCE work on the TinyMCE website. Then you know that TinyMCE works with your browser.
  • Try to disable any other JavaScripts on the page, some scripts interfere with internal functions that TinyMCE uses. Those scripts are probably poorly written.
  • Check that you havn't missed removing the last , character in your initialization code and that all the other rows have a trailing , character.
  • Verify that the path/URL to TinyMCE is correct, you can use the excellent tool Fiddler for this and other HTTP debugging.
  • 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.
  • Don't place textareas within paragraph elements since this is not valid HTML and it will break MSIE and TinyMCE.

最後一點說到，不要把 textareas (也就是寫迴響的那個編輯區， <textarea> ) 放在段落標籤 (<p>) 裡面，因為那是不合法的 HTML ，而且會切斷(這個不知道這樣翻好不好？) MSIE 和 TinyMCE 。而我用的 almost-spring 模版的 commentform.template 裡面，就是把 <textarea> 放在 <p> 裡面，所以在 IE 下就失效了：

.....前略.....
<form id="commentform" name="commentform" action="{$url->getBaseUrl()}/index.php" method="post">
<p><input name="userName" type="text" size="35" />{$locale->tr("comment_username")} (required)</p>
<p><input name="commentTopic" type="text" size="35" />{$locale->tr("comment_topic")}</p>
<p><input name="userUrl" type="text" size="35" />{$locale->tr("comment_url")}</p>
<p><input name="userEmail" type="text" size="35" />{$locale->tr("comment_email")}</p>
<p><textarea rows="10" cols="45" name="commentText"></textarea></p>
<p><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"></p>
.....後略.....

解決方法，把 <textarea> 前後的 <p> 刪除就可以了。所以，請檢查一下你的 commentform.template 裡面，<textarea> 是不是被 <p> 包住了？

順便查了一下，這不合法的 HTML 是不合法在那裡？

W3C 的 HTML 4.01 中關於 <p> 標籤的說明裡面有下面這段：

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

後面那一句告訴我們 <p> 裡面不可以包含區塊型的標籤，包括 <p> 自己。而 <textarea> 正是一個區塊型的標籤。為什麼？看長像就知道了啊！

這個事件給我幾個啟示：

  1. 改完樣版，一定要再用 IE 看一看，別只顧著 Fx 。
  2. 再一次證明，讀英文文件也是很重要的。
  3. 關於 <p> 標籤的這個限制， IE 做得比 Fx 符合 W3C 的標準。這可真是難得的奇聞啊！
張貼者： lss 於 下午6:24
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)