Html Rich text editor

Yabba Dabba Doo, the King is gone And so are you…

This time  I passed my drowsy weekend  by build a rich text html editor using Java script. I know very well that one who tries something with JavaScript would definitely be an extrovert in means of spending enormous time. My preliminary work started with a R&D and ended up with awesome data points which helped me build the editor in a very short span of time(2 days).

Following are my brief understanding over the subject I was going on

HTML Editor API provides ability to contain an editable region where users can type and format text using all of the standard formatting commands. Microsoft Internet Explorer 5.5 was the first browser to implement such an API and then Firefox joined the line and reciprocate their API in their browser. The point I mean to say here is functionality for building a rich-text-editor is already implemented at the browsers. Now all we need to know is how to handle those API functionalities for our own custom user experience and benefits.

window.document.designMode = “On”;

We need to tell the browser to open itself in editable mode.
Important notes is that the JavaScript object “document” has a property called designMode which can be set to “on”. This converts html element to be an editable component.

Next attempt is to format or apply styles to the content inside the editable region. This is achieved through execCommand() method of document object whose design mode is set to ‘On’.

document.execCommand(‘ForeColor’, false, ‘red’);

and the selected text will become red.

You believe it or not we have summarized all the import concepts to achieve the goal. With above two commands I mentioned we can do magic and we can build custom rich-text editor without any limitations . . .

Consider everything an experiment.
Click here to know about the productive outcome of this text editor project.



1 Comment

  1. Dinesh Kumar wrote
    at 1:05 PM - 20th December 2012 Permalink

    Good … now we can loot your editor into our projects

Post a Comment

Your email is never published nor shared. Required fields are marked *