DIY: Rich text editor in javascript

Seen those cool WYSIWYG editors for in javascript ? Mystical ?
Yeah, a lot of code, a lot of eyecandy, and most of them quite slow to load.

However, the core "engine" is quite simple:

<html>
<head>
<script>
function Start() {
  e = document.getElementById("edit");
  e.contentWindow.document.designMode = "on";
  e.contentWindow.focus();
}
</script>
</head>
<body onLoad="Start()">
<iframe id="edit" width="200px" height="200px"></iframe>
<a href="javascript:alert(document.getElementById('edit').contentWindow.document.body.innerHTML)">check</a>

</body>
</html>

That's it. Copypaste this HTML into a file, load it into your browser and you can paste various funky stuff into it, edit it, and then hit "check" and see the resulting HTML. Highly amusing.

Ajaxlife 3d - maybe with javascript ? :-)

Now, after all these touchy posts, something bit more geeky.

When I first heard about AjaxLife, I thought "hmm. got to be a phishing". Well, it did sound too good to be true. (And looking at the picture, it seemed like a full-blown 3D-rendered landscape, which according to my knowledge was impossible. And still is :-)

So, I'd like to use this post to publicly apologize to Katharine for my scepticism, as I mistook a static picture for a dynamically rendered one :) I tried the ajaxlife since, and indeed it works great, very nifty.

However, I'm still haunted by that "3D in the browser" thing, and today googled for a few interesting items - some of them might be well-known to you, some are not - they're not a bloody-edge, but do provide some food for thought.


The demo of the <canvas> tag, which is almost a classic now. The textured version gives around 3-5fps on my laptop with the "high res textures". Which is almost comparable to SL performance that I get (although indeed with much more graphics in it)

realtime 3D rendering demo - a very neat hack with using the <div> elements to create right triangles, some math to render arbitrary triangles by a reduced number of divs. well, and once you can render any 2d triangle of an arbitrary color.. all the rest is a boring mechanics :)

Full-functional raytracer entirely in javascript Useless for dynamic graphics, a total CPU hog (and I don't want to see the DOM that the image of 128x128 creates :), but maybe useful for experiments with in-browser rendering of sculpties, if coupled with pnglets for saving the resulting works ?

Since I obviously definitely will not ever have time to mess around with it - just coining the idea in the hope that someone with enough time and passion for SL might look at this - representing at least the relative positions of avatars in 3D in the browser might be quite a fun.

(And in case there are any teachers out there - I'd think it might make a good topic for a project in a coming school year - a mix of 3D rendering, some HTML, Javascript coding, and server-side coding looks like quite a fun of a task to me).

crossbrowser HTTP requests with document.domain make ExtJS grid garbled and unhappy

Not much of SL this week. Why ? because most of my time is dedicated at the moment to playing with the ExtJS. They've just released the 1.1 version (which I am to try out yet).

Even 1.0.1 looked very promising - all the standard UI elements, crossbrowser and without much pain.

Although one thing I spent a lot of time on, was a very cute bug. In my little experiment, I need to make cross-domain XMLHTTPRequests, so I obviously needed to set the document.domain to be able to do that. Unfortunately, this caused the grid element to become garbled in FF-derived browsers - it looked as if the columns did not have width (no padding). Took a while to figure out.

Eventually I solved it by a following hack (which is known also as an iframe bridge hack):


main window (server X) loads an iframe from server Y. This is my "main window", so I clean up the DOM in the main window, and make sure the iframe sits in the whole screen. this iframe then loads another iframe, also from server Y.

Within the child iframe there are a bunch of functions that call the functions in the main window.

Now, the trouble is that either the main iframe can call these functions, or these functions can call the main window - because of the different document.domain properties.

So, the trick is to initialize the variables in the main iframe with "pointers" to functions in the child iframe, and then call the initializer in the child iframe to set the document.domain.

This way the main iframe still "remembers" about the functions.

Now, there is another trouble. When making XMLHTTPRequest, you supply the callback. And javascript does really wonders there. But... the problem is that it does not work all that well - I was getting an error in mozilla.

So, the trick is to treat the callback as an "opaque blob" inside the child frame, and perform the same trick with the functions in the other direction - in the main iframe, create a function that takes a callback as an argument and calls it.

So, overall it looks something like it:


[ main window ]

document.domain = "example.com";

function parentFunc(url, cb) {
makeAjax(url, cb);
}

[ main iframe -> its html loads the child iframe ]

function CallIt(cb, result) {
cb(result);
}

var bridgeFunc;

function init() {

bridgeFunc = document.frames[0].childFunc;
// that one also sets the document.domain
document.frames[0].init(CallIt);
}

function myMakeAjax(url, cb) {
bridgeFunc(url, cb);
}


[ child iframe ]

var parentCall;

function init(bridgeFunc) {
parentCall = bridgeFunc;
// now we would not be able to talk directly except via bridge variables.
document.domain = "example.com";
}

function childFunc(url, cb) {
window.top.parentFunc(url, function(result) {
parentCall(cb, result)
});
}

----
With this code (indeed in real world it looks bit more complex than this ), the document.domain in my main iframe window never changes, and as such, I can enjoy the beauty of the ExtJS's controls. So, firefox also has its annoying bugs :) (or is it a security feature ?)

A very impressive Javascript IDE

Aptana - if you have to do anything with javascript, make sure you take a look at it. It does resemble the functionality of Eclipse with Java at the first look - at least when it comes to outlining capabilities.

Not sure what goes with respect to refactoring (did not try it much yet), but surely much more promising than /bin/vi :)