めも帖

「めも帖」代わりにダラダラと書いていったり、めもしたりしているだけです。

WYSIWIGエディタと、Form.Element.Observer()

イベントを監視するというのが、JavaScriptや、ActionScriptで肝になることが多いようなのです。JavaScriptの場合は、通信方法とかもでしょうか(ActiopnScriptは、最初からある程度備えているような気がします)。


で、Prototype.jsにはformのイベントを監視するのがあります。ということは、これでよくあるWYSIWIGエディタというのが作れるのかも?Form.Element.Observerというファンクションで可能かも

サンプル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript">
<script type="text/javascript" charset="UTF-8" src="../prototype.js.1.5"></script>
<title>EDIT</title>
<style type="text/css">
#edit {
	margin:10px;
	border:1px solid #cccccc;
	width:200px;
	height:200px;
	float:left;
}

#sample {
	overflow: auto;
	margin:10px;
	border:1px solid #cccccc;
	width:200px;
	height:200px;
	float:left;
}
</style>
<script type="text/javascript">
function formedit(){
	new Form.Element.Observer('edit', 0.5, function(element, value){
		$('sample').innerHTML = value;
	});
}

window.onload = formedit;
</script>
</head>
<body>

<form><textarea name="name" id="edit"></textarea></form>

<div id="sample">サンプル</div>

</body>
</html>