Setting a focus and blur event for TinyMCE

I've been very busy because of work, working out and other things, and have therefore not really been able to update this blog, but I'll be sure to try and update the blog more often. I'll probably end up importing the contents into a WordPress installation on my server.

Outside the usual life stuff, I've been working on a new project with a friend, and should hopefully be on line in about a week. With this project we needed some sort of input of course, one of those (the biggest one) was an text area, however, I wanted to allow users some basic mark up,  name, bold, italic and underline. While there were many ways of implementing this, I thought the best way was to implement a WYSIWYG that would allow only those mark ups, and TinyMCE is one of the best.

I’ve never really worked with any WYSIWYG editors, and I needed to customise this to only allow the HTML tags strong, b, em, i, and u. All this should not have any attributes. The editor would not have any toolbars and whatnot, which meant creating a custom theme. This was fairly easy by stripping apart the simple theme. None of this was the real challenge though.

It seemed that there was no “proper” way of doing an event handler for focus and blur that would work in a cross browser environment. There wasn’t much online to help this, bits and pieces everywhere, but no definitive answer. So I am here to share with you the definitive answer!

You need to add an onInit function and add a blur/focus event properly; however, the element needs some checking. The element and the whole setup function are as follows:

Highlighted using GeSHi

1. setup : function(ed) {
2.     ed.onInit.add(function(ed) {
3.         var dom = ed.dom,
4.             doc = ed.getDoc(),
5.             el = doc.content_editable ? ed.getBody() : (tinymce.isGecko ? doc : ed.getWin());
7.         tinymce.dom.Event.add(el, 'blur', function(e) {
8.             console.log('blur');
9.         })
10.         tinymce.dom.Event.add(el, 'focus', function(e) {
11.             console.log('focus');
12.         })
13.     });
14. }

The trick, as most of you JS heads will have seen, is the variable el. Where it checks if TinyMCE used content_editable, in which case it gets the TinyMCE body, otherwise it checks if it’s a Gecko engine, in which case it gets the document, and finally if none of those, it gets the document window.

Hope that helps you out! :)

As work starts, the world still turns

So I started work on Monday, that is 2 days ago, and I am on my way home from the third day of work.

It has been an interesting few days, as I started work, straight away was given a task and (what I think is) a new client to deal with. While the task for the first day wasn't all too hard, it just was very lengthy. The client wanted us to fix their site and make sure that 4 pages look the same in multiple browsers, that they are still working on. So the hunt began to search for the errors in on those pages, and report back to the boss as well the client. What we ended up doing, is going through all the required browsers (and operating systems) and take a screenshot of all the four pages, and while this was an easy task, it was a lengthy one.

Anyway, so after identifying the errors, it was just a few simple fixes on the CSS, or so we thought. The problems? Well, not too much, aside from, of course you guessed it, IE6 in Windows XP, but next to that, the main problem was that the client didn't want to give us access to the development server, and while this normally wouldn't be a problem, it is when the client requires cross browser compatibility on mobile phones (such as Android and iPhone).

Second day was a bit boring, as I was supposed find a way around this whole problem, but the resources that were provided by the client just weren't enough to fix these, what otherwise would be simple, CSS errors. Anyway, aside from that, the same client wanted to know about making a welcome page on their Facebook page that has their own colour theme and design. This wasn't too hard, and it's as simple as adding the app TabPress to your page. Of course, the custom design can be hard coded, however, that would take more time and more money to implement.

Finally today, I worked more on the same problem, however, I had a work through. What I did was install Glype proxy script locally, and if the file "style.css" was requested (of course, through the Glype proxy), it would, instead of running it through Glype, it would just return the contents of a local copy of the CSS file. This seemed to do the trick, and hopefully will work till the CSS has been fixed.

Will keep you updated on tips and tricks when working for customers.

Hosh

Switching Operating Systems

Yes I am still alive. I know I haven't updated the Blog since after my exam, but I was, erm, too busy "celebrating" the end of my exams :).

Anyway, so I was trying to reinstall Windows 7 yesterday, but I found out that my DVD Reader didn't work. This was the second DVD Reader, in fact, the first one was a BD reader as well. Anyway, it didn't read the DVDs so I had to improvise. This meant trying to run the installer from a USB, however, I didn't have a USB that was big enough to hold Windows 7. So tried to run it from an external hard disk, which ultimately lead to the demise of my master boot record. I wasn't really too fussed because I had already backed up everything :).

So then I decided to just switch to Ubuntu straight away, which means running some of my favourite applications on Linux using Wine, and oh what an amazing job the talented developers of the Wine project have done.

I remember about two years ago, I tried to install the old version of Steam (way before the UI revamp and the Mac version), and in all fairness, I gave up on using it within 10 minutes. It was too sluggish, and had to install loads of random stuff before it could work. It was a lengthy process.
Now though, I just downloaded the installer, marked it as executable, and double clicked it. A few clicks later, it was updating and straight away after the update I could login. No fuss, no problem. After I logged in, Steam guard came up as expected, and after verifying everything worked fine. I can use the chat normally, currently installing Portal 2 (not sure how that's going to go), and after being impressed this much, I think it will run fine.

I also installed my favourite PHP IDE on Wine, phpDesigner, I haven't really tested it too much, however, I noticed that the original php.exe included didn't work properly, had to manually download the VC6 version and use that instead. I haven't tested Xdebug yet, but I will soon.

I'll keep you updated on Portal 2 and phpDesigner.

Hosh

Last exam tomorrow.

Finally getting to the final exam tomorrow, software engineering! This time tomorrow I will be free from free from the exams! More updates on random stuff soon! :)

I've got 4 exams in a row, don't expect too many posts till after Saturday

Title says it all, I won't be posting much till after Saturday. I have 4 exams in a row so I am going to need every second of revision I can get.
For the curious ones, I have exams on

• Wednesday - Functional Programming
  Learning Haskell using Heath (a program created at our University) and Hugs
• Thursday - Cognitive Neural Networks
  About how the human brain sees stuff and how we can simulate this on a computer.
• Friday - Algorithms, Data Structures and Complexity
  About how all sorts of algorithms work such as sorting algorithms etc.
• Saturday - Software Engineering Practice
  Best practices to develop software.

Not much to it hopefully, plus I've already passed Functional Programming and only need 51% to get a first! Sounds doable :).

Anyway, see you after the exams.

Hosh

Downloading a file from a remote server using cURL

I am currently implementing a new way for themes to be submitted on PS3 Themes. Allowing users to select a remote P3T file and it will be downloaded. There is multiple ways of doing this, but the simplest method is using cURL. The cURL options you will need are CURLOPT_TIMEOUT, CURLOPT_FILE and CURLOPT_FOLLOWLOCATION and you will need the function fopen(). So here goes.

Highlighted using GeSHi

1. <?php
3. set_time_limit(0);
5. $f = fopen('theme_name.p3t', 'w+'); // Initiate a file writer for the downloaded file to be written to.
7. $d = curl_init('http://www.example.com/theme_name.p3t'); // initiate cURL on the file to download
9. // set the appropriate options
10. curl_setopt($d, CURLOPT_TIMEOUT, 60); // set the time out time for the cURL operation, the bigger the file, the bigger this number should be
11. curl_setopt($d, CURLOPT_FILE, $f); // this is where you need the file handle, it will put everything straight handle
12. curl_setopt($d, CURLOPT_FOLLOWLOCATION, true); // this is just so all redirects are actually, otherwise might get the wrong page.
14. // Execute cURL, this will set it
15. curl_exec($d);
17. // close both the file handle and the cURL
18. curl_close($d);
19. fclose($f);
21. ?>

The code is fairly straight forward, and if not, the comments should help.

Hosh

The art of reinstalling Operating Systems

Well, there is no art to to much of an art to it, but it has to be done every now and then.
My current Windows 7 installation would be turning 1 year soon. Yes it does happen, Windows can run great without having to reinstall every week. Anyway, there is too much junk on it, so it requires a new installation, plus I was thinking of installing Ubuntu 11.04 after seeing how much it has been improved since 10.04. The new Unity looks just too awesome to miss out on.
I am currently backing up everything and should soon be reinstalling it.

Hosh