Click here to Skip to main content
11,715,022 members (68,790 online)
Click here to Skip to main content

The Big Problem of WYSIWYG Editors

, 3 Oct 2008 CPOL 16.5K 68 11
Rate this:
Please Sign up or sign in to vote.
The Big Problem of WYSIWYG Editors and How to write a fast loading editor


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 web app the files:



 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="" >
<head runat="server">
    <title>Untitled Page</title>
    <form id="form1" runat="server">
      <usr:TihEditor ID="_tihEditor" runat="server"></usr:TihEditor>
    <br /><br /><br />

      <asp:Button ID="_submitBtn" Text="View Editor Text" runat="server" 
            onclick="_submitBtn_Click" />
    <br /><br /><br />
      <asp:Label ID="_resultLbl" runat="server" ForeColor="Red"></asp:Label>
      <asp:Literal ID="_resultLiteral" runat="server"></asp:Literal>

 in code-behind, handle the submit button click on postback:

protected void _submitBtn_Click(object sender, EventArgs e)
        // local variables
        string editorText;

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

            // checks if no text is entered
            if (string.IsNullOrEmpty(editorText))
                _resultLbl.Text = "No Text Entered";

            _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.

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

        // 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 Smile | :)



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


About the Author

Software Developer
Bulgaria Bulgaria
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralNice... Pin
Marc74yr753-Oct-08 11:06
memberMarc74yr753-Oct-08 11:06 
GeneralRe: Nice... Pin
real_coder3-Oct-08 11:25
memberreal_coder3-Oct-08 11:25 
GeneralRe: Nice... Pin
Marc74yr753-Oct-08 11:46
memberMarc74yr753-Oct-08 11:46 
GeneralRe: Nice... Pin
real_coder3-Oct-08 12:36
memberreal_coder3-Oct-08 12:36 
GeneralRe: Nice... Pin
Viral Upadhyay3-Oct-08 23:27
memberViral Upadhyay3-Oct-08 23:27 
GeneralRe: Nice... Pin
real_coder4-Oct-08 3:08
memberreal_coder4-Oct-08 3:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

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

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150901.1 | Last Updated 3 Oct 2008
Article Copyright 2008 by real_coder
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid