[分享] [網頁技術] 即見所得編輯器 HTMLArea

阿輝

網路上常常需要發言的地方都很讓使用者傷腦筋吧
HTML 語法很難記

而且更麻煩的時撰寫時無法知道自己寫的怎麼樣了
發表之後才發現效果不如預期往往讓人心煩

要是網路上發表文章也可以像是 Word, FrontPage 一樣該有多好

注意這篇就要讓網路上的留言版、討論區等加上 即見及所得 的功能
這篇對網站站長、開發者才有閱讀的需求



測試網頁 http://www.palmislife.com/~testh/guestbook/yybbs.cgi

下載如附件
如果需要原廠網站網址，請自行上 Google 搜尋

阿輝

安裝使用教學

這篇文章是最基本的安裝教學
主要是拋磚引玉之用，需要更細節的自訂等功能請參考說明文件或官方網站

本篇以 HTMLArea 3.0 RC1 為例子
這是一個免費的 HTML 即見及所得原件，由 Java Script 實現
目前在 IE 核心瀏覽器以及 FireFox 上都可以正常運行
若不支援的瀏覽器也絲毫不會影響到正常使用

下載後直接解壓縮
將所有檔案 (其實不用全部，不過我懶得說明，就全部吧)

上傳到網站空間中 (此範例為跟目標檔案同路徑的 htmlarea 資料夾)

修改發表文章的頁面或是模版
注意這個原件針對的是表單中的文件區域 (textarea)

在 Head 標題中加入

1. <script type="text/javascript">
   
2.    _editor_url = "htmlarea/";
   
3.    _editor_lang = "b5";
   
4. </script>
   
5. 
   
6. <script type="text/javascript" src="htmlarea/htmlarea.js"></script>
   
7. 
   
8. <script type="text/javascript" defer="1">
   
9.     HTMLArea.replaceAll();
   
10. </script>

複製代碼

這樣該頁面中所有的文字發表區域就會套用即見及所得編輯器了
另外要注意的是建議將 textarea 的列數建議 + 7 因為工具列需要一定額外的空間

修改備註：上面的原始碼中

1. _editor_url = "htmlarea/";
   
2. 
   
3. src="htmlarea/htmlarea.js

複製代碼

這兩個要注意你檔案實際的相對路徑

阿輝

如果不要全部的 textarea 都加入的話
也可以個別加入

例如我有 text1 跟 text2 兩個 textarea 要加入 HTMLArea

則就是將上面的

1. <script type="text/javascript" defer="1">
   
2.     HTMLArea.replaceAll();
   
3. </script>

複製代碼

修改為

1. <script type="text/javascript" defer="1">
   
2.     HTMLArea.replace("text1");
   
3.     HTMLArea.replace("text2");
   
4. </script>

複製代碼

這樣子就行了，要更多更少就一樣類推

阿輝

yy 可以打開 html 支援
在 yybbs 中有選項可以選擇開啟 html 語法

這情況當然是要打開..

Originally posted by FireHouse at 2004-8-6 08:55 PM:
請教一下輝兄，您的 YY-Board 留言板是否有另外修改，
將過濾 HTML 標籤的程式碼給移除 (或註解) 掉呢？
因為我發現 YY-Board 加入 HTMLArea 後，雖然編輯時所見即所得，
不過送出之後文章內容都是 HTML 原始碼... ^ ^"
謝謝指教！