Rich Text Editor

<html>
<head>
<script language="JScript">

function startDoc() {
myeditor.document.designMode="On";
}

function performEditorFunction(mycommand) {
myeditor.focus();
myeditor.document.execCommand(mycommand,false);
}

function myMouseOverAction(actionButtonRef)
{
actionButtonRef.style.borderColor = '#999999';
actionButtonRef.style.backgroundColor = '#FFFF00';
actionButtonRef.style.cursor = 'hand';
}

function myMouseOutAction(actionButtonRef)
{
actionButtonRef.style.borderColor = '#999999';
actionButtonRef.style.backgroundColor = '#FFFFFF';
}

function myMouseDownAction(actionButtonRef)
{
actionButtonRef.style.backgroundColor = '#00FF00';
}

function myMouseUpAction(actionButtonRef)
{
actionButtonRef.style.backgroundColor = '#FFFFFF';
}

</script>
<style>
.actionButton
{
border: 1px solid;
border-color: #000000;
}

</style>
<title>Sample Code for Rich Text Editor</title>
</head>
<body onload="startDoc();">
<iframe width="600" height="300" id="myeditor"></iframe>

<IMG src="bold.gif" class="actionButton" onClick="performEditorFunction('Bold');" onMouseOver="myMouseOverAction(this)" onMouseOut="myMouseOutAction(this)" onMouseDown="myMouseDownAction(this)" onMouseUp="myMouseUpAction(this)">

</body>
</html>

Feedbacks about this page from members:

text box - Muhammad Azhar

The Code

Because of differences in the browsers, the code will sometimes need to differentiate between browsers. A Boolean variable is defined at the start to manage this task:

// test the browser

var bIsNetscape = (navigator.appName == "Netscape");

The editor is managed fully by a single JavaScript class called “RichEdit”. The constructor (below) has arguments for name, text-box style, initial character style and some initial text.

function RichEdit(name, editStyle, charStyle, sText)

{

// initialize some internal values

this.bInFocus = false;

The charStyle argument defines the initial style settings to use for new characters. It also defines the set of styles that the RichEdit code will process, more on this later.

// save the character style for later

this.style = charStyle;

The RichEdit object is designed to be instantiated inline with the HTML page load, so the first thing that must be done is to create a place to insert the RichEdit controls, this will be called the insertion point as the rest of the code will use this place to insert HTML elements onto the page.

// create an insertion point.

document.write('

');

this.oInsertionPoint = document.getElementById(name);

Once the insertion point is created, standard DOM methods are used to insert further elements. The first element to go in is the ‘text’ box, which is modeled using a

element. The editStyle argument is applied to the

to give it the desired look and feel and the supplied text is inserted

// the 'text' box - or where the text goes

this.oDiv = document.createElement('div');

// set the styles

this.copyStyle(this.oDiv, editStyle);

this.oDiv.style.overflow = "auto";

this.oDiv.style.wordWrap = "break-word";

// insert the text

if ( sText ) this.setHTML(sText);

// link back to this object

this.oDiv.oRichEdit = this;

(12 Apr 2008)

What purpose? - Rafay Bin Ali

What exactly is the purpose of the javascript code you have provided? I mean there are many ways to accomplish a task; you have provided another way. But, it is nevertheless incomplete code. I apologize but I dont get your point in providing this code? What exactly is wrong with my code?

Further, the feedback seems to be taken from this site

http://www.webreference.com/programming/javascript/gr/column11/

So, what exactly is the point?

(13 Apr 2008)

Feedbacks - Rafay Bin Ali

All users are welcome to provide feedbacks. All criticisms, whether negative and positive, are most welcome. However, the only think that is not welcome is partial code that is taken from other web sites without quoting references.

Even if code is taken from other web sites (which is not a big issue), BUT please at least provide full explanation in the feedback.

In the above feedback, I am unable to figure out the purpose of the code and the purpose for feedback. What exactly is wrong with my code?

Please provide complete feedback so that if there is anything to learn from your feedback, I can learn from it. With partial feedback, there is no learning process involved since I am unable to comprehend your feedback.

(13 Apr 2008)

Submit Feedback View All Feedbacks