65.9K
CodeProject is changing. Read more.
Home

The Big Problem of WYSIWYG Editors

starIcon
emptyStarIcon
starIcon
emptyStarIconemptyStarIconemptyStarIcon

1.27/5 (7 votes)

Oct 3, 2008

CPOL
viewsIcon

27403

downloadIcon

102

The Big Problem of WYSIWYG Editors and How to write a fast loading editor

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)
    {
        // local variables
        string editorText;

        try
        {
            // get editor text
            editorText = _tihEditor.GetText();

            // checks if no text is entered
            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.

    /// <summary>
    /// Converts meta text to html code
    /// </summary>
    /// <param name="metaText"></param>
    /// <returns></returns>
    private string ConvertToHtml(string metaText)
    {
        string result = "";

        try
        {
            // replace '\r\n' with <br />
            result = metaText.Replace("\r\n", "<br />");

            // remove empty meta [B][/B]
            result = result.Replace("[B][/B]", "");

            // remove empty meta [I][/I]
            result = result.Replace("[I][/I]", "");

            // remove empty meta [U][/U]
            result = result.Replace("[U][/U]", "");

            // remove empty meta [URL][/URL]
            result = result.Replace("[URL][/URL]", "");

            // remove empty meta [IMG][/IMG]
            result = result.Replace("[IMG][/IMG]", "");

            // remove empty meta [QUOTE][/QUOTE]
            result = result.Replace("[QUOTE][/QUOTE]", "");

            // remove empty meta [RED][/RED]
            result = result.Replace("[RED][/RED]", "");

            // remove empty meta [GREEN][/GREEN]
            result = result.Replace("[GREEN][/GREEN]", "");

            // remove empty meta [BLUE][/BLUE]
            result = result.Replace("[BLUE][/BLUE]", "");

            // remove empty meta [ORANGE][/ORANGE]
            result = result.Replace("[ORANGE][/ORANGE]", "");

            // remove empty meta [BLACK][/BLACK]
            result = result.Replace("[BLACK][/BLACK]", "");

            // remove empty meta [YELLOW][/YELLOW]
            result = result.Replace("[YELLOW][/YELLOW]", "");

            // replace [B]some_text[/B] with <b>some_text</b>
            result = Regex.Replace(result, @"\[B\]([\w|\W]+?)\[/B\]", @"<b>$1</b>");

            // replace [I]some_text[/I] with <i>some_text</i>
            result = Regex.Replace(result, @"\[I\]([\w|\W]+?)\[/I\]", @"<i>$1</i>");

            // replace [U]some_text[/U] with <u>some_text</u>
            result = Regex.Replace(result, @"\[U\]([\w|\W]+?)\[/U\]", @"<u>$1</u>");

            // replace [URL]some_text[/URL] with <a href='some_text'>some_text</u>
            result = Regex.Replace(result, @"\[URL\]([\w|\W]+?)\[/URL\]", @"<a href='$1'>$1</a>");

            // replace [IMG]some_text[/IMG] with <img src='some_text' alt='' />
            result = Regex.Replace(result, @"\[IMG\]([\w|\W]+?)\[/IMG\]", @"<img src='$1' alt='' />");

            // replace [QUOTE]some_text[/QUOTE] with <div style='border: solid 1px #000000;'>some_text</div>
            result = Regex.Replace(result, @"\[QUOTE\]([\w|\W]+?)\[/QUOTE\]", @"<div style='border: solid 1px #000000;'>$1</div>");

            // replace [RED]some_text[/RED] with <span style='color: #ff0000;'>some_text</span>
            result = Regex.Replace(result, @"\[RED\]([\w|\W]+?)\[/RED\]", @"<span style='color:#ff0000;'>$1</span>");

            // replace [GREEN]some_text[/GREEN] with <span style='color: #00ff00;'>some_text</span>
            result = Regex.Replace(result, @"\[GREEN\]([\w|\W]+?)\[/GREEN\]", @"<span style='color:#00ff00;'>$1</span>");

            // replace [BLUE]some_text[/BLUE] with <span style='color: #0000ff;'>some_text</span>
            result = Regex.Replace(result, @"\[BLUE\]([\w|\W]+?)\[/BLUE\]", @"<span style='color:#0000ff;'>$1</span>");

            // replace [ORANGE]some_text[/ORANGE] with <span style='color: #ffa500;'>some_text</span>
            result = Regex.Replace(result, @"\[ORANGE\]([\w|\W]+?)\[/ORANGE\]", @"<span style='color:#ffa500;'>$1</span>");

            // replace [BLACK]some_text[/BLACK] with <span style='color: #000000;'>some_text</span>
            result = Regex.Replace(result, @"\[BLACK\]([\w|\W]+?)\[/BLACK\]", @"<span style='color:#000000;'>$1</span>");

            // replace [YELLOW]some_text[/YELLOW] with <span style='color: #ffff00;'>some_text</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 :)