查看: 8360|回復: 12

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

[複製鏈接]

阿輝

3867 主題	126 好友	2626 積分

TA的每日心情

	怒 2011-4-12 00:15

簽到天數: 3 天

連續簽到: 2 天

[LV.2]偶爾看看I

文章: 35006

發消息

電梯直達

1^#

發表於 2004-8-5 01:22 |只看該作者 |倒序瀏覽

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

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

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

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

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

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

本帖子中包含更多資源

您需要登錄才可以下載或查看，沒有帳號？免費註冊

淘帖0 分享0 收藏0 頂0 踩0

回復

使用道具舉報

阿輝

3867 主題	126 好友	2626 積分

TA的每日心情

	怒 2011-4-12 00:15

簽到天數: 3 天

連續簽到: 2 天

[LV.2]偶爾看看I

文章: 35006

發消息

2^#

發表於 2004-8-5 01:23 |只看該作者

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

安裝使用教學

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

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

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

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

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

在 Head 標題中加入

<script type="text/javascript">
_editor_url = "htmlarea/";
_editor_lang = "b5";
</script>
<script type="text/javascript" src="htmlarea/htmlarea.js"></script>
<script type="text/javascript" defer="1">
HTMLArea.replaceAll();
</script>

複製代碼

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

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

_editor_url = "htmlarea/";
src="htmlarea/htmlarea.js

複製代碼

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

回復

使用道具舉報

阿輝

3867 主題	126 好友	2626 積分

TA的每日心情

	怒 2011-4-12 00:15

簽到天數: 3 天

連續簽到: 2 天

[LV.2]偶爾看看I

文章: 35006

發消息

3^#

發表於 2004-8-5 01:42 |只看該作者

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

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

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

則就是將上面的

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

複製代碼

修改為

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

複製代碼

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

阿輝攝影記錄服務 | 婚禮記錄 | 活動拍攝
http://www.giorno.tw/

回復

使用道具舉報

poky

71 主題	0 好友	709 積分

該用戶從未簽到

文章: 675

發消息

4^#

發表於 2004-8-5 02:39 |只看該作者

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

不知道為什麼我的Mozilla Firefox 0.9上無法顯示
這個功能真是太好了，是很多沒學過html的使用者的福音

能解決的事，不必去擔心；不能解決的事，擔心也沒用

回復

使用道具舉報

risumfiriri

43 主題	0 好友	818 積分

免錢的最貴

該用戶從未簽到

文章: 660

發消息

5^#

發表於 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 ]

PIL 個人空間 PDA剪報夾 PDA wiki

回復

使用道具舉報

johnnyk

293 主題	0 好友	2300 積分

Johnny Joker

TA的每日心情

	無聊 2012-7-5 13:24

簽到天數: 1 天

連續簽到: 1 天

[LV.1]初來乍到

文章: 1910

發消息

6^#

發表於 2004-8-5 10:17 |只看該作者

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

神呀~請接受小弟膜拜

好優的工具~~對咱們網站捆工真是一大好物呀！|)

http://www.Johnny5.idv.tw

回復

使用道具舉報

ychao

27 主題	0 好友	1938 積分

TA的每日心情

	開心 2011-4-9 04:43

簽到天數: 1 天

連續簽到: 0 天

[LV.1]初來乍到

文章: 2066

發消息

7^#

發表於 2004-8-5 11:25 |只看該作者

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

看來大概是vb script寫的，mozilla不吃...

Zaurus 字典||ICHEP2004||OLPC in Chinese

回復

使用道具舉報

tales

169 主題	0 好友	4260 積分

該用戶從未簽到

文章: 5723

發消息

8^#

發表於 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

104 主題	4 好友	1429 積分

羊毛大亨

該用戶從未簽到

文章: 1533

發消息

9^#

發表於 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

不知道問題在哪說 ...

頂級喀什米爾羊毛
行腳 ABC - 尼泊爾健行 - 安娜普娜基地營
Fiona 跟 Rita 的環遊世界 80 天

回復

使用道具舉報

sunflier

29 主題	0 好友	217 積分

該用戶從未簽到

文章: 222

發消息

10^#

發表於 2004-8-6 13:16 |只看該作者

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

在 Head 標題中加入

<script type="text/javascript">

_editor_url = "htmlarea/";

_editor_lang = "b5";

</script>
複製代碼

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

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

二、因為小弟是用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

43 主題	0 好友	751 積分

該用戶從未簽到

文章: 829

發消息

11^#

發表於 2004-8-6 20:55 |只看該作者

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

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

回復

使用道具舉報

阿輝

3867 主題	126 好友	2626 積分

TA的每日心情

	怒 2011-4-12 00:15

簽到天數: 3 天

連續簽到: 2 天

[LV.2]偶爾看看I

文章: 35006

發消息

12^#

發表於 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 原始碼... ^ ^"
謝謝指教！

阿輝攝影記錄服務 | 婚禮記錄 | 活動拍攝
http://www.giorno.tw/

回復

使用道具舉報