/// <summary>
/// Renders the base control.
/// </summary>
/// <param name="writer">The writer.</param>
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);
}
/// <summary>
/// Renders the base control.
/// </summary>
/// <param name="writer">The writer.</param>
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
var encodedText = HttpUtility.HtmlEncode(this.Text);
string customDiv = $@"<div class='code-editor-container {this.CssClass}' style='position:relative; height: {editorHeight}px'><pre id='codeeditor-div-{this.ClientID}'>{encodedText}</pre></div>";
writer.Write(customDiv);
// write custom css for the code editor
string styleTag = $@"
<style type='text/css' media='screen'>
#codeeditor-div-{this.ClientID} {{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}}
</style>
";
writer.Write(styleTag);
// 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}.getSession().setUseWrapMode({7});
ce_{0}.setShowPrintMargin(false);
ce_{0}.commands.addCommand({{
name: 'Toggle Fullscreen',
bindKey: 'F11',
exec: function(editor) {{
Rock.controls.fullScreen.toggleFullscreen(editor.container);
editor.resize()
}}
}});
$('#codeeditor-div-{0}').data('aceEditor', ce_{0});
document.getElementById('{0}').value = $('<div/>').text( ce_{0}.getValue() ).html().replace(/'/g,""&apos"");
ce_{0}.getSession().on('change', function(e) {{
// get the raw content from the codeEditor
var contents = ce_{0}.getValue();
// set the input element value to the escaped value of contents
document.getElementById('{0}').value = $('<div/>').text( contents ).html().replace(/'/g,""&apos"");
{3}
}});
// disable warning about block scrolling
ce_{0}.$blockScrolling = Infinity;
ce_{0}.setReadOnly({4});
ce_{0}.on('blur', function(e) {{
{5}
}});
// make sure the editor is sized correctly (fixes an issue when editor is used in a modal)
setTimeout(function () {{
ce_{0}.resize();
}}, 0);
{6}
";
string script = string.Format(
scriptFormat,
this.ClientID, // {0}
EditorThemeAsString(this.EditorTheme), // {1}
EditorModeAsString(this.EditorMode), // {2}
this.OnChangeScript, // {3}
this.ReadOnly.ToTrueFalse().ToLower(), // {4}
this.OnBlurScript, // {5}
this.OnLoadCompleteScript, // {6}
this.LineWrap.ToString().ToLower() // {7}
);
ScriptManager.RegisterStartupScript(this, this.GetType(), "codeeditor_" + this.ClientID, script, true);
base.RenderControl(writer);
}