I’ve been working away at the online word processor that I’m developing, based on TinyMCE, and struck the problem that, by default, TINYMCE cleans up the HTML code of the entered content.

In my case this is a problem, as I’m trying to make use of standard HTML attributes in order to persist information, and still let the user easily edit that information. For example, I want them to be able to style certain text as being a name of some sort: personal, geographic, organisation, title etc. I then want to be able to key that name with an authorative identifier, but let them continue to work on the content.

For example, I want text to be displayed to the user something like this:
Screenshot of formatted text

But I want the HTML code for this to appear something like this:

<span class="nameWork" title="name-010203">
	Reflections of a Black Woman in a White Man's World

After a bit of hunting around, I found the answer, which is to use the option to specify extended valid elements when initialising the instance of the editor:

extended_valid_elements : "span[class|title]",

Google AdSense

September 7, 2007

Just been doing a bit of quick investigation into Google’s AdSense, and there are a number of articles out there about how to increase you’re revenue, some a little bit lame, but some reasonably well written like this one.

Some people out there are making serious money using AdSense, though interesting it seems that advertisers are getting more reluctant to pay for ads delivered on pages of content, and preferring instead to have Google serve their ads on pages of searc hresults.

Another interesting  observation: a lot of people are reporting that their AdSense revenue in August (2007) is way down — it appears that Google have made a bit of a botch-up of payments for many webmasters this month..

Paul Duguid, adjunct professor in the School of Information at the University of California, Berkeley, has a look at the problematic nature of Google Books‘ presentation of books, using the example of Lawrence Sterne’s Trstram Shandy.

Interestingly, I notice that there is now a New Zealand variant of Google Books.

Although TinyMCE allows you to specify custom styles (using the “theme_advanced_styles”parameter), it doesn’t exppose any easy way of specifying custom block-level formats.

This is most probably because the assumption is that people shouldn’t muck around with creating block-level tags beyond those normally present in HTML: “p,div,h1,h2,h3,h4,h5,h6,pre,address,blockquote,dt,dl,dd,samp”

However, in my case, I wanted to use an existing block-level element (“p”) div, but with the ability to simultaneously apply a css class to the element.

After a bit of poking around I discovered the way to do this:

  •  In the theme, define the menu names as desirable for the user to see (in “tinymce\jscripts\tiny_mce\themes\advanced\langs\en.js” in my case):
theme_author : 'Authors',
theme_ref : 'Ref',
theme_genre : 'Genre',
theme_citatio : 'Citatio',
theme_anot : 'Anot',
  • In the theme template, add some extra entries to the lookup table in getControlHTML (in “tiny_mce\themes\advanced\editor_template_src.js” in my case) with two parts: a prefix indicating the block-level element; and a suffix indicating the css style desired:
['p.author', '{$lang_theme_author}'],
['p.ref', '{$lang_theme_ref}'],
['p.genre', '{$lang_theme_genre}'],
['p.citatio', '{$lang_theme_citatio}'],
['p.anot', '{$lang_theme_anot}']
  • Now the biggy – amend the execCommand function to cope with these dotted names (in “tinymce\jscripts\tiny_mce\tiny_mce_src.js”).

    I chose to edit the source javascript as  it’s much easy to follow what’s going on. This means of course amending your HTML to refer to this tiny_mce_src.js, rather than to tiny_mce.js.

    After all this is finished I guess for completeness sake (and to save a bit of download time) I should apply the changes to the non-source (tiny_mce.js and editor_template.js).

    This means that the case block for FormatBlock should appear as follows (I’ve highlighted the new bits):

            case "FormatBlock":
                if (value == null || value == '') {
                    var elm = tinyMCE.getParentElement(this.getFocusElement(), "p,div,h1,h2,h3,h4,h5,h6,pre,address,blockquote,dt,dl,dd,samp");
                    if (elm)
                        this.execCommand("mceRemoveNode", false, elm);
                } else {
                    var classValue;

                    if (value.indexOf("p.") != -1 || value.indexOf("span.") != -1) {
                        value = value.replace(/[^a-z\.]/gi, '');
                        classValue = value.substring(value.indexOf(".") + 1);
                        value = value.substring(0,value.indexOf("."));

                        if (!this.cleanup.isValid(value))
                            return true;

                    } else {
                        if (!this.cleanup.isValid(value))
                            return true;
                    if (tinyMCE.isGecko && new RegExp('<(div|blockquote|code|dt|dd|dl|samp)>', 'gi').test(value)) {
                        value = value.replace(/[^a-z]/gi, '');
                    if (tinyMCE.isIE && new RegExp('blockquote|code|samp', 'gi').test(value)) {
                        var b = this.selection.getBookmark();
                        this.getDoc().execCommand("FormatBlock", false, '<p>');
                        tinyMCE.renameElement(tinyMCE.getParentBlockElement(this.getFocusElement()), value);
                    } else {
                        this.getDoc().execCommand("FormatBlock", false, value);
                        if (classValue)
                            this.execCommand("mceSetCSSClass", false, classValue);

  • This allows the class prefixes to be stripped off, and employed. “classValue is a new variable that I’ve introduced for this purpose. Once the above has been done, these new formats should appear in the format menu, and (once you’ve added some CSS in the css for the application like that below, (example_bibliography_editor.css in my case) they should appear nicely in the editor:
p.author {
    font-size: large;
    background-color: #005555;


Googling with Gears

August 18, 2007

Just been having a quick look at Google Gears, a very nice piece of software that will let you use web-based applications when not connected to the Internet.

My initial enthusiasm was fired by wondering if they were getting around to Gears-enabling Gmail and Google Docs, two applications that would be very nice to have access to when I’m up at Koitiata without an Internet connection.

After having a bit of a scout around, I’ve discovered a few interesting things about Google Gears:

  • It makes use of Sqlite databases to store information locally
  • It makes use of JSON for communicating datatypes

After installing Gears and installing a couple of sample apps on my local Apache webserver, I discovered that in Firefox Google Gears is stored at:

C:\\Documents and Settings\\Owner\\Local Settings\\Application Data\\Mozilla\\Firefox\\
Profiles\\t6djva97.default\\Google Gears for Firefox

The details of each URI are stored relative to this path; for example, installing the Google Gears Database Demo (by dropping it into the Apache htdocs/gears/hello_world_database folder) and running it (http://localhost/gears/hello_world_database/), a sqlite database database-demo#database is created at localhost\http_80.

This database can be interrogated as any other Sqlite database:

> sqlite3 database-demo#database
SQLite version 3.4.1
Enter ".help" for instructions
sqlite> select * from sqlite_master;
table|Demo|Demo|3|CREATE TABLE Demo (Phrase varchar(255), Timestamp int) 
sqlite> select * from Demo;

There’s a very nice flash-based Google Gears sql admin application which provides a nice way of administering the Google Gears databases (which I’ve downloaded and installed locally at http://localhost/gears/gearsadmin/sqladmin.html).

I’ve just spent a good chunk of the last two days getting up to speed with the Javascript Prototype Library and JSON.

Javascript’s a great language and essential in these web 2.0 times, and mercifully someone’s put together a library which extends (and rationalises) javascript in a number of directions, including:

  • AJAX
  • enumeration
  • object-orientation
  • page geometry
  • DOM addressibility

There’s also some very handy tutorials and guides:

The downside of the Javascript Prototype Library? Not much, apart from an investment of time to get to know it (though much of it seems quite intuitive, and will save time in future) and the size of the library (a 91KB file which’ll get downloaded with any web page that references it).

The reason I put the time into to learn these tools? To be able to complete a programming task which involved creating and populating a widget from an XML feed using a supplied search string:

Feijoas and newspapers

August 6, 2007

Having a bit of a lazy day today, stopping at some plant nurseries to pick up some feijoa trees on the way up to Koitiata, and then reading the Dom-Post and the Listener in front of the fire.

I thought I had trawled through all the nurseries and garden centres a couple of weekends back when I was on the great fruit tree buy-up (and subsequent plant-out), but I had missed Kapiti Plants, who are a reasonably-sized and reasonably new plant nursery in Te Horo.

They originally had intentions to be a feijoa orchard, but after buying up a whole heap of feijoa trees, decided instead to become a plant nursery. As a result, they’ve still got a few feijoa seedlings, of which I grabbed a couple of varieties: Triumph (apparently produces late season fruit, which store well) and Apollo (mid-season, and large but delicate fruit).

I also managed to pick up a couple of Wiki Tu feijoa trees from another nursery, so between the three (both Apollo and Wiki Tu are self-fertile, but apparently fruit better when cross-pollinated), I should hopefully stand a chance of developing a fruit-bearing hedge in two or three years time.

One thing I did learn during my feijoa investigations is that there is a readily available variety, feijoa sellowiana, (which I think is actually the original variety) that is good for hedging and is reasonably-priced (I saw them available for $6 per tree, as opposed to $16 per tree as I paid this afternoon), but doesn’t produce significant fruit.

One apparent use for the fruit is as an exfoliant — if I even get sick of eating them, I could always whip up a batch of beauty products!

Here’s a picture taken of the bach taken from the backyard, really just to check that this offline blogging software I’m using (Windows Live Writer) is able to handle uploading images to WordPress (and because it’s also nice to look at pictures of summer).