2009/08/30

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.

2 comments:

Julio said...

What's the purpose of using this (javascript based wysiwyg editor) vs something like kompozer?

I suppose you could embed this editor for the end user of your website if you have some type of wiki like functionality.

But if your only making a website that doesn't need the user to make mods, this is just as useful as a binary based html wysiwyg editor.

Yes? No?

Alfonso said...

Kompozer is a program that you install in your computer. With it you can manage a full site, create pages, and then upload them to the server.

CKEditor is an element to use in a HTML form, you need a web page, so it means that you need a CMS. CKEditor by itself won't create any page, nor it will read existing pages and a general rule, it's quite dumb.

If you have a CMS where several people is going to edit their contents, you can't use Kompozer, if the content is stored in a database you can't use Kompozer...

A program like Kompozer is standalone, you don't need anything else to edit a static web page. It can do things that are too complex to achieve in a web environment, so its 1000 times better that trying to use CKEditor in those situations.