Sunday, July 5, 2009

Building your own Java Script Editor


A few months ago, I needed to build my own editor which can accept certain tags and attributes. I thought it would be very interesting to share how I built my editor with a "browser independent" feature. To see a demo, click here.

Using The Code

The Design Mode, was the first thing that popped to my mind, then I began to find out which will be the appropriate container "IFrame or div". Then I decided that I will use "div" and its contentEditable attribute -an attribute that makes the entire document editable, like a dedicated HTML editor- will be set to true. Then comes the second step, applying the tags to the selected content.

The Tools.js file contains the basic miscellaneous methods, needed to build the editor. Here is the important methods of the Tools.js. The code below gets the selected Range object that will be used in the editor. Then it checks if the selected range is within our editor div range. If it's not, then return null.

See full detail:


John said...

Great work.Nice explanation.

AngularJs Training
AngularJs Training in Chennai
JavaScript Training
JavaScript Training in Chennai

M Sunny said...

Send SMS text messages in this site WP SMS Marketing are instantly via the internet, desktop software or API.,,visit sit e

prashanth said...

Useful information.
thanks for posting.
keep sharing.