EditArea 線上原始碼編輯器

EditArea 是一個原始碼編輯器，可支援原始碼格式化，搜尋字詞高亮顯示，文字替換。目前 EditArea 所支援的程式語言包括：PHP、CSS、Javascript、Python、HTML、XML、VB、C、CPP、SQL、Pascal、Basic、Brainf*ck。能夠用來與同伴們共同開發檢討自己的原始碼問題，或者是以此方式來對學生教學等等。

使用方法：
第一步 載入程式所需要的 JavaScript 檔
<!-- EditArea 的主程式碼 -->
<script language="Javascript" type="text/javascript" src="../edit_area/edit_area_full.js"></script>


第二步 製作 HTML textarea 的位置
<textarea id="example_1" style="height: 350px; width: 100%;" name="test_1">
<?php
        //這些為PHP程式碼直接顯示於編輯器中
$authors = array();
$news = array();
/* this is a long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long comment for showing word-wrap feature */
$query = "SELECT author, COUNT(id) as 'nb_news' FROM news_messages GROUP BY author";
$result = mysql_query($query, $DBnews);
while( $line = mysql_fetch_assoc($result) ){
$authors[$line["author"]] = $line["author"];
$news[$line["author"]] = $line['nb_news'];
}
$list= sprintf("('%s')", implode("', '", $authors));
$query="SELECT p.people_id, p.name, p.fname, p.status, team_name, t.leader_id=p.people_id as 'team_leader', w.name as 'wp_name', w.type
FROM people p, teams t, wppartis wp, wps w
WHERE p.people_id IN $list AND p.org_id=t.team_id AND wp.team_id=t.team_id AND wp.wp_id=w.wp_id
GROUP BY p.people_id";
if(isset($_GET["order"]) && $_GET["order"]!="nb_news")
$query.=" ORDER BY ".$_GET["order"];

$result=mysql_query($query, $DBkal);
while($line = mysql_fetch_assoc($result)){
printf("<tr><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td></tr>", $line["name"], $line["fname"],
$news[$line["people_id"]], $line["status"], $line["team_name"], ($line["team_leader"]=="1")?"yes":"no", $line["type"], $line["wp_name"]);

}
printf("</table>");
?>
</textarea>

第三步 寫入 JavaScript 讓 EditArea 起作用
editAreaLoader.init({
    id: "example_1" // 元素的 ID
    ,start_highlight: true // 初始化是否高亮顯示
    ,allow_resize: "both"
    ,allow_toggle: true
    ,word_wrap: true
    ,language: "en"
    ,syntax: "php"
});

附上程式可修改的參數表

參數	型態	預設	說明
id	字串	null	元素的 ID 名稱
language	字串	'en'	預設的語言內附有多國語言
syntax	字串	''	必須使用高亮顯示的定義文件
start_highlight	布林	false	初始化時是否高亮顯示
is_multi_files	布林	false	使否可讀取多個檔案
min_width	整數	400	最小寬度
min_height	整數	100	最小高度
allow_resize	字串	'both'	可設定為no,both,x,y
allow_toggle	布林	true	是否加入切換功能,編輯器與textarea之間
plugins	字串	''	讀取外掛程式碼
browsers	字串	'known'	可設定為 all,known 全部加載或不支援不加載
display	字串	'onload'	讀取時或可之後顯示 onload,later
toolbar	字串	"search, go_to_line, fullscreen, |, undo, redo, |, select_font,|, change_smooth_selection, highlight, reset_highlight, word_wrap, |, help"	定義將要顯示的工具列表
begin_toolbar	字串	''	添加前定義 toolbar 內容
end_toolbar	字串	''	添加後定義 toolbar 內容
font_size	整數	10	文字大小
font_family	字串	'monospace'	字形
cursor_position	字串	'begin'	可設定 begin,auto 定義光標位置開始或自動
gecko_spellcheck	布林	false	是否啟用 FireFox 2 中的拼寫檢查
max_undo	整數	20	最大可復原步驟
fullscreen	布林	false	是否顯示全螢幕
is_editable	布林	true	是否可以編輯
word_wrap	整數	false	自動換行,可設定字元數或 false
replace_tab_by_spaces	整數	false	確定空格的數量,可設定字元或 false
debug	布林	false	是否進入除錯模式
load_callback	字串	''	讀取後回調此函示
save_callback	字串	''	儲存時回調此函示
change_callback	字串	''	改變內容時回調此函示
submit_callback	字串	''	送出時回調此函示
EA_init_callback	字串	''	剛讀取完成尚未顯示時回調此函示
EA_delete_callback	字串	''	當刪除物件時回調此函示
EA_toggle_on_callback	字串	''	當切換為編輯器時回調此函示
EA_toggle_off_callback	字串	''	當切換回網頁元素時回調此函示
EA_load_callback	字串	''	第一次讀取時回調此函示
EA_unload_callback	字串	''	當取消讀取時回調此函示
EA_file_switch_on_callback	字串	''	取得文件時回調此函示
EA_file_switch_off_callback	字串	''	文件失去焦點回調此函示
EA_file_close_callback	字串	''	文件關閉時回調此函示

作者網站：http://www.cdolivet.com/editarea/?page=editArea
檔案大小：249 KB (包含範例)
檔案下載：http://sourceforge.net/project/showfiles.php?group_id=164008
檔案備份：下載