以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

HTMLArea - 所見即所得的線上編輯器

按 這裡看看範例,如果是你尋找已久的編輯器,再接著往下看。

HTMLArea 是一套免費所見即所得編輯器,用來取代<文字區域(textarea)>欄位。 藉由加些許簡單 JavaScript 程式碼到您的網頁中,您可以用 RichText 編輯器來取代傳統的文字區域,允許用戶執行下列內容:

HTMLArea 著作權屬 InteractiveTools.comDynarch.com 同時基於 BSD 授權條款方式釋出。HTMLArea 由 InteractiveTools.com 創造與開發,並發展到版本 2.03為上。版本 3.0 是由 Mihai Bazon 為 InteractiveTools 設計。

下載

註:官方中文化中,只針對工具列的工具提示進行中文化,但內容有缺漏,這裡的中文化版本是經過我修正過的,修正部份有兩處:

  1. lang\b5.js 這個檔案,其中一些引數錯誤
  2. htmlarea.js 中,有部份顯示未加上中文化,例如基本 HTML 樣式名稱、字級大小和字體。
  3. 範例內容,我也都重新以 BIG5 編碼中文化了。

安裝

很簡單,首先,您必需將 HTMLArea 的檔案上傳到您的網站,再依下列步執行。

  1. 由下載頁面下載最近版本 htmlArea 首頁
  2. 在您的電腦上解壓縮 (請確認不破壞包含於 Zip 檔案中的資料夾結構)
  3. 在您的網站上建立一個新的資料夾,名為 /htmlarea/ (請確認不是包含在 cgi-bin 中)
  4. 把電腦中的檔案上傳到網站 /htmlarea 資料夾內。
  5. 以您使用的瀏覽器,打開範例頁面 /htmlarea/examples/core.html 確保所有功能都正常。

使用

一旦 htmlArea 存在於您的網站上,剩下您要作的只是加些 JavaScript 到您想加入所見即所得編輯器的頁面。以下是怎麼加入的方法:

  1. 定 義一些全域變數,"_editor_url" 必需是 HTMLArea 存在於您網站的絕對路徑。如我們所討論的,應該就是 "/htmlarea/" 才對。"_editor_lang" 必需是您要 HTMLArea 顯示方式的語系代碼,預設值是 "en" (英文,繁體中文為 b5),所有支援的語系清單,請查看 "lang" 這個資料夾。
    <script type="text/javascript"> _editor_url = "/htmlarea/"; _editor_lang = "b5"; </script>
  2. 加入"htmlarea.js" 程式碼
    <script type="text/javascript" src="/htmlarea/htmlarea.js"></script>
  3. 如果您想一次把全部 <textarea> 轉成 HTMLArea-,那麼您可以這麼簡單地執行
    <script type="text/javascript" defer="1"> HTMLArea.replaceAll(); </script>

    當然,如果您想確保執行無誤,可以把 HTMLArea.replaceAll() 加到 <BODY> onload 屬性中。到這裡,你就會看到你的文字區域表單變成所見即所得的編輯器了!整個原始文件看起來就像:

    <script type="text/javascript"> _editor_url = "/htmlarea/"; _editor_lang = "b5"; </script> <script type="text/javascript" src="/htmlarea/htmlarea.js"></script> <BODY onload="HTMLArea.replaceAll();">
使用建議 不過,官方的說明就到此為止了,實際的使用上,還有一個步驟,在送出時能夠真正儲存使用者所編輯出來的內容,以官方文件,的確能造成在使用者介面上有所見 即所得的效果,但實際在儲存資料時,卻是空白一片,原因是沒有真正把使用者所編輯的文字內容,轉到<TEXTAREA>中,於是我們作如下變 動:
  1. 首先加一段 JavaScript 程式在起始
    function initEditor() {
    // 建立 WYSIWYG 編輯器物件, 其中 memo 指的是 <TEXTAREA> 的 ID
            editor = new HTMLArea("memo");
            editor.generate(); return false;
    }
  2. 原啟動指令 HTMLArea.replaceAll() 這時改成 initEditor()
  3. 當使用者按下送出鈕時,加入一段檢查:
    <TEXTAREA ID="memo"></TEXTAREA>
    <input type="button" value="送出" onClick="check();">
  4. check() 內容則至少是:
    function check(){
    // 把所見即所得的文字資料(HTML格式)真正轉到<TEXTAREA>中        if(editor._editMode=="wysiwyg"){               document.sign.memo.value=editor.getHTML(editor._doc.body, false, editor);
            }
    }
    完整的寫法就變成:

    <script type="text/javascript">
    _editor_url = "/htmlarea/";
    _editor_lang = "b5";
    </script>

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

    <script type="text/javascript">
    function initEditor() {
    // 建立 WYSIWYG 編輯器物件, 其中 memo 指的是 <TEXTAREA> 的 ID
            editor = new HTMLArea("memo");
            editor.generate(); return false;
    }

    function check(form){
    // 把所見即所得的文字資料(HTML格式)真正轉到<TEXTAREA>中        if(editor._editMode=="wysiwyg"){
                   form.memo.value=editor.getHTML(editor._doc.body, false, editor);
            }
    }
    </script>

    <BODY onload="initEditor();">

    而表單部份,範例如下:

    <form method="post" action="xxxxxxxxxxx.asp" name="sign">

    <textarea class="formText" id="memo" rows="12" cols="100%"></textarea>
    <input type="button"value=" 送出 " onClick="check(this.form);">

    </form>

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

Can Pilates make you look taller?   2017/8/4 下午 01:03:00

It is not my first time to visit this web page, i am browsing this web site
dailly and obtain good facts from here all the time.

   2017/7/31 上午 12:56:00

Thanks for sharing your thoughts about Photo Shop PhotoShop
DHTML Dynamic HTML DynamicHTML CSS Cascading Style Sheet JavaScript Demo Cool Website Audi Carousel ?A ]p M~ Q?

?A. Regards

http://salleycazarez.jimdo.com   2017/7/31 上午 12:34:00

Very good blog! Do you have any suggestions for aspiring writers?
I'm planning to start my own website soon but I'm a little lost on everything.
Would you advise starting with a free platform like
Wordpress or go for a paid option? There are so many choices out there that I'm
totally confused .. Any suggestions? Kudos!

What is the Ilizarov method?   2017/7/29 上午 02:17:00

Good post. I learn something totally new and challenging on sites I stumbleupon everyday.
It's always exciting to read content from other writers and use a little something from other websites.

How do you strengthen your Achilles tendon?   2017/7/28 上午 11:27:00

It's not my first time to go to see this web page,
i am visiting this website dailly and obtain pleasant information from here daily.

How do you treat Achilles tendonitis?   2017/7/21 下午 12:01:00

Nice post. I learn something new and challenging on blogs I stumbleupon every day.

It will always be helpful to read through content from other authors and
practice something from their sites.

foot pain from shoes   2017/7/3 下午 07:57:00

Good day very cool blog!! Man .. Beautiful .. Superb ..
I'll bookmark your blog and take the feeds additionally?
I am happy to seek out numerous useful information here in the submit, we need work out extra strategies on this regard, thanks for sharing.
. . . . .

foot pain guide   2017/7/2 下午 05:41:00

Hey there, You've done an incredible job. I will certainly digg it and in my opinion suggest to my
friends. I'm sure they'll be benefited from this website.

manicure   2017/5/3 下午 09:24:00

Hi there to every body, it's my first pay a visit of this weblog;
this web site carries awesome and truly fine material designed for readers.

林彥君   2009/10/31 上午 11:27:00

先謝謝您提供許多實用的設計資訊
也買了多本您的大作參考囉!

想請教關於HTMLArea的使用問題:
我發現當textarea沒有任何預設值
且沒有任何輸入的情況下送出表單後
在firefox會自動加上個<br />
但是ie下就不會有這樣的問題

從HTMLArea的程式碼中找到兩個可能的地方
1.table-operations.js中有一行是
var mozbr = HTMLArea.is_gecko ? "<br />" : "";
2.htmlarea.js中有一行是
(HTMLArea.is_gecko) && td.appendChild(doc.createElement("br"));
同時有個註解說firefox喜歡在cell中看到東西...

我有試著把這兩行註解掉
但在firefox中還是會送出<br />

我目前的變通辦法是用預設值當成是沒有輸入的檢查依據
但總覺得不妥
請問如何避免firefox中的問題呢?
麻煩您賜教了
謝謝!
(用您提供的http://audi.tw/Blog/webDesign/HTMLArea/examples/fully-loaded.html 就可以測試了:在firefox中按下enter會送出p包著br,如果是shift+enter會只有br 這個現象在其他的richtext editor也常見到)


卜維丰   2008/9/6 下午 07:29:00

鐵人, 是匠子的...
不管你 = xx , 一定要在 lang 底下大 xx.js 才行, 同樣的, 裡面還有些外掛, 也要有相對應的語系 js 檔

鐵人   2008/9/6 上午 11:11:00

真奇怪
我下載它官方的
HTMLArea-3.0-last-20071025.zip (250K)
在:http://www.dynarch.com/projects/htmlarea/
可是只要一改變<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
跟 _editor_lang = "en";

http-equiv="Content-Type" content="text/html; charset=big5" />
跟 _editor_lang = "b5";

它的編輯器就消失了
是它的程式不能這樣改嗎?
感覺好像FCKeditor比較簡單

卜維丰   2008/9/3 下午 03:14:00

鐵人, 3.0 final 版和 rc1 略有不同, 你可以先上官網去抓 3.0 final 版

由於我手上的版本, 我自己改了很多, 除了內容訊息中文化之外, 我也把一些我個人認為不必要的檢查或警告動作停用, 而且把整個檔案都變 utf-8 格式, 不太適用 big5 系統, 所以我沒有發表, 如果你仍需要, 再留言

程式碼部份先給你

http://audi.tw/temp/.htmlarea.txt

至於其中的按鈕名稱, 你查 lang 底下的 b5.js 就能找到

鐵人   2008/9/2 下午 10:55:00

卜大好

有些連結已失效
可以再找得到嗎
謝謝

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: