Menu
I am trying to develop an Online editor (like FCKEditor/etc) but I have no idea how they work. I know that the WYSIWYG ones have Javascript and IFrames, but how do they actually work?
I'm especially curious about having a real-time preview of what's being typed into the editor.
918
A text editor refers to any form of computer program that enables users to create, change, edit, open and view plain text files. They come already installed on most operating systems but their dominant application has evolved from notetaking and creating documents to crafting complex code.
The online text editor is the part of the modern invention that is making it easier for people to edit their text files without any hassle. The online text editing tool on SmallSEOTools is a complete package as it comes with advanced text editing features. You can use this to edit any text file in a couple of minutes.
WYSIWYG is a content editing tool. In WYSIWYG editors the edited content whether text or graphics, appears in a form close to a final product. So instead of manually writing source code, you deal with a convenient rich text editor in which you manipulate design elements.
RTE are usually (always?) implemented using an iframe. The document object which is available inside that iframe must have the property designMode set to on. After this point all you have to do in order to implement basic functionality like bold, italic, color, background, etc. are done using the execCommand method of the document object.
The main reason for using an iframe is that you won't lose focus of the selection when clicking styling buttons (Firefox allows setting this property only on iframes). Further more, the contentEditable attribute is not available in Firefox versions previous to 3.
Things get a little more complicated when you want to do fancy things with that RTE. At that point you must use Range objects (which are implemented differently in the various browsers).
121
FCKEditor is open source and the source code is freely available.
The code for the editor used on Stackoverflow is also available
It might be worth spending some time reading through the source code. People here would be happy to help explain any bits of code that were unclear.
21
I believe the key to WYSIWYG editors is the contenteditable attribute (which can apply to any HTML tag, but presumably something like a div in this case). The rest of the functionality is typically provided by Javascript accessing the DOM and manipulating the HTML. With regards to the preview feature, this is probably just a matter of hooking the event that's raised when the element is edited by the user and then fetching its HTML and displaying it elsewhere on the page using some relatively straightforward Javascript.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
