On the 18th of June the site will be going down for a short time while it is transfered over to another server. Hopefully this wont take to long to complete.

I've just added in a new project "Stylesheet to style attributes", as the name suggests it converts css stylesheets into html based style attributes. At the moment it is powering the colouring for the syntax highlighter in the rss feed for this blog as the syntax highlighter I made uses classes instead of style tags.

For example it will take this css and html:

and convert it to:

Feel free to test it out and let me know what you think in the comments or through the contact page. If you find any issues I would love to hear it.

I hate spammers, really really hate them, it's one thing to recieve a spam once a day, or even 3 times a day, spam filters can grab most of them. But its completely another to receive over 500 emails about undevlieved message because some spammer has decided to fake emails from your server. So if you've come here thinking that you've been spammed by me or someone else here then your wrong, it's not me, they are fake, and it's really annoying, most likely more for me then for you. You may have recieved one or two, I'm currently downloading 333rd one. Most of the e-mails seem to be from a prior@tozcentral.net and I know that doesn't exist. I'm gonna finish watching more doctor who now. oh look, 386 emails...

Last time we got an iframe editable and added in a bold button, you can view the previous part of the guide here. This time we are going to add in a few more buttons similar to our bold button, for example an italic button and a left align button. We will also add the ability to create links and insert images.

There are many basic buttons we can add in (like the italic and left align), to do this we will duplicate the code for the bold button and replace the information sent to the runCommand function with what we wont. Lets start with out italic button:

Copy the above code a paste it below the bold button, this will add in an italics button. You can do the same for other buttons, here is a list of different buttons that will work with our runCommand functon:

• bold
• copy
• cut
• decreaseFontSize
• delete
• increaseFontSize
• indent
• insertHorizontalRule
• insertOrderedList
• insertUnorderedList
• insertParagraph
• italic
• justifyCenter
• justifyLeft
• justifyRight
• outdent
• paste
• redo
• removeFormat
• selectAll
• strikeThrough
• subscript
• superscript
• underline
• undo
• unlink

Each one of these can be used with a runCommand function as they do not require anything more then the command name to run. In Firefox the Cut, Copy and Paste functions require security settings to be set to work (this may be true for other browsers aswell).

There are other commands that can be sent to the execCommand function (the one we use in our runCommand function) but these require extra information to be set aswell, for example inserting an image requires the url for the image. To allow support for these commands we will make some modifications to our runCommand functions so it looks as follows:

As you can see we have added in a new argument for our runCommand function and we are passing that argument onto the execCommand, don't worry though, this wont effect all our buttons. Now we  are going to add in an image button, to do this we will create a new function to prompt for the images url and then send the command and the url to the runCommand function. Here is what our function will look like:

Now we just need to add a button to run our new function:

This can also be used with other commands like the createLink and backColor along with others.

Well thats the end of part 2, you can download the files for this part here, for the next part we will do some bits on browser incompatible item and possibly some other fun bits.

My WYSIWYG editor is coming along nicely and is being tested with my CMS to see how well they work together so I've decided to start doing my posts on creating your own WYSIWYG editor. But I warn you now, this isn't going to be a full length tutorial on how to create the worlds best singing and dancing editor, this will just be about the making of a basic editor that will give you an idea of how they work, allowing you to make one that sings and dances and you leisure.

Firstly lets make the files we will need and an editable iframe. Start by creating 2 files, one html file and a javascript file (.js), mine are called index.html and wysiwyg.js but you can name things how you like, using 2 files isn't necessary, but it helps to keep the code separate. In our html file put in your basic html tags and an iframe. your iframe will need an ID, I'm calling mine Bob but you can call yours what ever you like. Now we need to add in a link to out javascript file and afterwards we should have something that looks like this:

Now we have a boring page with an iframe that just sits there looking rather ugly really so lest make it editable. To do this we will create an onload event in our javascript file, then get the document from our iframe and tell it to be editable. To get the document from our iframe we use the contentWindow.document property, it is also possible to just use the document property of the iframe but that isn't supported in all browsers. To make the iframe editable we need to set either designMode to on or contentEditable to true, I've found that using contentEditable in some browsers can be a little buggy so I've gone for trying designMode first. Once all that is in you should have something that looks a bit like this:


To give us a little more functionality we are going to add in a bold button to our html file that calls a function called runCommand with the argument of bold, so add these line just before your iframe in your html file:


Now we need to create the runCommand function, so back to the javascript file. At the moment our runCommand function only takes one argument which I've called commandName, but as usual what you call things is completely up to you. Once we have out function we need to give it something to do, and that will be to get our editors document again and then send the command to that with the use of the execCommand function which is supported by all major browsers. The execCommand takes 3 arguments, but at the moment we will only be using one, which is the first. For the first argument we pass our commandName argument, for the second we will be sending false and null for the third. Once that is done we should have something that looks like:


Well thats it for part 1, for your homework trying adding other buttons with different commands like italic, justifyright, and similar.

You can download the files for this part here.

Here is a bit more information about the execCommand function. The second argument is for setting whether or not to show the default user interface, and has not been implemented in Mozilla, and I've not checked what it does in other browsers. The third  argument is for sending the value that is required for some of the commands, insertimage for example requires a url.

For even more reading here are some useful links:
Rich-Text Editing in Mozilla
Midas Specification
Converting an app using document.designMode from IE to Mozilla

I did have a few more links, but I closed them.

Thanks for reading.

So I'm building a wysiwyg (What You See Is What You Get) editor, and its fun, very fun, and surprisingly easy, about 70% of the required functionality of a wysiwyg editor is built into modern day browsers which makes life a lot easier, the difficult bit is making it all work together in a friendly way, making it cross browser and getting the last bit of the required functionality in (like easy switching from the rich text view to source view).

At the moment it doesn't have a name, I've just been calling it my wysiwyg, but if you can think of a cool name that doesnt have lots of 1s on the end then feel free to share it and I might use it and you'll get a prize, maybe a hug, or a thank you.

Once it's done I'm gonna release it all open source like, and give some information on how it was made, and how to expand on its abilities. But that is for a later date.

For anyone who didn't know, the contact page hasn't been working since the site got updated, this was due to a change in my cms a while back. The reason the error wasn't picked up was due to a single line in a file that shouldn't of been there anymore but should of been read from the database. Either way, the contact page works now along with a few other things.

I've just uploaded 2 more of my projects that were on the old site, those projects being the Druid avatars and the Starcraft 2 KDM theme. Along with those 2 I've also finally got around to uploading the blender files for both my grass image and my 3 tables. You can find the new blender files over on the Projects page along with the blender file for the chess board.

You may notice on the information for the Starcraft 2 KDM theme that i had planned on doing a guide on how I created it, and any long term visitor will know that never happened but I am still planning on it and will try and get something started on that as soon as possible.

So before going to sleep I decided to watch a bit of Blade Runner which got me thinking about sheep, more specifically electric sheep (for those who don't know, Blade Runner is loosly based on the book Do Androids Dream of Electric Sheep? by Philip K. Dick). Electric Sheep is a screen saver that when run communicates with others by the internet to share the work of creating morphing abstract animations known as "sheep". Electric Sheep was created by Scott Draves.

Some of the images and animations created by the sheep are absolutely fantastic and I would recommend everyone take a look at the site and the wonders it holds. There is a very nice sample of the sheep that will give a good example of what to expect.

But now its time for film and then sleep.

The Projects page is back and slowly I'm adding the projects back into the site, as of writing there is the hit counter, and the 3 blender images. Next on my list is the druid avatars and the kdm theme, then I'll add the sites back up but this time with some more information.

Once I've got the current ones up ill be adding in more like my syntax highlighter and then i'll start posting some more things on the blog that arnt just site related.