PALMisLIFE 討論區

標題: [分享] [網頁技術] 即見所得編輯器 HTMLArea [列印本頁]
作者: 阿輝    時間: 2004-8-5 01:22
標題: [分享] [網頁技術] 即見所得編輯器 HTMLArea
網路上常常需要發言的地方都很讓使用者傷腦筋吧
HTML 語法很難記

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

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

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



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

下載如附件
如果需要原廠網站網址，請自行上 Google 搜尋
作者: 阿輝    時間: 2004-8-5 01:23
標題: Re: [分享] [網頁技術] 即見所得編輯器 HTMLArea
安裝使用教學

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

本篇以 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>

  6. <script type="text/javascript" src="htmlarea/htmlarea.js"></script>

  8. <script type="text/javascript" defer="1">
  9.     HTMLArea.replaceAll();
  10. </script>
複製代碼


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

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

  1. _editor_url = "htmlarea/";

  3. src="htmlarea/htmlarea.js
複製代碼


這兩個要注意你檔案實際的相對路徑
作者: 阿輝    時間: 2004-8-5 01:42
標題: Re: [分享] [網頁技術] 即見所得編輯器 HTMLArea
如果不要全部的 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>
複製代碼


這樣子就行了，要更多更少就一樣類推
作者: poky    時間: 2004-8-5 02:39
標題: Re: [分享] [網頁技術] 即見所得編輯器 HTMLArea
不知道為什麼我的Mozilla Firefox 0.9上無法顯示
這個功能真是太好了，是很多沒學過html的使用者的福音
作者: risumfiriri    時間: 2004-8-5 09:18
標題: Re: [分享] [網頁技術] 即見所得編輯器 HTMLArea
Originally posted by poky at 2004-8-5 02:39 AM:
不知道為什麼我的Mozilla Firefox 0.9上無法顯示
這個功能真是太好了，是很多沒學過html的使用者的福音


Firefox 瀏覽真的怪怪的~

[ Last edited by risumfiriri on 2004-8-5 at 09:23 ]
作者: johnnyk    時間: 2004-8-5 10:17
標題: Re: [分享] [網頁技術] 即見所得編輯器 HTMLArea
神呀~請接受小弟膜拜

好優的工具~~對咱們網站捆工真是一大好物呀！|)
作者: ychao    時間: 2004-8-5 11:25
標題: Re: [分享] [網頁技術] 即見所得編輯器 HTMLArea
看來大概是vb script寫的，mozilla不吃...
作者: tales    時間: 2004-8-5 17:43
標題: Re: [分享] [網頁技術] 即見所得編輯器 HTMLArea
Originally posted by ychao at 2004-8-5 11:25 AM:
看來大概是vb script寫的，mozilla不吃...

不是啦，看清楚喔，阿輝範例的語法所呼叫的是 JavaScript 啊，
在 IE 裡頭，就算不指定是哪一種 Script ，預設也是 JavaScript 的。
（ IE 的話應該叫做 JScript 就是了）
作者: Dragoon    時間: 2004-8-6 12:50
標題: Re: [分享] [網頁技術] 即見所得編輯器 HTMLArea
真傷腦筋! 遇到這個問題:
http://www.interactivetools.com/ ... search_engine#24964
alert:
'HTMLArea.I18N.msg.Path' empty or not an object  
'this._doc.body' empty or not an object

不知道問題在哪說 ...
作者: sunflier    時間: 2004-8-6 13:16
標題: Re: [分享] [網頁技術] 即見所得編輯器 HTMLArea
在 Head 標題中加入

  1. <script type="text/javascript">
  2.    _editor_url = "htmlarea/";
  3.    _editor_lang = "b5";
  4. </script>
複製代碼


若去看htmlarea/lang/b5.js這個檔，好像是作者把之前2.0版本的中文化直接放進去，沒有做更新。測試的時候，都會一直出現error。若想要費點功夫的話，就把en.js自行中文化吧~或是參考小弟的自己中文化的結果(如後)

另外，小弟也碰到下面兩個問題(後來克服了，解決方案也在其中)
一、在你的網頁原始檔裡面，千萬不能把&lt;textarea&gt;&lt;/textarea&gt;擺在&lt;p&gt;&lt;/p&gt;中間，否則會碰到莫名其妙的錯誤訊息

二、因為小弟是用ASP.net寫的，系統預設都是utf-8編碼，沒想到b5.js這個檔案是ANSI、BIG5編碼... 結果一開始網頁檢視就有問題，我把.aspx這個檔的content type改成big5時，雖然網頁檢視變正常，但把使用者傳入的值再讀出來時，卻變成一堆亂碼。搞了很久，後來用記事本把b5.js打開，再另存成UNICODE編碼，再把.aspx改回成utf-8即可。

再加個小PS：.aspx記得要在原始碼一開始時加上validateRequest=false，否則.net又會跟你鬧小脾氣嚕...

[ Last edited by sunflier on 2004-8-6 at 13:19 ]
作者: FireHouse    時間: 2004-8-6 20:55
標題: Re: [分享] [網頁技術] 即見所得編輯器 HTMLArea
請教一下輝兄，您的 YY-Board 留言板是否有另外修改，
將過濾 HTML 標籤的程式碼給移除 (或註解) 掉呢？
因為我發現 YY-Board 加入 HTMLArea 後，雖然編輯時所見即所得，
不過送出之後文章內容都是 HTML 原始碼... ^ ^"
謝謝指教！
作者: 阿輝    時間: 2004-8-6 22:40
標題: Re: [分享] [網頁技術] 即見所得編輯器 HTMLArea
yy 可以打開 html 支援
在 yybbs 中有選項可以選擇開啟 html 語法

這情況當然是要打開..

Originally posted by FireHouse at 2004-8-6 08:55 PM:
請教一下輝兄，您的 YY-Board 留言板是否有另外修改，
將過濾 HTML 標籤的程式碼給移除 (或註解) 掉呢？
因為我發現 YY-Board 加入 HTMLArea 後，雖然編輯時所見即所得，
不過送出之後文章內容都是 HTML 原始碼... ^ ^"
謝謝指教！
作者: FireHouse    時間: 2004-8-7 06:13
標題: Re: [分享] [網頁技術] 即見所得編輯器 HTMLArea
Originally posted by 阿輝 at 2004-8-6 10:40 PM:
yy 可以打開 html 支援
在 yybbs 中有選項可以選擇開啟 html 語法

這情況當然是要打開..


印象中也是有... 不過就是找不到，
查了半天，發現原來我用的是 5.32 版，根據作者的更新紀錄，
已經把 HTML 語法開啟或關閉的設定選項給拿掉了... ^ ^"
只好手動把轉碼的地方找出來註解掉.. .
謝謝阿輝的答覆！

另外，發現測試的留言板在回覆留言的表單內，
並未出現 HTMLArea 的編輯界面，必須重新整理後才會出現...

可以使用
  1. <body onload="HTMLArea.replaceAll()"...>
複製代碼
來取代下列語法，就正常了:
  1. <script type="text/javascript" defer="1">
  2.    HTMLArea.replaceAll();
  3. </script>
複製代碼

[ Last edited by FireHouse on 2004-8-7 at 14:47 ]



歡迎光臨 PALMisLIFE 討論區 (http://f.pil.tw/) Powered by Discuz! X2.5