public void RenderBaseControl( HtmlTextWriter writer )
{
int editorHeight = EditorHeight.AsIntegerOrNull() ?? 200;
// Add merge field help
if ( MergeFields.Any() )
{
writer.Write( "<div class='codeeditor-header margin-b-md clearfix'>" );
_mfpMergeFields.RenderControl( writer );
writer.Write( "</div>" );
editorHeight = editorHeight - 40;
}
// add editor div
string customDiv = @"<div class='code-editor-container' style='position:relative; height: {0}px'><pre id='codeeditor-div-{1}'>{2}</pre></div>";
writer.Write( string.Format( customDiv, editorHeight, this.ClientID, HttpUtility.HtmlEncode( this.Text ) ) );
// write custom css for the code editor
string customStyle = @"
<style type='text/css' media='screen'>
#codeeditor-div-{0} {{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}}
</style>
";
string cssCode = string.Format( customStyle, this.ClientID );
writer.Write( cssCode );
// make textbox hidden
( (WebControl)this ).Style.Add( HtmlTextWriterStyle.Display, "none" );
// add ace.js on demand only when there will be a codeeditor rendered
if ( ScriptManager.GetCurrent( this.Page ).IsInAsyncPostBack )
{
ScriptManager.RegisterClientScriptInclude( this.Page, this.Page.GetType(), "ace-include", ResolveUrl( "~/Scripts/ace/ace.js" ) );
}
string scriptFormat = @"
var ce_{0} = ace.edit('codeeditor-div-{0}');
ce_{0}.setTheme('ace/theme/{1}');
ce_{0}.getSession().setMode('ace/mode/{2}');
ce_{0}.setShowPrintMargin(false);
document.getElementById('{0}').value = $('<div/>').text( ce_{0}.getValue() ).html().replace(/'/g,""&apos"");
ce_{0}.getSession().on('change', function(e) {{
document.getElementById('{0}').value = $('<div/>').text( ce_{0}.getValue() ).html().replace(/'/g,""&apos"");
{3}
}});
";
string script = string.Format( scriptFormat, this.ClientID, EditorThemeAsString( this.EditorTheme ), EditorModeAsString( this.EditorMode ), this.OnChangeScript );
ScriptManager.RegisterStartupScript( this, this.GetType(), "codeeditor_" + this.ClientID, script, true );
base.RenderControl( writer );
}