Simple Online Rich Text Editor

Fancy Editors have been online for quite some time now. There are some popular ones with lots of features like TinyMCE and CKEditor. These two competing brands have word like interfaces and are both open source. But how do these editors work? They are not simple wrappers to the textarea element like they appear.

If you have used popular browser plugins like FireBug and FirePHP I am sure you may be familiar with inspecting the DOM in a tree like structure. I believe you can get to either by pressing F12 on the keyboard or by using the main menu in each browser. Another way to open up firebug is to right click on an element and choose Inspect Element from the Context Menu that appears.

If you inspect the editor that you have the first thing you should notice is that the editor content is within an iframe. This is not a mistake, because what these editors do is use a simple trick that is built into most browsers which is the ability to switch to an editable mode. Most editors also expand on this capability by allowing you to see the html that is generated, this trick is also built in to a degree but requires a few extra coding steps and a button. As usual however, there is not one specific cross browser way to perform these tasks.


ifrme = document.getElementById ( 'ifrme');
 if ( typeof ( ifrme.document ) != "undefined" ){
 ifrme.document.designMode = "On";
 }
 if ( typeof ( ifrme.contentDocument ) != "undefined" ){
 ifrme.contentDocument.contentEditable = true ;
 ifrme.contentDocument.designMode = "On";
}

If you take a quick look at the above snippet, you will notice that we are getting an id of a pre-existing element named id. For our purposes we are assuming an iframe but there is a simple check that we can do, and we can also even replace the element with something else we want but for all practical purposes the following will suffice.


<iframe id="ifrme"></iframe>

Demo

ttessier

About ttessier

Professional Developer and Operator of SwhistleSoft
This entry was posted in Javascript Development, Web Development. Bookmark the permalink.

One Response to Simple Online Rich Text Editor

  1. moncler says:

    Someone necessarily help to make severely posts I’d state. That is the very first time I frequented your website page and so far? I surprised with the analysis you made to create this actual publish extraordinary. Fantastic job!

Leave a Reply to moncler Cancel reply

Your email address will not be published. Required fields are marked *