Building a Website with Drupal 6 – Part 12: Formatting Content
Welcome to part 12 of our tutorial on building a website with Drupal 6. Previously we covered:
Part 1: Introduction
Part 2: Installing Drupal 6
Part 3: Configuring your Site
Part 4: Playing with Blocks
Part 5: Playing with Modules
Part 6: Playing with Themes
Part 7: Installing Modules and Themes
Part 8: Pathauto, Content, and Content Types
Part 9: Users, Roles, and Permissions
Part 1o: Reports – Keeping Track
Part 11: Managing Spam and Comments
As we go through this tutorials I am building a Drupal resource site called Learn Drupal. So far our website is shaping up really well, the basics are pretty much taken care of, and we’re now looking to build on content, and start adding on more functionality, depending on the purpose of your website.
In this installment, we’re going to look at how to make formatting your content easier for yourself and your users.
One thing that you may have noticed as you add content to your site is that the text editor is rather plain, and to add any formatting to your content you have to manually insert tags such as <b> for bolding, etc. Now this may be just fine and dandy for some people, but the vast majority of us would prefer to not have to manually enter tags. This is where rich text editors come in, and in this post we’re going to look at installing and enabling a rich text editor on our website so that formatting content becomes a tad easier.
Let’s log into our website and click on Administer -> Create Content. I am going to choose to create some News. This is what my content editor currently looks like:
By the end of this tutorial, we want to have a text formatting palette that will allow us easy access to various formatting tools. To accomplish this, we’re going to use a Module. Searching the Drupal website module page for rich text editors gives you a good number of options. The ones I see mentioned most are TinyMCE and FCKeditor. My personal preference is to use FCKeditor, so that’s what I’m going to cover in this tutorial. If you choose to use another editor, the installation instructions, as always, are usually on the module documentation page and/or on the readme file.
Installing the FCKeditor
One thing that always throws people off about installing the FCKeditor is that you need to download and install two components:
– The FCKeditor Module and
– The FCKeditor itself
The FCKeditor doesn’t come bundled with the module because it’s released under a different license, but both components are free, so yay!
The next steps can be done on your desktop and then uploaded to your server or done directly on your server. I prefer to do them on my desktop and then upload.
First, unzip the Drupal FCKeditor module onto your desktop. It should unzip itself into a folder called fckeditor. If you now open that folder and look at its file structure, you’ll notice that inside it there’s another folder called fckeditor.
If you open that folder, it consists of single text file COPY_HERE.txt that tells you that this where you need to unzip the fckeditor you downloaded from the fckeditor website. Now because the fckeditor zip file uncompresses itself into yet another folder called fckeditor, things can get a little confusing. My approach is usually to create another folder with a totally different name, like “the actual editor”, and then unzip it into that folder, and copy its contents over into the drupal module folder indicated above. You may find you prefer another method, but this helps me from confusing and overwriting things.
Once you’ve done that, your fckeditor folder inside the drupal module folder that initially had the one COPY_HERE.txt file will now have the other files in it like this:
So to recap, your Drupal module folder that you downloaded is called fckeditor. In it, there is another folder called fckeditor that should now have the structure as above. Hope that is not too confusing 🙂
So the next step is to upload the module folder into your sites/all/modules folder. Incidentally, once I have prepped this module folder and made sure it works, I keep it somewhere safe so that i don’t have to keep redownloading and setting it up each time I need it for a new website.
Once you’ve uploaded it, go into Administer -> Site Building -> Modules, and you should now see the FCKeditor module (under Other) ready to be enabled.
Once you’ve enabled it, the next step is, as always when we install a new module or add a new content type, set its permissions. And remember that you have to be logged in as the main admin (user 1) to have the proper privileges for inital configuration and permission setting.
The first thing you want to do is set permissions for who the module. As usual, you do this under Administer -> User Management -> Permissions.
You can set them however you want, this is just for demonstration purposes. Once this is done, you can now look into configuring the editor under Administer -> Site Configuration -> FCKeditor.
Now the FCKeditor is one of those modules that is highly customizable and has a multitude of configuration options. It would take a blog post and more to go over all of them, and you can read all about setting up profiles and all that at the module homepage. Generally, I find that the default settings are good enough to get things started. There is one thing though that I need to change.
Even though I have allowed authenticated users to access the fckeditor, I need to specifically select all roles and assign them to a profile that can access the module. More details on profiles and configuring can be found at the link I provided above, but for now, under Administer -> Site Configuration -> FCKeditor, I need to assign the roles that I have given permissions to a profile, as you can see from this message at the top of my configuration page.
Alright, so scrolling down the page, you can see the profiles. The two that come with the default install are Default, and Advanced, and you can create more. Under Advanced, you can see the only assigned role is Authenticated. This however does not mean that all authenticated users with roles other than authenticated (moderators, editors, etc) can access the editor, which can be a little confusing.
Click on edit to edit for the Advanced profile, and then click on Basic Settings. I am going to work with the Advanced Profile, but you can go ahead and create your own profiles and customize away :).
As you can see, we need to assign the other roles to the profile so that they can use the FCKeditor, otherwise it won’t be accessible to them and they will only see the plain editor when they attempt to create content. So select the other roles and save your profile. Like I mentioned before there’s a lot of other customizations we can do but I won’t attempt to go into that in this post. We may come across them in future posts, but for now we’re good to go.
If you now go back to the Create Content screen we started with, you’ll notice a big change. Instead of the plain editor we had, we now have a palette with formatting options, which will make formatting the content we create easier.
We can now simply select a block of text and apply the desired formatting to it by clicking on the relevant button on the palette, which makes creating good looking posts easier to do.
For now, it’s a beautiful Saturday afternoon where I am, the sun is shining, and I have no desire to assign homework :), but you may be interested in reading up more on configuring the FCKeditor, and perhaps you may want to explore other rich text editor modules, you may find one that you like.
As always, don’t hesitate to leave a comment to let me know if you have any questions, or just to say hey!