The Big Problem of WYSIWYG Editors

real_coder

Rate me:

1.00/5 (10 votes)

3 Oct 2008CPOL

27K

102

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

Download TihEditorWebApp - 10.61 KB

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

ASP.NET

<%@ 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 :)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

real_coder

Software Developer AspNetSource.com

Bulgaria

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

The Big Problem of WYSIWYG Editors

Introduction

Using the code

Points of Interest

License

Comments and Discussions