EditArea - the code editor in a textarea

EditArea examples

Retrieve EditArea on sourceforge or on my personal website.

Example 1

Test in English with php syntax, highlighted, toggle enabled, word-wrap enabled, resize enabled and default toolbar. Also offer the possibility to switch on/off the readonly mode.

<?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>");
?>

Custom controls:

Example 2

Multi file mode example with syntax selection option. The highlight colors of the selected line is also shown.

Custom controls:

Example 3

Test in French with css syntax, verdana font, smaller default font size, toggle disabled, vertical only resize, custom toolbar, visual keyboard plugin, save and load callback examples.

/* toolbar buttons (inspired from tinyMCE ones)*/
.editAreaButtonNormal, .editAreaButtonOver, .editAreaButtonDown, .editAreaSeparator, .editAreaSeparatorLine, .editAreaButtonDisabled, .editAreaButtonSelected {
	border: 0px; margin: 0px; padding: 0px; background: transparent;
	margin-top: 0px;
	margin-left: 1px;
	padding: 0px;
}

.editAreaButtonNormal {
	border: 1px solid #ECE9D8 !important;
	cursor: pointer;
}

.editAreaButtonOver {
	border: 1px solid #0A246A !important;
	cursor: pointer;
	background-color: #B6BDD2;
}

.editAreaButtonDown {
	cursor: pointer;
	border: 1px solid #0A246A !important;
	background-color: #8592B5;
}

.editAreaButtonSelected {
	border: 1px solid #C0C0BB !important;
	cursor: pointer;
	background-color: #F4F2E8;
}

.editAreaButtonDisabled {
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
	-moz-opacity:0.3;
	opacity: 0.3;
	border: 1px solid #F0F0EE !important;
	cursor: pointer;
}

.editAreaSeparatorLine {
	margin: 1px 2px;
	background-color: #C0C0BB;
	width: 2px;
	height: 18px;
}

example 4

Test in German with Python syntax, toggle enabled for a later display, with highlight not enabled by default, without resizing possibility (but with larger minimum height when editor is toggled), and with tabs replaced by 4 spaces.