How do online text editors work?

Question

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.

Answer 1

(ex: ah, there is an input-text border-less, that sync with the actually showing part. So to put the letter in red they just change the style) and etc..

that is how it is done.

Answer 2

If it is, explain me better how the letters change colors inside the textbox

Answer 3

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.

Answer 4

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.

Answer 5

Update: If you just need an editor, I suggest you use any one of the other suggestions people here have given. But if you have some academic purpose for building this, the following will be a springboard.

---

This is accomplished rather easily (some parts). For example, you could use jQuery to get up and running real quick.

div.theScreen {
  width:320px;
  height:75px;
  border:1px solid #CCCCCC;
  background-color:#f1f1f1;
}

<div class="theScreen"></div>
<div><textarea class="typePad"></textarea></div>

Now that we have markup and styles in place, we can add some simple Javascript to trigger real-time previews.

$(document).ready(function(){
  $(".typePad").keyup(function(){
    $(".theScreen").html($(".typePad").val());
  });
});

This is a very crude and simple example, but it will get you started.

Answer 6

Is there a reason why you don't simply use and/or edit FCK editor to your liking?

Answer 7

I started an open source "sourceforge" project to make a rich text editor about a year and a half ago. I never figured out how to get my code on there, however to develop it I had to research how the "content editable mode" works in IE and Firefox. My research included mostly the firefox website and the microsoft website.

The code that I saw to do this was ugly and not very OO friendly (sorry I'm an object bigot I can't help it) so it took a lot of re-factoring to get into to a form that I could develop from and extend.

Unfortunately, even if you follow the functionality provided by the browser's "content editable mode" you will still end up with an editor that is full of bugs. The reason for that is that "content editable mode" doesn't work consistently with pasting from MS Word (everyone tries this) or creating numbered lists, and the mark up that it generates will be inconsistent and poorly formed.

This is why I now use TinyMCE. TinyMCE is full of design decisions that I personally would have avoided, but they have fixed the majority of the bugs that you will get when trying to make your own editor. It is also full of features that will allow you to customize it to your needs.

I can't recommend anything else because I haven't really tried the alternatives.

While TinyMCE seems to be the best option, it is still a headache to me because pasting Word documents is still unpredictable, the WYSIWYG promise is not really possible in HTML but the customer expects it, and there are many issues that creep up once you start letting users put raw HTML in your database. (especially when your code base has parts last updated in 1993...)

Answer 8

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).