以下為本站文章分類清單

 


中文版(簡體)說明

以下為本站側欄內容

以下為本頁本文內容

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

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

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

HTMLArea 著作權屬 InteractiveTools.com及 Dynarch.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>

以下為文章回應區

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

林彥君   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

卜大好

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

divider

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