Simple Editor using DIV Control

This post concentrates on how to make a Div control to give like a functionality of Text editor. As this is using one html DIV control and some images controls it will be very light weight to use for normal and simple editor purpose.

The implementation shown below

The aspx script will be

<form id="form1" runat="server">
    <fieldset style="width:798px;">
        <img alt="Bold" style="border: 1px" onclick="cmdExec('bold')" onmousedown="button_down(this)"
            onmouseup="button_up(this)" onmouseout="button_out(this)" onmouseover="button_over(this)"
            src="Images/ed_format_bold.gif" />
        <img alt="Ordered List" onclick="cmdExec('insertorderedlist')" onmousedown="button_down(this)"
            onmouseup="button_up(this)" onmouseout="button_out(this)" onmouseover="button_over(this)"
            src="Images/ed_list_num.gif" />
        <img alt="Italics" style="border: 1px" onclick="cmdExec('italic')" onmousedown="button_down(this)"
            onmouseup="button_up(this)" onmouseout="button_out(this)" onmouseover="button_over(this)"
            src="Images/ed_format_italic.gif" />
        <img alt="UnderLine" onclick="cmdExec('underLine')" onmousedown="button_down(this)"
            onmouseup="button_up(this)" onmouseout="button_out(this)" onmouseover="button_over(this)"
            src="Images/ed_format_underline.gif" />
        <img alt="Unordered List" onclick="cmdExec('insertunorderedlist')" onmousedown="button_down(this)"
            onmouseup="button_up(this)" onmouseout="button_out(this)" onmouseover="button_over(this)"
            src="Images/ed_list_bullet.gif" />
        <img alt="Highlight" onclick="cmdExec('BackColor','ffff00')" onmousedown="button_down(this)"
            onmouseup="button_up(this)" onmouseout="button_out(this)" onmouseover="button_over(this)"
            src="Images/ed_color_bg.gif" />
        <img alt="Remove Highlight" onclick="cmdExec('BackColor','ffffff')" onmousedown="button_down(this)"
            onmouseup="button_up(this)" onmouseout="button_out(this)" onmouseover="button_over(this)"
            src="Images/ed_color_fg.gif" />
        <img alt="Highlight All" onclick="highlight_all('ffff00')" onmousedown="button_down(this)"
            onmouseup="button_up(this)" onmouseout="button_out(this)" onmouseover="button_over(this)"
            src="Images/parea.gif" />
        <img alt="Remove Highlight All" onclick="removehighlight_all('ffffff')" onmousedown="button_down(this)"
            onmouseup="button_up(this)" onmouseout="button_out(this)" onmouseover="button_over(this)"
            src="Images/Backcolor.gif" />
    </fieldset>
    <div id="divTextBox" runat="server"
        contenteditable="true" indicateeditable="true">
    </div>
    
    <input id="btnShowText" value="Show" type="button" onclick="ShowText()" />
    <input id="btnShowHTML" value="Show" type="button" onclick="ShowHTML()" />
    
</form>

The Javascript :

function button_over(iconBtn) {
    iconBtn.style.backgroundColor = "#B5BDD6";
    iconBtn.style.borderColor = "darkblue darkblue darkblue darkblue";
}

function button_out(iconBtn) {
    iconBtn.style.backgroundColor = "threedface";
    iconBtn.style.borderColor = "threedface";
}
function button_down(iconBtn) {
    iconBtn.style.backgroundColor = "#8494B5";
    iconBtn.style.borderColor = "darkblue darkblue darkblue darkblue";
}

function button_up(iconBtn) {
    iconBtn.style.backgroundColor = "#B5BDD6";
    iconBtn.style.borderColor = "darkblue darkblue darkblue darkblue";
}
function highlight_all(color) {
    var str = "<font style=\"background-color: #ffff00\">";
    if (document.getElementById('divTextBox').innerHTML.substring(0, 40) != str)
        document.getElementById('divTextBox').innerHTML = "<font style=\'background-color: #ffff00\'>" + document.getElementById('divTextBox').innerHTML.replace(/#ffffff/gi, "#ffff00") + "</FONT>";
}
function removehighlight_all() {
    var str = "<font style=\"background-color: #ffffff\">";
    if (document.getElementById('divTextBox').innerHTML.substring(0, 40) != str)
        document.getElementById('divTextBox').innerHTML = "<FONT style=\'background-color: #ffffff\'>" + document.getElementById('divTextBox').innerHTML.replace(/#ffff00/gi, "#ffffff") + "</FONT>";
}
function cmdExec(cmd, opt) {
    var selControl = document.getElementById('divTextBox');
    try {
        selControl.focus();
        selControl.document.execCommand(cmd, false, opt);
    }
    catch (ex) {
        alert(ex);
    }
}
function ShowHTML() {
    alert(document.getElementById('divTextBox').innerHTML);
}
function ShowText() {
    alert(document.getElementById('divTextBox').innerText);
}

The css script :

#divTextBox
{
    font-family : Arial;
    font-size: 10pt; 
    font-style:normal; 
    overflow:auto; 
    width:800px;
    WORD-WRAP: break-word;
    background-color:White;
    border-right: #000000 1px solid;
    border-top: #000000 1px solid;
    border-left: #000000 1px solid;
    border-bottom: #000000 1px solid; 
    height: 200px; 
}
#divTextBox p
{
    margin-top:0em;
    margin-bottom:0em;
}

Source code Download.

The output of the code will be as follows