WYSIWYG editor installation

There are several rich text editors for the Drupal web-site. The most known are: Xinha (former HTMLArea), FCKeditor and TinyMCE. All of them have own pros and cons. Here we'll see how to install the TinyMCE for Drupal.

Installation of the TinyMCE module

TinyMCE module is a proxy between Drupal CMS and TinyMCE JavaScript editor
1. Download the TinyMCE module. Direct link to the version 4.6.0 from 15/04/2005

2. Copy the whole TinyMCE directory to the "modules" directory of your site. So that your directory structure looked as follows:


3. Download the TinyMCE engine. (Link to download version 2.0.1 from Sourceforge)

4. Copy the engine's tinymce directory into the module's one. Yes, you will end having one tinymce folder in the another one
.

5. Load the tinymce.mysql supplied with the TynyMCE module into your site's DB. You can do it with the help of the PhpMyAdmin as we did when installed the Drupal

6. Enable TinyMCE in administer->modules


7. That's it. Basic installation is done and you can start creating stories with the basic Rich Editor features enabled.

Cleaning the URLs

As you probably noticed, URLs of the default Drupal installation look like http://www.symbianexample.com/?q=node/10. Not a big problem for search engines, but you can easily clean the URLs more to chage them into http://www.symbianexample.com/node/10.

1. Make sure that your site is hosted on Apache web server and your hoster enabled the mod_rewrite module. It is true for virtually all the cheap hosters (including my hoster). If you are not sure, ask your web-site support. It is a very simple and frequent question - they should be able to answer within 5 minutes.

2. If you installed your site in a domain subdirectry, i.e. it is visible like www.somedomain.com/yoursite, Edit the .htaccess file in the root directory of your Drupal installation.
Uncomment "#RewriteBase /drupal" line by changing it into "RewriteBase /yoursite"

3. Go to your site's administer->settings and enable the "Clean URLs" option

Voila, if everything is ok, from now on you should see clean urls in the address bar, without any "?q="


P.S.
I also enabled adding posting for the anonymous users, so you don't need to have an account to test the Drupal features. Come and try posting with the clean URLs yourself

Drupal tutorial plan

The follwoing topics will be covered soon:

1. WYSIWYG editor installation
2. Integration of the inline image upload and source code highlighting into WYSIWIG editor
3. Selecting and tuning the site template, theme and color scheme
4. Adding the AdSense

What has been covered already:
1. Drupal installation
2. Addition of the inline image upload feature
3. Source code highlighting installation. And part 2 here

Stay tuned

Installing source code highlighting. Part 2

Codefilter module, we installed in the part 1 can be enhanced with the Generic Syntax Highlighter - GeSHi. With the GeSHi in action you can post to Drupal site really nicely coloured source-code.


1. Before applying the patch download the Geshi engine itself. (Link to the download page on the Sourceforge)

2. Upack it and upload everything, but contrib and docs directories to your site's modules/codefilter directory so that you had the following directory structure:
modules
modules/codefilter
modules/codefilter/geshi
modules/codefilter/geshi/geshi
I am describing it in such a detail, because some people are really confused ending with the several enclosed directories with the same name




3. Download the latest version of the codefilter-geshi patch (Direct link to the version 4.6.0 from August 6 2005). Downloaded patch is in a special format created by the diff utility and supposed to be pathced by the patch utility (Generic Drupal instructions on creating and applying patches)

4. Update the patch to the codefilter directory


then log in to your server shell and apply the patch by running "patch
You could also apply patch on your Windows PC. For this, you'd have to locate the Windows version of the patch utility.

5. Go to admin->modules. Disable codefilter module and enable it back. This procedure will install the geshi-related settings into the settings menu


6. Visit the admin->settings->"Codefilter Config", enable the highlighting and select the default highlight language. It is c++ in the SymbianExample case


That's it now all your posted source code will be nicely formatted with the C++ language in mind. You can use any other language supported by geshi, by specifying it in the language argument. E.g. language="python". You can also turn autohighlighting for the particular code snipplet off by passing the highlight="false" argument. Note, that there should be no space before and after the "=" character.
Here's how the post source will be transormed into the nicely formatted output:




While the site is still under construction you are welcome try the feature yourself. Create an account on SymbianExample and post some code yourself.

The next step of the tutorial will be integration of the Rich Text editor, that will allow posting texts via almost Word interface.
Stay tuned

Installing source code highlighting. Part 1

To add the source-code highlighting we will use the codefilter module and patch it with the geshi highlighting engine

Installing codefilter

Codefilter module formats everything between the <code></code> tags so that everything looks like nicely preformatted source code. Not that much, but we'll fix it with the Geshi coloring a bit later


Intalling codefilter is very strightforward:
1. Download the latest codefilter module (Direct link to the release 4.6.0 from 13/04/2005)

2. Copy it to your site "modules" directory


3. Visit administer->modules and enable the codefilter


4. Go to administer->"input formats" and enable codefilter in at least one input format. I did it in the default "Filtered HTML" only.


That's it, now whenever you create a new post you can surround the source code with the tags.


The resulting post will have a grey background and all the "<" and ">" characters will be displayed correctly


You are welcome to create an account on Symbian Example and try it yourself.

Next step in the web site creation will be enhancing the codefilter module to add the source code highlighting to it.

Stay tuned.

Changing Drupal theme in a few clicks

Before we make further upgrades to the site, let's make it look a bit prettier. Serious theme selection and its adjustments will be covered later, but the default Drupal theme is too boring.

Go to the Administer->Settings, enable the themes you like and set the default one - pushbutton in the SymbianExample case.

That's it. From now on, every user can visit his "my account"->Edit and choose one of the allowed templates.

One more step for today will be adding one link to the site - the link to this very blog. A good place for it is one of the "standard" theme links. I chose to change the "Secondary link".
To change it click "edit secondary links" at the top of the site.


Add a new link and save the configuration. Note, that img_assist module we added the last time added his button under every textarea field. So theoretically you could add an image to the link text.


Voila, link changed and right in the site header, an accidental visitor can go to this blog, explaining how to create a similar site for yourself.


Next time we will be adding the source code highlighting feature to allow posting the easy-readable source code.

Stay tuned

Drupal: Integrating the "inline" image upload feature

Below are the detailed insctructions on how to enable adding image to the Drupal article while typing it. Just like you can do at the Google Blogger. In the future posts, I will show how to integrate it into the WYSIWYG editor, to make the posting process look almost like the Blogger's one.

The Goal

The final target for the today's excersise will be to enable the following kind of posting experience:
1. User starts typing his article
2. Somewhere in the middle he decides to include the image into the body of the post.
3. User clicks the "Add image" button, uploads new or selects the existing the image and
4. Image code is added to the post, can be seen in the post preview and after submitting the post, of course

The Solution

There is a special module that can perform this task - img_assist. It automatically adds the special icon under each textarea element (e.g. under the post body) that opens a separate window for image uploading just like Blogger does. For uploading it requires another Drupal module to be installed - image. Technically speaking you can use some other uploading module, but image workds for sure and we'll use it
So the plan is to:
1. Install the image module
2. Install the img_assist module
3. Enjoy seemless image uploading and allow everybody trying it

Installing the image module

It is simpler to do, than to tell about
1. Download the latest version of the module. At the moment it is version 4.6.0 from the 15/04/2005 (Direct link to the archive)
2. Unpack it and copy the whole 'image' directory to the modules directory of your Drupal site.


3. Go to your site's administer->modules page and enable it


4. The 'image galleries' menu item will be created in your aminister menu. Open it. You don't really have to create any gallery, but when the menu is first opened, image storage directories will be created.


That's it, after you clicked the 'Save configuration' button proceed to the img_assist installation
5. To allow users actually upload image (instead of forcing to use the existing ones) visit the administer->access control and grant the 'create images" permission to the authenticated users

Installing the img_assist module

1. Download the latest version of the module. At the moment it is version 4.6.0 from the 15/04/2005 (Direct link to the archive)
2. Unpack it and copy the whole img_assist directory to the modules directory of your Drupal site


3. Go to your site's administer->modules and enable it


4. Upload the img_assist.mysql supplied with the module to the your site DB. You can do it using the phpMyAdmin just like we did with the main Drupal database
5. Go to administer->input format and enable the image uploading in all or at least the default input format

Try the results yourself

That's it. You can play with the modules settings to create image galleries or set the thumbnails size, but the minimal set of work is done, your users can start creating content with the images attached. While the site is in the development mode, you are welcome to try it yourself. Create an account and add a test post with the image attached
1. When typing the post text, you'll notice a special item under the text body area:


2. Click it, an image selection window will be opened. Select an existing icon or upload a new one (Please, upload something small, up to 150Kb).


3. Click "Insert image" and the image code will be added to your post.
Note, that you should not select 'html' option. If you did it, usual html ing tag will be used and by default, it will be cut by the Drupal filters. You would need to do some tuning to allow it. Please tell, if you would like me to post a detailed instructions about it




4. Submit the post and enjoy seeing it on the front page. Image thumbnail is clickable. Click it to see the full-size image


Now you know how to enable the inline image uploading. Still there are some uncovered aspects of it. For example, I'd like know how to simplify the image uploading dialog by removing the "Show code"- "html" option. If you know how make tune the image uploading better, please, share the information. Just comment to this post, and I'll try implementing the solution and will carefully document each and every step for novices.

Meanwhile, the next step for the Symbian Example site, will be the addition of the "source code highlighting" feature. Stay tuned.