Try It & Ace

[EarthDweller]

Will be very nice to replace textarea on "Try it yourself" pages on Ace editor.

Demo: http://ace.c9.io/build/kitchen-sink.html

Some of options:

– Syntax highlighted editor;

– Themes;

– Highlight errors for HTML,CSS,JS,PHP,...;

– Emmet;

– Find/Replace by text/regexp

– and more.

Keyboard Shortcuts: https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts

Simple variant: http://jsfiddle.net/ertutggz/5/

Edited June 1, 2015 by EarthDweller

[EarthDweller]

JS can be used on "Try It" pages:

var styleElem = document.createElement("style");styleElem.innerHTML = "pre { height: 100%; margin: 0; }";document.body.appendChild(styleElem);var scriptElem = document.createElement("script");scriptElem.src = "https://rawgithub.com/ajaxorg/ace-builds/master/src/ace.js";var editor;scriptElem.onload = function(){	editor = ace.edit( "textareaCode" );	editor.setOptions({		enableBasicAutocompletion: true		,enableSnippets: true		,enableLiveAutocompletion: true		,animatedScroll: true		,highlightActiveLine: true		,highlightGutterLine: true		,highlightSelectedWord: true		// EMMET		,enableEmmet: true		,readOnly: false		,minLines: 0		,maxLines: 0		,setAutoScrollEditorIntoView: false		,newLineMode: "unix"		,showInvisibles: true		,tabSize: 2		,useSoftTabs: false		,wrapBehavioursEnabled: true		,wrap: "free"		,fontSize: "15px"		,wrapLimit: null	});	editor.commands.addCommand({		name: 'myCommand',		bindKey: {win: 'Ctrl-Enter',  mac: 'Command-Enter'},		exec: function(editor) {			submitTryit()		}	});	editor.getSession().setMode("ace/mode/html");	editor.setTheme("ace/theme/tomorrow_night_bright");	document.querySelector("button.seeResult").onclick = submitTryit;	document.onkeydown = function(event) {		if(event.ctrlKey && ([83,115].indexOf(event.which) != -1)) {			event.preventDefault();			submitTryit();			return false;		}	}};document.body.appendChild(scriptElem);function submitTryit()	{		var t=editor.getValue();		t=t.replace(/=/gi,"w3equalsign");		var pos=t.search(/script/i);		while (pos>0)			{				t=t.substring(0,pos) + "w3" + t.substr(pos,3) + "w3" + t.substr(pos+3,3) + "tag" + t.substr(pos+6);				pos=t.search(/script/i);			}		if ( navigator.userAgent.match(/Safari/i) ) {			t=escape(t);			document.getElementById("bt").value="1";		}		document.getElementById("code").value=t;		document.getElementById("tryitform").action="tryit_view.asp?x=" + Math.random();		validateForm();		document.getElementById("iframeResult").contentWindow.name = "view";		document.getElementById("tryitform").submit();	}

JS bookmark to replace textarea on TryIt pages to Ace editor:

javascript:void((function(svc) {var styleElem = document.createElement("style"); styleElem.innerHTML = "pre { height: 100%; margin: 0; }"; document.body.appendChild(styleElem); var scriptElem = document.createElement("script"); scriptElem.src = "https://rawgithub.com/ajaxorg/ace-builds/master/src/ace.js"; var editor; scriptElem.onload = function(){ editor = ace.edit( "textareaCode" ); editor.setOptions({ enableBasicAutocompletion: true ,enableSnippets: true ,enableLiveAutocompletion: true ,animatedScroll: true , highlightActiveLine: true , highlightGutterLine: true ,highlightSelectedWord: true , enableEmmet: true ,readOnly: false ,minLines: 0 ,maxLines: 0 ,setAutoScrollEditorIntoView: false ,newLineMode: "unix" ,showInvisibles: true ,tabSize: 2 ,useSoftTabs: false ,wrapBehavioursEnabled: true ,wrap: "free" ,fontSize: "15px" ,wrapLimit: null}); editor.commands.addCommand({ name: 'myCommand', bindKey: {win: 'Ctrl-Enter',  mac: 'Command-Enter'}, exec: function(editor) { submitTryit() }}); editor.getSession().setMode("ace/mode/html"); editor.setTheme("ace/theme/tomorrow_night_bright"); document.querySelector("button.seeResult").onclick = submitTryit; document.onkeydown = function(event) { if(event.ctrlKey && ([83,115].indexOf(event.which) != -1)) { event.preventDefault(); submitTryit(); return false; } } }; document.body.appendChild(scriptElem); function submitTryit() { var t=editor.getValue(); t=t.replace(/=/gi,"w3equalsign"); var pos=t.search(/script/i); while (pos>0) { t=t.substring(0,pos) + "w3" + t.substr(pos,3) + "w3" + t.substr(pos+3,3) + "tag" + t.substr(pos+6); pos=t.search(/script/i); } if ( navigator.userAgent.match(/Safari/i) ) { t =escape(t); document.getElementById("bt").value="1"; } document.getElementById("code").value=t; document.getElementById("tryitform").action="tryit_view.asp?x=" + Math.random(); validateForm(); document.getElementById("iframeResult").contentWindow.name = "view"; document.getElementById("tryitform").submit(); }})())

Edited August 2, 2015 by EarthDweller