Wednesday, June 30, 2010

Integrating CKEditor and CakePHP : Part 2

In Part 1, I went through one method of adding CKEditor, via jQuery. In this article, I'll cover the basic adding of CKFinder to the CKEditor.

From the previous article, I already have CKFinder installed under app/webroot/ckfinder. Now I just need to configure it, and add it to my ckeditor element. Let's to the element part first.

Because I'm lazy, I've once again opted to use jQuery. The revised ckeditor element now looks like this:

<?php 
echo($javascript->link(array('/ckeditor/ckeditor','/ckeditor/adapters/jquery','/ckfinder/ckfinder'))); 
?>
<script type="text/javascript">
$(function() {
 
 $('textarea').ckeditor();
  
 $('textarea').each(function() {
  var editor = $(this).ckeditorGet();
  CKFinder.setupCKEditor(editor, 
   {basePath: '/ckfinder/', 
   rememberLastFolder: false
   }
  );
 }); 
 
});
</script>


In this change, I've added the ckfinder.js, and I've used jQuery to add CKFinder to every text area that has CKEditor attached.

Now for configuring CKFinder. You'll want to open app/webroot/ckfinder/config.php.

Because this is a basic test, I don't have any authentication on the application (yet), and I'm not too concerned with where I put my uploaded files, as long as they're accessible from the web.

As a result, I ignore all the warnings about authentication, and change the "return false;" in the CheckAuthentication() function to "return true;", and then change the values of $baseUrl and $baseDir to be available at app/webroot/files.

$baseUrl = '/files/';
$baseDir = $_SERVER['DOCUMENT_ROOT'].'/app/webroot/files/';


Just a couple of things to note. My website root points to the folder holding app, cake and vendors, etc, and does not point directly to app/webroot. Change to taste. Also, I've hardcoded the file separators in $baseDir. I'm developing under Windows XP, so if you play under another environment, perhaps you'll do better.

Now, as long as you have created the app/webroot/files directory, and have write permissions to the directory, you should see the Browse Server button from Images , Flash or Links in CKEditor, and can use CKFinder to browser, upload and link in images, flash files or regular files.

I like small blog articles, so there's definitely going to be a Part 3 shortly, which will cover my requirement for uploading files to a specific directory, based on the content identifier.

Series Index : Part 1, Part 2, Part 3, Part 4, Part 5, Part 6

Tuesday, June 29, 2010

Fun with Blogger Scheduling

I completed five Blogger articles today, and published them straight away.

Then I thought, hang on, lets not look all needy and stuff, lets string it out to look like a well thought out series of posts on how the integrate CKFinder and CakePHP (*chortle*).

Enter, Blogger Scheduling.

The first thing you'll want to do is access the Post Options at the bottom of the editor, and pick a Schedule at date and time. Once saved, the article will appear as a draft.

Then, select Publish Post, and the article will change to Scheduled, and assuming everything is set up correctly with your timezone, it will automatically publish at the appropriate date and time.

If you accidentally jump the gun, and publish your article before you meant to, you can select Save As Draft. This will remove the article from the published area, and set it back to draft. You can then set up your Scheduled at date and time, and select Publish Post to schedule it appropriately.

Integrating CKEditor and CakePHP : Part 1

I've been using TinyMCE in my CakePHP projects for a little while now, and while it seems to be able to do the job so far, it's always good to try new things. So I thought I'd give CKEditor and CKFinder a go, as an alternative.

The article is likely to spread over 3 or 4 articles as I approach the end goal of integrating CKEditor and CKFinder in the same was that I do for TinyMCE and the free TinyMCE uploader plugin.

Before I go too much further, here's a list of the functionality I'll be looking to replicate:
  1. Replacing textareas with CKEditor
  2. Making usage of CKFinder
  3. Restricting CKFinder to an upload directory, based on a model instance
  4. Integrating CakePHP authentication with CKFinder
  5. Providing CSS to CKEditor to achieve WYSIWYG editing

This article is likely to deal with point 1.

My test project is a simple editors project that consists of a single table called contents that has an id, name and content. I'm also using CakePHP 1.3.2.

The first step is to bake your model, controller and views. I made a few mods to exclude the content from being displayed in the index view. Make sure you can add and edit content items using the plain text areas.

The next steps are to install CKEditor and CKFinder. I added both to the app/webroot directory (i.e. app/webroot/ckeditor, app/webroot/ckfinder).

Being cautious, I decided to just deal with the CKEditor first.

First, I created a ckeditor element, and added
echo $this->element('ckeditor'); 

to the top of my contents add.ctp and edit.ctp views.

And because I'm lazy, I decided to use jQuery to activate CKEditor on my textareas.

<?php 
echo($javascript->link(array('/ckeditor/ckeditor','/ckeditor/adapters/jquery'))); 
?>
<script type="text/javascript">
$(function() {
 
 $('textarea').ckeditor();
 
});

Don't forgot to update your layout to include the jQuery library, and create an application specific app_controller.php that includes the Javascript Helper (may as well add the Session helper and component for future usage).

And that's about it for adding CKEditor.

In my next posting, all address adding CKFinder.

Series Index : Part 1, Part 2, Part 3, Part 4, Part 5, Part 6

Black belt class, here we come

I had a partially successful Tae Kwon Do grading last Wednesday night, going for my 4th Gup (blue belt with 3 stripes, or blue 3 for short). To raise the standard of future black belts, blue 3s and up are welcome to attend black belt training to work on grading requirements, such as form, sparing, breaks and self defense.

At my level, my next grading requirement will only require form and sparing, though self defense is good to know, and it's a little confidence booster to be able to do the breaks.

Earlier, I mentioned a partially successful grading. This was because I passed, but I was not happy with my sparing performance. In fact, I was initially horrified because I accidentally punched my opponent in the face.

Tae Kwon Do sparing rules are kicks from the waist up, and punches between the waist and the neck.

I managed to land a lazy punch that was rather high on the chest and slid up to connect with his jaw. Not cool. It didn't knock him out or even knock him back. The ref didn't actually see it, and only deducted the point when the opponent tapped his jaw to indicate he had been hit there. That was the end of round one.

Round two wasn't much better. This was the first time I'd been against someone who was actually my height (possibly a bit higher), and my build (or maybe a bit more solid). And he wasn't going over easy. I tried a couple of front kicks and a side kick, but he just wasn't going anywhere. At that point, I figured I'd have to go for the head or pull out the spinning back kicks or turning side kicks. I was just about to launch an axe kick, when the ref called the end of the round.

I've since learned that my opponent is or was a boxer. Punching someone in the face is still not a nice thing to do, which is why I have trouble making kicking someone in the head my go-to move. But apparently it takes more skill to lift a foot from the ground, get around their defenses and land it to the head, than to move a fist that should already be at head height, defending, to their head; and that makes it alright.

Lessons for next time. A big guy isn't going to be swayed by punches or prop front kicks (lead foot kicks). What you have left is your big guns, which are movements with alot of weight behind them, or head shots.

Anything to the head will do (as long as it's with your foot). I'd likely do an axe kick first, as a warning, since it will slap the side of the head and drop down on their shoulder. A front kick could be nasty it if lands, and I'm not sure I'm flexible enough to land a head height side or round house kick.

Solid body shots are going to come from turning side kick, spinning back kick, front kick from the rear foot or even a jumping round house kick. The front kick should probably be preceded with a quick switch of your feet to give you some room if you're too close, or even step back then kick from the rear foot. The forward motion of pulling the knee up and snapping the foot out will have a bit of weight behind it, and should knock the opponent back. And if you're close enough, and it's high enough, you may even connect to the face.

Turning side kicks can disorient the opponent, perhaps cause them to move closer, but the key point is that once the kick happens you will step forward to deliver another.. perhaps a slipping side kick, or another turning or spinning move.

The spinning back kick is one of the more powerful non-jumping kicks I have, at the moment. It hits with the heel of the foot and can break ribs (or, from experience, pine boards, which are supposed to be similar in strength to ribs). Once done, you can use the momentum to do another, or move into a slipping front, side or round house kick.

Anyway, all stuff I have to learn over the next three months, along with my new form. The next belt level is 3rd Gup (red belt with 1 stripe).