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 "
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