Saturday, January 19, 2008

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.

No comments: