Lightweight WYSIWYG Javascript plugin for HTML Textarea

Before I used TinyMCE but it is anything but tiny with a huge number of files and megs of code. It actually takes several minutes to delete it on the server via FTP. But I appreciate that it is free software, thanks guys

But today I found a truly lightweight alternative: Small, standards compliant, Javascript WYSIWYG HTML control This has just a handful of files and a small amount of javascript code.

I got it working with IE6 and Firefox 2.0

I had to do a couple of minor tweaks to the code. One was increasing the initialization delay to 600ms from 1 in the wysiwyg.js file.

This is to stop IE loading the current page HTML into the textarea. I actually discovered this fix by accident after inserting an alert box into the code to pause the flow (a handy testing technique).

The actual minimum time was about 280ms but I am testing on my local machine. But this may be because I am inserting text into the text area with PHP after the javascript file was loaded, which should not be a problem!

It is not great to tweak timings to make things work so I may re-visit this problem in the future to find a fail-safe solution.

The ugly way to fix this may be to insert the javascript into the footer of the page, inline with the body html rather than including the javascript external file in the header. So then, the browser cannot possibly execute the code before the PHP has done it's job. Yeah, this must be the fix Cool

Also, my script uses mod rewrites for URLs which messed up the ability of this code to locate the wysiwyg.html file and hence the css that was applied to the text in the textarea. So I simply entered the absolute URL in the wysiwyg.js OK, this is a lazy solution but works.

It took me a long time to debug this problem but I solved it quickly once I realised that Firebug that I had installed with Firefox is a DOM explorer which I didn't realize DOH! It's the first time I used it!

This lets you inspect the structure of your document and find out what is going wrong in the URL references deep into the nested structure of the thing. It's also good for finding out exactly what class to apply to a deeply nested element for css purposes.

I used to use IE developer toolbar for this but it no longer seems to work with IE6. I tried all kinds of things to get it to work but even though it is enabled, the security settings look right and the icon is on the toolbar, it refuses to do anything. But it used to be a very cool tool.

Also, to spot errors in Javascript you can open the Javascript console in Firefox ( it's called Error Console in the drop-down tools menu ).

Have fun...