Creating an instance of CKEditor

This is the second post about CKEditor, be sure to read first the prerequisites to use CKEditor.

As explained in the integration guide you must add the CKEditor library to the head of your document. I would like to add a little remark for the moment: instead of ckeditor.js you can use ckeditor_basic.js if you don't need the features before the page is loaded, it will load only a small stub and delay the full load to make the page ready quicker. I explain this feature in detail here.

So go ahead and add it:

 <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>

Now the CKEDITOR object is ready to be used in your page. This is the entry point for all the CKEditor functionality.

The most common situation is to use a textarea for your content and replace it with CKEditor:

<textarea cols="80" id="editor1" name="editor1" rows="10">
&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href="http://www.fckeditor.net/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;
<script type="text/javascript"> 
  CKEDITOR.replace( 'editor1' ); 

This approach means that if the user is using an old browser that it's not supported by CKEditor, or they have disabled javascript they will get a plain textarea and they can still use your site.

Ok, so far I haven't said anything interesting, but I think that it's better to start step by step, reviewing what's available before explaining new things. So the next step is to look at the CKEDITOR object.

What about automatically converting the textareas to CKEditors without any javascript (besides the library of course)?

You just need to add the class "ckeditor" to you textareas and you're done! Look at the _samples/replacebyclass.html file.

If you want to the magic to work with other class names then you must use the replaceClass property. This is how your page would look if you have already some textareas with the class "html" and you want to use now CKEditor without any further changes:

 <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript"> 
  CKEDITOR.replaceClass = 'html'; 

As you can see, with minimal changes to your existing pages you can use CKEditor.

Other times you might want to use CKEditor in all the textareas of your page, no matter what are their classes. Then replaceAll is your friend. As the replace call, you must use it only after your textarea, or if you must add it in the head of the document, use the document "onload" event (be careful: if you assign directly document.onload other script might want to also use it in the same "stupid" way and will erase your listener, or you could erase that other listener)

In fact, the replaceClass and replaceByClassEnabled is just some syntactic sugar to easily use the replaceAll at page load with a className.

The replaceAll method can be called in three ways:

  • No parameters: All the textareas are replaced
  • A string parameter: Only the textareas that have their class matching that parameter will be replaced
  • A function parameter: This is the most powerful option, each textarea will be passed to that function, along an empty config object that can be used to apply custom configuration options to each instance.

So if you want to replace all the textareas in the page, except those that have a class of "text" or whose id is "summary" you should use this code at the end of the page (or on the onload event):

<script type="text/javascript">
 CKEDITOR.replaceAll( function(textarea, config) {
  if (textarea.className=="text") return false;
  if (textarea.id=="summary") return false;

  return true;

 Finally there's the appendTo method, but for the moment I can't figure out why that is interesting, so I won't bother to explain it need to study it better to give my impressions about it.

Using CKEditor, prerequisites.

This is the first post related to CKEditor, and I'm gonna try through several posts to guide you about how to use CKEditor in your page.

The first step is obviously to "install" CKEditor in your server.
I've quoted install because you just need to extract the zip to the place where you prefer. In the rest of these posts I'll assume that you have placed it in /ckeditor/ like the example in that page.

If you are looking for an ".exe" to install CKEditor, then you are trying to use the wrong tool. You should look at Kompozer to get a HTML authoring program for your computer

So now you can check the _samples folder.
Do it.
Test the samples to verify that they work, read them and check its source code. The samples are there because they can be useful in order to understand how to use the editor. If you ask questions that can be easily answered by looking at those samples people might not bother to reply to you because you are lazy.

Before we get any further I would like to make an important remark: CKEditor is only a javascript widget. It's behavior is like any other HTML form element, so if you are unsure about how to read a file at the server, save the data, manage user permissions or anything like that, then remember that you are placing your questions in the wrong place. CKEditor is not a Content Management like Drupal, DotNetNuke, etc.., it's not a replacement for FrontPage or DreamWeaver. It's just a <textarea> that uses HTML instead of plain text.

If you are not a developer then forget about installing CKEditor as you will need some experience about coding in order to create the rest of the site or modify those files to integrate CKEditor. In those situations you should:

  1. Search for a CMS / Blog / eCommerce system that fits your needs.
  2. Search for a plugin/tutorial that explains how to integrate CKEditor into your system selected in step 1. Google, Yahoo, Bing, whatever... write there "CKEditor" +  your CMS and your might find someone that will help you. As CKEditor has just been released as a stable version, it isn't strange that those plugins aren't available, in that situation you can search for FCKeditor + your CMS and check there if that people is interested in creating a plugin for the new version. Making a donation can help!
  3. If you have absolutely no idea about coding, then you will save a lot of time if you pick some hosting that comes preinstalled with some package that you can use, or, hire someone to install it for you.

The 3.0 release doesn't include the server side integration code, it's only javascript so if you don't want to learn some basic js coding, then you should wait a little for the 3.1 release.

So in order to use CKEditor, you should have your site up and running, and use <textarea>s in the place where you will later want to use CKEditor, everything must work, check that you can read and save data that includes quotes, single quotes and that it doesn't becomes distorted due to any server filtering.

For example, use this code as the source for the textarea and verify that it isn't altered although you load/save the content several times:

<p>This is some <strong>sample text</strong>.
You are using <a href="http://www.fckeditor.net/">CKEditor</a>.</p>
<form method="post" name="test"><textarea name="area"></textarea></form>
<p>Final &lt;&gt; quote '</p>

If you are unable to make your system work properly with that code, then you have some problem with your server and trying to use CKEditor won't help you to understand the problem, you'll say that it's due to CKEditor but it's just your code.

Now it's the time to read the second page in the developer docs: Integrate CKEditor in your site. I'll explain the creation options in the next post.


Upload progress for Firefox 3.5

The new release of CKFinder 1.4 is due mainly to cover the integration with CKEditor 3, but it includes other little details, and I'm gonna talk about one of the here: the upload graph for Firefox 3.5

Upload graph


Firefox 3.5 might look boring for the users, it doesn't bring any special change to the interface or to the general options, but under the hood there are lot of changes for developers. Old bugs fixed, polishing, new features...  And among those new features there is something special for us: the ability to read the files picked with an <input type="file"> from javascript. Previously the only option was to read the filename and then submit the form to the server, without any ability to know how long it's taking.

A little history

In order to provide a progress bar you had to use some special coding at the server, so it could provide a progress info and poll that periodically. In some context it's far easier than in others, some require proprietary components, some require just a little script, but it's not easy to get it ready for every environment.

Then the Flash uploaders appeared. Macromedia did add a nice API to flash that allowed to easily pick several files from the user computer (of course, it's the user the one that selects the files) and then upload that data to the server, with event notification so now you can find several (lots?) of libraries to do that. One example is SWFUpload. But as far as I know, all of them have a problem due to the flash plugin itself: in non-IE browsers it fails to send back to the server the proper cookies, so it ruins the ability to keep authentication in the upload process. The trick then it's to send the data for the authentication cookie along the request and then recreate the session at the server with that info, I know that the code to do that in PHP and Asp.Net it's available and you can easily add that, but I've never seen such workarounds working for Asp (I don't know about CF). And even in Asp.Net you might need to alter files (global.asax) that you can't touch "to show a progress bar".

So as you can't see there is no easy solution "that works for everyone", but in the future that can be different.

The present

Starting with Firefox 3.5 you can use a new (non-standarized) API of the XmlHttpRequest: sendAsBinary. This post at hacks.mozilla.org  does explain it much better that I would be able to do in a lifetime.

So I went ahead and coded it for CKFinder.

  • Pros:
    • No changes required at the server,
    • It's based on feature detection, so if any other browser adds these APIs it will automatically work.
  • Cons:
    • Only Firefox 3.5,
    • We don't know how well it will perform with big files (1).

1: The Firefox API is based on reading the full contents of a file as a string and then sending it with a XHR, so if you pick a 1Mb file it means reading 1Mb of data, that looks easy. On the other side, if you are storing a 500Mb movie, then Firefox will go ahead and use in a moment 500Mb of additional memory. Wow, looks scary so we capped the feature so it's only triggered if the file is smaller than 20Mb.

The way that it's coded means that this is transparent to the user, he doesn't have to do anything and it will work. The form is just the same, the only change is the way that the data is sent to the server.

Other options

At the same time I evaluated the ability provided by Webkit that allowed to pass a file object to the XHR.Send() method, but it has some important drawbacks:

  • It's not possible to do feature detection on the ability, so it would need to be hardcoded using UserAgent strings. That's not nice
  • The file is sent to the server without any of the POST boundaries to wrap the data. That means that your standard code at the server won't work, you need to write special code to send the file name (easy) and then process the boundless data at the server (not so easy). In Firefox we have to add those boundaries, but the point is: It's possible to add them, so the server doesn't notice any difference between a standard form-post and this xhr.sendAsBinary()

There are lots of talk about this kind of features for inclusion in the new versions of XHR and related APIs, so I think that it's important to start testing what's available and provide feedback about what works and what fails.

I also tested the ability that Opera and Webkit offers to select multiple files with the <input type="file"> widget, and although it worked for Webkit, Opera did send the data using a set of headers that caused Asp.Net to consider it an attack, and crashed the AspUpload ActiveX from Persits (I didn't test it further as it was a dead road).

So in the future the ability to send multiple files with webkit might be added, also we will evaluate further the option to use a flash uploader so IE users get the option to both select multiple files and get a progress status, the important part is that the adjustments at the server side should remain within the CKFinder code, when you start requesting changes to global files then the problems start

Little bugs

Nevertheless, I don't think that the Firefox implementation is bug free.

The first problem is that the progress events are fired only when the server "consumes" the data. I mean: if you look carefully or put a sleep() at the server you will notice that the upload seems to stall at the end, although the data has been sent to the server, the browser doesn't notify that, it waits there, and looks strange.

As I said, reading the full file in memory doesn't look nice, it should be possible to request sending a file and the browser would read it just like it does with a normal form POST, it can read it little by little as it needs and with minimum overhead. In that situation we wouldn't need to restrict the maximum size, and this is important because getting progress info is more interesting when the file grows bigger.

If you notice any problem with this feature, please report it so we can look at it and fix it ASAP.


CKEditor released

After a long time, finally the first stable version of CKEditor 3.0 has been released.

There are still some important features that are missing in order to do a smooth upgrade fro FCKeditor 2.x, but nonetheless this release is very important to really show what's coming with this new version.

I might add some follow up posts with small snippets of code about how to do some basic things with this version, trying to cover some areas that for the moment are lacking proper documentation.

These are the current articles:

  1. Using CKEditor, prerequisites.
  2. Creating an instance of CKEditor
  3. Delayed loading of CKEditor
  4. Creating CKEditor instances with Javascript



Installing PHP in IIS 6 (windows 2003)

Some time ago I tried to install PHP in a test machine with Windows 2003 and IIS, so I could do some tests more easily. At that time I failed to get it working. The theory is simple, I found several tutorials explaining how to do it, but I wasn't able to get nothing but a "404 page not found" whenever I requested a .php page in that server.

Today I decided to try again. Quite a lot of things have changed in this time.

PHP has setup a separate site to handle installing PHP in Windows. Unfortunately the site is not as friendly as it seems that they are planning, but at least it's clear that they acknowledge the fact that there's a need for help installing PHP in windows. Besides the downloads it seems that there's little more in that site at the moment, but that download page is a little daunting:

Reading the sidebar you can see that you need to get the VC9 versions to install it in IIS, and the VC6 are meant to be used with the Apache server. But:
Thread safe or Not Thread safe?
Zip, Installer or Debug Pack?

Wouldn't it be better to move that Debug pack to somewhere else?

I'll skip some steps, and I would like you to introduce you this page that explains how to configure FastCGI and PHP in IIS.

You could have done the two first steps like I did, I downloaded the installer for PHP-non threaded-vc9 and when I tried to run it and configure for "IIS FastCGI" it warned to first download and install the FastCGI extension.

But you won't get the explanation about how to configure the FastCGI extension, so keep reading that page. I tried to do the automatic configuration using the script, but I got an error, so I don't know what's wrong. I tried to verify then all the steps according to he manual configuration and it seemed to be OK. But I got again a "404 page not found" trying to load any php page.

The next step was removing all of it and try with this automated installer for PHP in IIS . Yes, now Microsoft is hosting a whole site devoted to support for PHP in IIS, so this looks like a first stop when you try to get it working or troubleshoot something related to IIS and PHP. Wow.

After installing that "Web plataform installer" it took care of the rest by itself, each product was downloaded and installed, and I guess that it might have done that "configure FastCGI" in the bundle.

But again it didn't work!!!

The difference for me was that this time I knew that I was using the correct files, it's a tested installer, so I can't blame it on me due to having picked the wrong file in the PHP downloads (in this case I've noticed that they are using PHP 5.2.10 instead of the latest one PHP 5.3 that I picked).

So I tried to look more carefuly at it and then I noticed that under the "Default web site" properties it doesn't have assigned the .php script mapping. It was done correctly at the "Web sites" (parent folder), but not on the site itself. For some reason that setting didn't propagate to the child nodes, so I "edited" it and pressed OK, and it asked whether to update the value in the child sites. I said YES, and Now PHP Works!!!

As a summary:

The problem that I had was that the setting was correct for the "Web sites" node, but the real website node didn't get that setting applied, I guess that I might have messed previously (as I said this is a test machine) and those automatic scripts didn't try to update it.




SWFObject plugin Update

Almost two months ago the fine folks at SWFObject did release the 2.2 version, so finally I've modified the FCKeditor plugin to make it use that version by default.

What does it means to you?

-If you don't use my plugin, not too much. Maybe you can take a look at it anyway if you are a FCKeditor user and don't like embeds.

-If you use the plugin, but are using a version of SWFObject hosted in your server, then you don't need to upgrade my plugin. Anyway, you might want to upgrade your copy of SWFObject, and if you place it with a different filename, then the upgrade of my plugin might be useful or you might end up including in the pages a link to the old library and another to the new one. Sorry, I didn't thought about it.

-If you are using the plugin and are relying on the externally hosted library, then it would be good to upgrade the plugin. The caveat is that you need to open and save again any page with a reference to the plugin to get it updated (unless your CMS has some option to do a search&replace in all the content). The good part is that even if you don't touch the existing content, the new files will use the new version.

Enjoy it


Imgmap plugin update

Adam has been working on the imgmap code, and recently has released a new version to improve compatibility as well as fix some issues.

So finally I've upgraded the demo and the download link. If I ever forget again, just remember that the imgmap project is hosted at Google code.

I'll try to review these days all the mails that I have in the queue.


Now the CKEditor version of this imagemap plugin is available.