HTMLArea 是一套免費所見即所得編輯器，用來取代<文字區域(textarea)>欄位。
藉由加些許簡單 JavaScript 程式碼到您的網頁中，您可以用 RichText 編輯器來取代傳統的文字區域，允許用戶執行下列內容：
Some of the interesting features of HTMLArea that set's it apart from other web based WYSIWYG editors are as follows:
是的！真的是免費。您可以使用、修改、在您的軟體中散佈或任何您想幹的事。
HTMLArea requires Internet Explorer >= 5.5 (Windows only), or Mozilla >= 1.3-Beta on any platform. Any browser based on Gecko will also work, provided that Gecko version is at least the one included in Mozilla-1.3-Beta (for example, Galeon-1.2.8). However, it degrades gracefully to other browsers. They will get a regular textarea field instead of a WYSIWYG editor.
Just make sure you're using one of the browsers mentioned above and see below.
You can find out more about HTMLArea and download the latest version on the HTMLArea homepage and you can talk to other HTMLArea users and post any comments or suggestions you have in the HTMLArea forum.
本編輯器提供下列快速鍵組合：
It's easy. First you need to upload HTMLArea files to your website. Just follow these steps.
Once htmlArea is on your website all you need to do is add some JavaScript to any pages that you want to add WYSIWYG editors to. Here's how to do that.
<script type="text/javascript"> _editor_url = "/htmlarea/"; _editor_lang = "en"; </script>
<script type="text/javascript" src="/htmlarea/htmlarea.js"></script>
If you want to change all your <textarea>-s into HTMLArea-s then you can use the simplest way to create HTMLArea:
<script type="text/javascript" defer="1"> HTMLArea.replaceAll(); </script>
Note: you can also add the
HTMLArea.replaceAll() code to the onload
event handler for the body element, if you find it more appropriate.
A different approach, if you have more than one textarea and only want
to change one of them, is to use HTMLArea.replace("id") --
pass the id of your textarea. Do not use the
name attribute anymore, it's not a standard solution!
This section applies to HTMLArea-3.0 release candidate 1 or later; prior to this version, one needed to include more files; however, now HTMLArea is able to include other files too (such as stylesheet, language definition file, etc.) so you only need to define the editor path and load "htmlarea.js". Nice, eh? ;-)
While it's true that all you need is one line of JavaScript to create an htmlArea WYSIWYG editor, you can also specify more config settings in the code to control how the editor works and looks. Here's an example of some of the available settings:
var config = new HTMLArea.Config(); // 建立一個新的組態物件 // 並使用所有預設值 config.width = '90%'; config.height = '200px'; // 以下設定頁面主體樣式（黃底黑字） // 所有落段依預設設成粗體 config.pageStyle = 'body { background-color: yellow; color: black; font-family: verdana,sans-serif } ' + 'p { font-width: bold; } '; // 以下會把名為 ID 的文字區域(textarea) 以新的 HTMLArea 物件取代 // HTMLArea 物件包含指定的組態 HTMLArea.replace('id', config);
Important: It's recommended that you add custom features and configuration to a separate file. This will ensure you that when we release a new official version of HTMLArea you'll have less trouble upgrading it.
Using the configuration object introduced above allows you to completely control what the toolbar contains. Following is an example of a one-line, customized toolbar, much simpler than the default one:
var config = new HTMLArea.Config(); config.toolbar = [ ['fontname', 'space', 'fontsize', 'space', 'formatblock', 'space', 'bold', 'italic', 'underline'] ]; HTMLArea.replace('id', config);
The toolbar is an Array of Array objects. Each array in the toolbar defines a new line. The default toolbar looks like this:
config.toolbar = [ [ "fontname", "space", "fontsize", "space", "formatblock", "space", "bold", "italic", "underline", "separator", "strikethrough", "subscript", "superscript", "separator", "copy", "cut", "paste", "space", "undo", "redo" ], [ "justifyleft", "justifycenter", "justifyright", "justifyfull", "separator", "insertorderedlist", "insertunorderedlist", "outdent", "indent", "separator", "forecolor", "hilitecolor", "textindicator", "separator", "inserthorizontalrule", "createlink", "insertimage", "inserttable", "htmlmode", "separator", "popupeditor", "separator", "showhelp", "about" ] ];
Except three strings, all others in the examples above need to be defined
in the config.btnList object (detailed a bit later in this
document). The three exceptions are: 'space', 'separator' and 'linebreak'.
These three have the following meaning, and need not be present in
btnList:
重要：It's recommended that you add custom features and configuration to a separate file. This will ensure you that when we release a new official version of HTMLArea you'll have less trouble upgrading it.
By design, the toolbar is easily extensible. For adding a custom button one needs to follow two steps.
config.btnList 登錄按鈕For each button in the toolbar, HTMLArea needs to know the following information:
You need to provide all this information for registering a new button too. The button ID can be any string identifier and it's used when defining the toolbar, as you saw above. We recommend starting it with "my-" so that it won't clash with the standard ID-s (those from the default toolbar).
登錄按鈕範例 #1
// 取得預設組態值 var config = new HTMLArea.Config(); // 使用 Config.registerButton 登錄新按鈕 // 引數： 按鈕序號(ID), 功能說明, 按鈕圖像, 文字模式, config.registerButton("my-hilite", "Highlight text", "my-hilite.gif", false, // 按下按鈕後呼叫的函式 function(editor, id) { editor.surroundHTML('<span class="hilite">', '</span>'); } );
An alternate way of calling registerButton is exemplified above. Though the code might be a little bit larger, using this form makes your code more maintainable. It doesn't even needs comments as it's pretty clear.
登錄按鈕範例 #2
var config = new HTMLArea.Config(); config.registerButton({ id : "my-hilite", tooltip : "Highlight text", image : "my-hilite.gif", textMode : false, action : function(editor, id) { editor.surroundHTML('<span class="hilite">', '</span>'); } });
You might notice that the "action" function receives two parameters: editor and id. In the examples above we only used the editor parameter. But it could be helpful for you to understand both:
At this step you need to specify where in the toolbar to insert the button, or just create the whole toolbar again as you saw in the previous section. You use the button ID, as shown in the examples of customizing the toolbar in the previous section.
For the sake of completion, following there are another examples.
擴充您自用的按鈕到預設的工具列
config.toolbar.push([ "my-hilite" ]);
客製化的工具列
config.toolbar = [ ['fontname', 'space', 'fontsize', 'space', 'formatblock', 'space', 'separator', 'my-hilite', 'separator', 'space', // here's your button 'bold', 'italic', 'underline', 'space'] ];
注意： in the example above our new button is between two vertical separators. But this is by no means required. You can put it wherever you like. Once registered in the btnList (step 1) your custom button behaves just like a default button.
重要：It's recommended that you add custom features and configuration to a separate file. This will ensure you that when we release a new official version of HTMLArea you'll have less trouble upgrading it.
Please note that it is by no means necessary to include the following code into the htmlarea.js file. On the contrary, it might not work there. The configuration system is designed such that you can always customize the editor from outside files, thus keeping the htmlarea.js file intact. This will make it easy for you to upgrade your HTMLArea when we release a new official version. OK, I promise it's the last time I said this. ;)
// 所有自定的按鈕被按下時，會執行這個程式 // 我們使用了 buttonId 引數來判斷是那個按鈕被觸發了 function clickHandler(editor, buttonId) { switch (buttonId) { case "my-toc": editor.insertHTML("<h1>Table Of Contents</h1>"); break; case "my-date": editor.insertHTML((new Date()).toString()); break; case "my-bold": editor.execCommand("bold"); editor.execCommand("italic"); break; case "my-hilite": editor.surroundHTML("<span class=\"hilite\">", "</span>"); break; } }; // 建立新的組態物件 var config = new HTMLArea.Config(); // 登錄自訂按鈕 config.registerButton("my-toc", "Insert TOC", "my-toc.gif", false, clickHandler); config.registerButton("my-date", "Insert date/time", "my-date.gif", false, clickHandler); config.registerButton("my-bold", "Toggle bold/italic", "my-bold.gif", false, clickHandler); config.registerButton("my-hilite", "Hilite selection", "my-hilite.gif", false, clickHandler); // 擴充按鈕到預設工具列 config.toolbar.push(["linebreak", "my-toc", "my-date", "my-bold", "my-hilite"]); // 以上述組態，用 HTMLArea 物件取代現有的文字區域 HTMLArea.replace("textAreaID", config);