Day: January 23, 2006

JavaScript

Web-based editing with TinyMCE

While it’s not specific to PHP, I have found what is perhaps the best web-based WYSISYG editor going: TinyMCE. The only reason I am mentioning it here is because of the framework I built behind it.

The goal was to build an admin page for “blosxom-ish” blogs (like Blosxom, pyBlosxom, phpBlosxom, etc) that use text files for entries. The inital idea was to do it in Python/PSP using mod_python. I quickly abandoned this for the following reasons:

  1. No matter what I tried, I could not get the PSP include directive to work.
  2. The mod_python PSP documentation is sparse and generally not helpful.
  3. I wanted to bang it out and get it done, and I am already familiar with PHP enough to be comfortable with it.

I do have plans to re-implement in a Python cgi-style format, and will offer it to the community at large at that time, but until then this version seems to be working ok for me (at least at the moment).

If you would like a copy of the source for this (WARNING! It is not commented and seriously shows the signs of being hacked out in one evening!) drop me a line and let me know.

By the way: I almost forgot the important part. What is it that makes me think TinyMCE is the best web-based WYSIWYG editor? The fact that it generates <p> tags for paragraphs (rather than stuffing in a couple <br>s), uses <strong> and <em> rather than <b> and <i>, has a working link and image insertion tool, a preview button, and it applies itself to all the textareas in a form page without jumping through a bunch of hoops with id and style attributes. Generally it produces valid HTML 4.0 Transitional. (I think it could be tweaked to produce valid XHTML 1.x Strict, though.)

So what could be tweaked?

  • The “tidy” tool doesn’t strip out the M$ Word class=”MsoNormal” attributes when pasting from Word.
    • Possible fix for now: strip those out in the back-end processing
    • Long-term fix: Find the javascript code that does the tidying and add the logic to delete the Mso* attributes.
  • It uses <font> tags rather that <style> tages to apply color and font-face changes.
    • Possible fix for now: replace the <font color=”#??????”> tags with <span style=”color:#??????;”> in the backend.
    • Avoid using font face changes and allow the css of the site that is going to be displaying the page handle it.
    • Long-term fix: Find the javascript code that produces the font tags and replace it with span.

Overall, it does what it says, and that makes it another of those things that I like: stuff that works!