http://www.dynarch.com/projects/htmlarea/
使用方法
相關目錄
images
popups
plugins
lang
相關檔案
htmlarea.js
dialog.js
popupdiv.js
popupwin.js
html head 部份
<script type="text/javascript">
_editor_lang = "en";
_editor_url = "./";
</script>
<!-- load the main HTMLArea files -->
<script type="text/javascript" src="./htmlarea.js"></script>
<style type="text/css">html, body { font-family: Verdana,sans-serif;
background-color: #ffffff; color: #000; } a:link, a:visited { color: #00f; }
a:hover { color: #048; } a:active { color: #f00; } textarea { background-color:
#fff; border: 1px solid 00f; }</style>
<script type="text/javascript">
// load the plugin files
HTMLArea.loadPlugin("TableOperations");
var editor = null;
function initEditor() {
// create an editor for the "e_news_articale1content" textbox
editor = new HTMLArea("e_news_articale1content");
// register the TableOperations plugin with our editor
editor.registerPlugin(TableOperations);
editor.generate();
return false;
}
function insertHTML() {
var html = prompt("Enter some HTML code here");
if (html) {
editor.insertHTML(html);
}
}
function highlight() {
editor.surroundHTML('<span style="background-color: yellow">', '</span>');
}
</script>
//e_news_articale1content 為文字區塊的名稱
<body bgcolor="#ffffff" text="#000000" link="#000000" vlink="#000000" alink="#000000" class="BlueNotePageBODY" onload="initEditor()">
//Body 加上 onload="initEditor()"
<textarea name="e_news_articale1content" rows="24" cols="80" id="e_news_articale1content" class="BlueNoteTextarea">
</text>
//TextArea 需有 id 及 name
Mozilla 不能使用複製貼上
http://www.mozilla.org/editor/midasdemo ... prefs.html
線上 HTML 編輯器 HTMLArea
WYSIWYG 網頁線上編輯器比較表
http://www.neo.com.tw/archives/000697.html
WYSIWYG 網頁線上編輯器比較表
在 OpenSource 的 WYSIWYG Editor 當中，早期最多人使用的 HTMLArea 由於原開發團隊進度緩慢，Bug 也很多，造成不少人想跳槽。
這裡有一份幾乎涵蓋所有 WYSIWYG 線上編輯器比較表:
http://www.geniisoft.com/showcase.nsf/WebEditors
OpenSource 跟商用的都有。不過這份資料還是有點小錯誤，像 FCKeditor 的網址也不正確，這些我會回報過去，相信應該很快就可以更正過來。
在 OpenSource 當中，目前風評較佳的是 TinyMCE、FCKEditor、Xinha。
其中 TinyMCE 最受大多數人青睞，速度快又穩定，目前也逐漸提供 Safari 的支援。然而 TinyMCE 除了 HTMLArea 原有的功能外，也導入了 Image Manager + Editor ，可以線上管理及簡單的修改圖片。
至於商用的就沒有研究了，有興趣的人可以去玩玩看囉。^^
相關文章:
Matt Is Busy: TinyMCE versus FCKeditor versus Xinha
pLog 1.0.2 測試站台 (With TinyMCE)
由 Neo 發表於 August 20, 2005 09:23 AM | 引用 (0) |
WYSIWYG 網頁線上編輯器比較表
在 OpenSource 的 WYSIWYG Editor 當中，早期最多人使用的 HTMLArea 由於原開發團隊進度緩慢，Bug 也很多，造成不少人想跳槽。
這裡有一份幾乎涵蓋所有 WYSIWYG 線上編輯器比較表:
http://www.geniisoft.com/showcase.nsf/WebEditors
OpenSource 跟商用的都有。不過這份資料還是有點小錯誤，像 FCKeditor 的網址也不正確，這些我會回報過去，相信應該很快就可以更正過來。
在 OpenSource 當中，目前風評較佳的是 TinyMCE、FCKEditor、Xinha。
其中 TinyMCE 最受大多數人青睞，速度快又穩定，目前也逐漸提供 Safari 的支援。然而 TinyMCE 除了 HTMLArea 原有的功能外，也導入了 Image Manager + Editor ，可以線上管理及簡單的修改圖片。
至於商用的就沒有研究了，有興趣的人可以去玩玩看囉。^^
相關文章:
Matt Is Busy: TinyMCE versus FCKeditor versus Xinha
pLog 1.0.2 測試站台 (With TinyMCE)
由 Neo 發表於 August 20, 2005 09:23 AM | 引用 (0) |
使用 tinyMCE
使用 tinyMCE http://tinymce.moxiecode.com/
先把tinyMCE的pack解壓縮目錄上傳到網站目錄中
在html 加入
<!-- TinyMCE -->
<script language="javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
language : "zh_tw_utf8",
plugins : "style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,flash,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable",
theme_advanced_buttons1_add_before : "save,newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
content_css : "example_full.css",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
external_link_list_url : "example_link_list.js",
external_image_list_url : "example_image_list.js",
flash_external_list_url : "example_flash_list.js",
file_browser_callback : "fileBrowserCallBack",
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true
});
function fileBrowserCallBack(field_name, url, type, win) {
// This is where you insert your custom filebrowser logic
alert("Example of filebrowser callback: field_name: " + field_name + ", url: " + url + ", type: " + type);
// Insert new URL, this would normaly be done in a popup
win.document.forms[0].elements[field_name].value = "someurl.htm";
}
</script>
<!-- /TinyMCE -->
那麼, 要怎麼知道加掛在哪個欄位?
mode : "textareas", --->表示加掛在textareas的欄位中!
先把tinyMCE的pack解壓縮目錄上傳到網站目錄中
在html 加入
<!-- TinyMCE -->
<script language="javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
language : "zh_tw_utf8",
plugins : "style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,flash,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable",
theme_advanced_buttons1_add_before : "save,newdocument,separator",
theme_advanced_buttons1_add : "fontselect,fontsizeselect",
theme_advanced_buttons2_add : "separator,insertdate,inserttime,preview,separator,forecolor,backcolor",
theme_advanced_buttons2_add_before: "cut,copy,paste,pastetext,pasteword,separator,search,replace,separator",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_buttons3_add : "emotions,iespell,flash,advhr,separator,print,separator,ltr,rtl,separator,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
content_css : "example_full.css",
plugin_insertdate_dateFormat : "%Y-%m-%d",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
external_link_list_url : "example_link_list.js",
external_image_list_url : "example_image_list.js",
flash_external_list_url : "example_flash_list.js",
file_browser_callback : "fileBrowserCallBack",
theme_advanced_resize_horizontal : false,
theme_advanced_resizing : true
});
function fileBrowserCallBack(field_name, url, type, win) {
// This is where you insert your custom filebrowser logic
alert("Example of filebrowser callback: field_name: " + field_name + ", url: " + url + ", type: " + type);
// Insert new URL, this would normaly be done in a popup
win.document.forms[0].elements[field_name].value = "someurl.htm";
}
</script>
<!-- /TinyMCE -->
那麼, 要怎麼知道加掛在哪個欄位?
mode : "textareas", --->表示加掛在textareas的欄位中!
Re: 線上 HTML 編輯器 HTMLArea
This is called the stressed
__________
Pass your download vce HP0-Y51 and in first try by using our guaranteed and best quality German.about If you are looking for fast success in downloadvce cisco 642-747 then join today to find complete testking and pass passguide on first try. A person can pick
__________
Pass your download vce HP0-Y51 and in first try by using our guaranteed and best quality German.about If you are looking for fast success in downloadvce cisco 642-747 then join today to find complete testking and pass passguide on first try. A person can pick