トップページ / JavaScriptオンラインエディタ

JavaScriptオンラインエディタ

スクリプトを入力ボックスに書いて「スクリプト実行」ボタンを押すとWEB上でJavaScriptを実行＆動作確認できます。

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js"></script>
<script type="text/javascript">
<!--
var editor;
window.onload = function() {
	editor = new Ajax.InPlaceEditor("line_editor", "./save.php", {
		"okText": "SAVE", // 保存ボタンのラベル
		"cancelText": "CANCEL", // キャンセルボタンのラベル
		"savingText": "SAVING...", // 保存中テキスト
		"clickToEditText": "click and save", // ツールチップヒント
		"rows": 1, // 行数
		"cols": 80, // 横文字数
		"highlightcolor": "red", // ハイライト色
		callback: function(form, value) { // 送信前に実行される関数
			alert(value+'を送信');
			return "save="+value; // url?save=～ がAjaxで送信される
		},
		onComplete: function() { // 完了時に呼ばれるメソッド
			alert('完了');
		},
		onFailure: function() { // 失敗時に呼ばれるメソッド
			alert('失敗');
		},
		ajaxOptions: { // Ajax.Requestに渡す時と同様のOption
			"method": "get"
		}
	});
}

function execute() {
	editor.dispose();
}
//-->
</script>
<body>
<form>
<div id="line_editor" style="background-color:red">クリックで編集</div>
</form>
<button onclick="execute()">インライン編集停止</button>
</body>

スクリプト実行結果が表示されます。