Ace Editor Custom Field

Description

The Ace text editor is an online code editor written in JavaScript. It matches the features and performance of native editors.

This code example shows how you or your customers can use the Ace editor (loaded off a CDN network) to manage content.  You can drop the code below into the code for a custom field and it should just work.

Ace Editor

Attachment: ace-editor.vtl (1 KB)

Image

Ace Editor Custom Field

Code

<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js" type="text/javascript" charset="utf-8"></script>
<style>
#myAceEditor{
	position:absolute;
	left:100px;
	right:100px;
	bottom:0px;
	top:20px;

	min-height:400px;
	border:1px solid silver;
}
</style>
<div id="myAceEditor">$UtilMethods.htmlifyString($value)</div>



<script>
    var editor = ace.edit("myAceEditor");

    ##editor.setTheme("ace/theme/twilight");
    editor.getSession().setMode("ace/mode/velocity");

	editor.on('blur', function(e) {
		document.getElementById("$field.velocityVarName").value=editor.getValue();
	});
    
</script>