I am aware that Javascript WYSIWYG editors use the inbuilt editor mode of the browser to function, but that comes up with various problems and issues.
Can an editor be built from scratch in JS, something like what Buzzword people have done with flash/flex? I came across this blog post recently and I am just wondering if this can be built (atleast to a moderate extent) using Javascript?
It depends what you mean by "from scratch". Google Docs provides a pretty good text editor in JS. Is that what you mean ?
Of course you can do it and it is not very difficult. But before reinventing the wheel please take a look at all the existing ones. Many of them are really very well written and open source.
From scratch I mean, not using the the inbuilt editor mode at all.
If you look at Buzzword, it really is much more realistic as a word processor, as it allows (among other things) stuff like images to wrap around text in a manner that's impossible with the current JS based editors. This is because Buzzword involves uses a collection of TextField objects distributed intelligently across the body of text. Every aspect, right from cursor manipulation and insertion and deletion is built using custom code.
The issue is not that the current JS editors are not sufficient for my needs (they are), but purely from a technical point of view, I wanted to know the feasibility of building such an editor in JS.
Almost anything can be done with JavaScript. You have the basic building tools right there - you can intercept all mouse events and nearly all keyboard events. You can use a GIF animation for simulating the caret. The trickier part might be measuring the size of text so that you can position your caret where you need to. I'm not exactly sure how you could do that. But if you figure that out, the rest is doable. Although it will really require tons of wheel-reinventing code.
Reminds me of a little experiment I did sometime back... I basically tried to create a primitive editor by simply listening to keypresses on a DIV and to insert them into the DIV as a new node. So imagine, each character would be wrapped in a tag! It actually worked. But, once it reaches a couple of paragraphs, node insertion and deletion becomes rather slow. You will type a character, and it would only appear after a slight delay, and this simply unacceptable, and eventually I just gave up. Anyway it was just a random thing I wanted to try out..
Coming back to your question, I wonder if this can be replicated in JS alone as frankly the flash has superior raw processing power compared to JS. Even if it's technically feasible, I doubt whether it will be fast enough to actually work well. My two cents!
Hmm interesting... I do not know how the Buzzword team did it, but laying out textfields like that does not exactly seem easy on the outset. Textfields cannot wrap around like other tags, so at the end of every like you have to probably break them up. And that's not all, when a user edits any line to insert an additional character, this character will displace the last char from the current texfield. This must be appended to the start of the textfield on the next line, which again would cause the last char to drop out... it goes on recursively till the last line. And you have to do all this manipulation and render it on screen almost instantaneously!!
Really interesting... anyone has any suggestions? The geek in me is craving! LOL.