Introduction
You use WYSIWYG editors in your web apps, don't you ? Do you like the loading speed of a page that contains WYSIWYG editor ? I don't like slow loading of page and I think that most of the WYSIWYG editor has too much useless options, so I created fast loading editor (no images,
10 lines of css and 5 javascript) which contains only the basic options:
Using the code
First, include in your asp.net web app the files:
TihEditorControl.ascx
TihEditorControl.ascx.cs
They contain all the code for the editor (No additional css, js, images).
In the page you want to use the editor, include it as a normal web control:
in aspx page
<%@ Register Src="~/TihEditorControl.ascx" TagName="TihEditor" TagPrefix="usr" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<usr:TihEditor ID="_tihEditor" runat="server"></usr:TihEditor>
</div>
<br /><br /><br />
<div>
<asp:Button ID="_submitBtn" Text="View Editor Text" runat="server"
onclick="_submitBtn_Click" />
</div>
<br /><br /><br />
<div>
<asp:Label ID="_resultLbl" runat="server" ForeColor="Red"></asp:Label>
</div>
<div>
<asp:Literal ID="_resultLiteral" runat="server"></asp:Literal>
</div>
</form>
</body>
in code-behind, handle the submit button click on postback:
protected void _submitBtn_Click(object sender, EventArgs e)
{
string editorText;
try
{
editorText = _tihEditor.GetText();
if (string.IsNullOrEmpty(editorText))
{
_resultLbl.Text = "No Text Entered";
return;
}
_resultLiteral.Text = ConvertToHtml(editorText);
_resultLbl.Text = "Result: ";
}
catch (Exception ex)
{
_resultLbl.Text = ex.ToString();
}
}
ConvertToHtml is a method that converts the editors meta text to real html code using Regular Expressions.
private string ConvertToHtml(string metaText)
{
string result = "";
try
{
result = metaText.Replace("\r\n", "<br />");
result = result.Replace("[B][/B]", "");
result = result.Replace("[I][/I]", "");
result = result.Replace("[U][/U]", "");
result = result.Replace("[URL][/URL]", "");
result = result.Replace("[IMG][/IMG]", "");
result = result.Replace("[QUOTE][/QUOTE]", "");
result = result.Replace("[RED][/RED]", "");
result = result.Replace("[GREEN][/GREEN]", "");
result = result.Replace("[BLUE][/BLUE]", "");
result = result.Replace("[ORANGE][/ORANGE]", "");
result = result.Replace("[BLACK][/BLACK]", "");
result = result.Replace("[YELLOW][/YELLOW]", "");
result = Regex.Replace(result, @"\[B\]([\w|\W]+?)\[/B\]", @"<b>$1</b>");
result = Regex.Replace(result, @"\[I\]([\w|\W]+?)\[/I\]", @"<i>$1</i>");
result = Regex.Replace(result, @"\[U\]([\w|\W]+?)\[/U\]", @"<u>$1</u>");
result = Regex.Replace(result, @"\[URL\]([\w|\W]+?)\[/URL\]", @"<a href='$1'>$1</a>");
result = Regex.Replace(result, @"\[IMG\]([\w|\W]+?)\[/IMG\]", @"<img src='$1' alt='' />");
result = Regex.Replace(result, @"\[QUOTE\]([\w|\W]+?)\[/QUOTE\]", @"<div style='border: solid 1px #000000;'>$1</div>");
result = Regex.Replace(result, @"\[RED\]([\w|\W]+?)\[/RED\]", @"<span style='color:#ff0000;'>$1</span>");
result = Regex.Replace(result, @"\[GREEN\]([\w|\W]+?)\[/GREEN\]", @"<span style='color:#00ff00;'>$1</span>");
result = Regex.Replace(result, @"\[BLUE\]([\w|\W]+?)\[/BLUE\]", @"<span style='color:#0000ff;'>$1</span>");
result = Regex.Replace(result, @"\[ORANGE\]([\w|\W]+?)\[/ORANGE\]", @"<span style='color:#ffa500;'>$1</span>");
result = Regex.Replace(result, @"\[BLACK\]([\w|\W]+?)\[/BLACK\]", @"<span style='color:#000000;'>$1</span>");
result = Regex.Replace(result, @"\[YELLOW\]([\w|\W]+?)\[/YELLOW\]", @"<span style='color:#ffff00;'>$1</span>");
}
catch (Exception)
{
}
return result;
}
Points of Interest
I like to optimize my pages to load really fast :)
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.