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:

tut12formatting1

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!

Alright, let’s get to work.  Download the FCKeditor from the Drupal website (http://drupal.org/project/fckeditor).  Ofcourse you want to make sure you grab the one that’s recommended for Drupal 6.

Next, download the FCKeditor from it’s website (http://www.fckeditor.net/download)

tut12formatting2

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.

tut12formatting3

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:

tut12formatting4

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.

tut12formatting5

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.

tut12formatting7

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.

tut12formatting6

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.

tut12formatting9

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.

tut12formatting10

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 :).

tut12formatting11

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.

tut12formatting81

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!

About The Author

46 Comments

  1. Cool tutorial. Are there more parts to this on the way, or does this conclude the series?

  2. Wonderful. Are Views coming up? What about image galleries? Thanks.

    • Kirk

      Thanks, yes. I do have a CCK and Views tut planned. I hadn’t thought of one for image galleries, but given time I’m sure I can throw one in there 🙂

      Just need to free up the time to sit down and write!

      mary

  3. Thanks for the great tutorial series. I was pulling my hair out, trying to get started with Drupal. Your simple, well-written posts are the best I’ve found for a beginner introduction. Much thanks for putting it together.

    And like others, I’ll be heading into CCK- Views-land shortly, and am already worried that I won’t find any explanations anywhere near as good as what you’ve put together to get me to this point. 🙁

    Thanks again!

  4. thanx for the tutorial so far. I was an absolute beginner and I’ve created my own site;
    Wonderful !
    Keep me informed about next chapters;
    THANX

  5. what a great tutorial here.. ive follow from part 1 to 12.. its a one step ahead to build my own website.. for time being im using localhost installed in my computer with xampp server..

    anyway, im waiting for new parts from you.. hope u will make it soon yeah.. you rawks!!

    • Saiya
      Thanks for the feedback, I really appreciate it 🙂

      Summer school is keeping real busy, but after finals next week I’ll be able to breathe and get back t0 posting tuts 🙂

  6. hi, its me again.. i have 1 problem regarding story content.. it says
    ” By default, a story entry is automatically featured on the site’s initial home page, and provides the ability to post comments.”

    i hav created many topics like discount or package, i want only 2 latest topic to view at the front page.. so the rest i untick the “Promoted to front page”..

    when i create another topic, i just untick the older topic to make sure only 2 at front page..

    ok, the problem is, i dont know where is the old topics go. i can see it inside Administer / Content management / Content…

    i want to make it as a menu. like “previous discount” or “previous package” or “older stories”..

    i hope u can understand my words..

    • Saiya,

      I hope I follow what you’re asking. One way to do is to allow only one item per page, this way there is a next and previous link and the front page only shows the most recent item. Does that make sense?

      I will be tackling custom content types and views soon and if I don’t forget I will add an example similar to what you’re trying to accomplish.

      If what I said doesn’t make sense, or if I misunderstood your question, just clarify it again and I’ll reply as soon as I can.

  7. hi mary……
    it was nice to have ur tutorial…..i have learned a lot.
    it is easy to understand n just up to the marks….
    plz let me know whenever ur new posts are there.
    n may be if u could add where do we write the php n html code if required in our drupal website….

    thanks a lot
    priyanka

  8. Thanks Mary… anxiously awaiting the next section. I almost feel confident with it now thanks to you. Well written and very easy to follow.

  9. Hi Mary!

    Your tutorials are great! Thanks so much.

    I am having some trouble with the FCKeditor. When I get to the step with Administer -> Site Configuration -> FCKeditor to assign roles etc., it does not actually show profiles when I scroll down. Instead, I have a message that says “The FCKeditor component is not installed correctly. Please go to the FCKeditor homepage to download the latest version. After that you must extract the files to modules/fckeditor/fckeditor and make sure that the directory modules/fckeditor/fckeditor/editor and the file modules/fckeditor/fckeditor/fckeditor.js exist. Refer to the readme.txt for more information.”

    I have tried reinstalling it and am pretty sure that I am doing it correctly, but to no avail. Any idea what I might be doing wrong?

    Thanks!

    Yifan

  10. I got a friend to help me out…but I will definitely keep following this blog 🙂

  11. Well done, Mary. It may not make you rich, but people will always love your tutorials. I’m sitting watching my RSS feed for the moment you talk about Views, etc.

    Wonder if it will tell me enough to let me figure out how to create a secondary menu like this: A-C; D;E-G;H-K;… etc.,

    i.e. an Index that lets users search content by first letter of a node title. At the moment, I can use a view with a search box in it – what I want is a menu link that displays results of a pre-coded search.

    • Mike
      🙂 thank you for the comment, glad you like the tutorials. I look forward to creating that tutorial when I have time, which unfortunately has been in short supply for me. My next task in the Drupal series will definitely be CCK and Views.

      mary

  12. Thanks so much for the great tutorials. I am a complete noob at Drupal and these tutorials have really Helped. I have recently created a website
    http://www.ppss.org.au/main in joomla. But the guys there now want it converted to Drupal, These tutorials are going to be a great help

  13. Mary,

    Have you got a time lined planned for your following up tutorials? I’ve found them the best anywhere on the web.

    If you are planning on doing more can you consider these aspects which I am currently scratching my head about:

    1/ Googe search CSE module
    2/ File uploading
    3/ Scoial networking integration (youtube, twitter, facebook etc…)
    4/ Mysql Database integraiton (say to hold files or as an information resource which is ‘stronger’ then blogs/posts).

    Many thanks.

    Rob

    • Rob
      Thanks for the feedback. I have a long list of tutorial requests, but I will add these to the mix. I generally write tuts based on the projects I’m working on since the tut writing stuff doesn’t pay the bills. I might be doing 3/ soon though, keep your fingers crossed.
      I’m not clear about some of your needs though. Could you elaborate on requests 2/ and 4/?

      thanks
      mary

  14. mary,

    i wanted to thank you for the tutorials. the past few days were awesome and i feel like i’ve really got a grasp on things.

    very well laid out, which is a skill many in the field lack. thanks again!!!!

    nate

  15. Mary,

    Being able to link further mysql databases and then allow for the representation of the database content?

    Also you touched on it in one of your tutorials but in order to get drop down menus, what is best superfish or nice menus? What is the difference between them? I’ve asked in drupal forrums and all replies just send me to the link for the modules saying “see below”.

    Im trying to implement drop downs on the basic garland theme from where your tutorial ends but I am having trouble.

    • Rob
      DBs: For linking to more databases, look at http://drupal.org/node/18429
      Superfish: I don’t know which would be considered the “best” superfish menus. I honestly haven’t used them much. The times I’ve used superfish menus they were already built into the theme. roopletheme.com themes tend to use superfish menus. If you know how to code CSS and theme and have the time to read themeing docs, you can integrate superfish menus into any theme you want. Here’s a short but quite useful tutorial on this -> http://adaptivethemes.com/add-superfish-drop-menus-to-any-theme-easily.

      Sorry to just point you to other links. If I have time I will make a tutorial on this, but like I said before, the time to make custom tutorials is very limited for me. If I end up with a project that needs this, or I have time to spare, I’ll make a tutorial on modifying Garland menus, but I think the link above will give you a great starting point.

      mary

  16. Hi Mary

    Coming back to my questions, I think a lot of my questions revolve around two particular areas: 1/ CCK and views and 2/ Themeing and CSS.

    The first i think you have mentioned you are contemplating a tutorial on, the second I think would be helpful as a module just to give an overview of how the theme and CSS works with Drupal. For instance, in your tutorial drupal system, below the site name but above the content region, you get a hyperlink showing where you are in the page. How would I alter this as it shows the levels when I am navigating through the admin menu but doesn’t show my custom content?

    Is this where taxonomy needs to be implementated?

    • Rob

      There’s a module for that! 🙂
      Custom breadcrumbs module -> http://drupal.org/project/custom_breadcrumbs
      Taxonomy breadcrumb module -> http://drupal.org/project/taxonomy_breadcrumb

      Themeing is a big topic, there are a lot of resources out there but getting the gist of it is not trivial. I can’t promise I will do a full themeing tutorial any time soon as that will take a lot of time, but I can try to answer specific code questions when possible.

      mary

      • Mary

        Thanks for the response. I am just wondering if you can tell me how I would change the default garland breadcrumbs (which show the navigation links) to show primary links? I’ve used firebug to locate the div function within the garland theme, but I can’t understand where the $breadcrumb parameter gets populated? I’m literally going crazy trying sort what I assume is a simple issue for most useful drupal experts.

        I did try the breadcrumb module and that does what I want, but of course the garland inbuilt breadcrumb is still present and I can’t place the new breadcrumb module in the place I want it to be (i.e. over the default garland breadcrumb).

        I’m tried the drupal forums also to no avail 🙁

        • Rob
          Drupal’s default behavior is to place the items in the Nav menu as the breadcrumbs. I don’t think there’s a way to change this default behavior without hacking into core, which you really don’t want to do.
          This is untested, but you could try this: Comment out $breadcrumb in the code to remove the inbuilt breadcrumb, then place your breadcrumb module where you want it, see if that works.

          mary

  17. Hi,

    These tutorials are very nice and thanks very much for spending time in creating this tutorial. What is the next in this tutorial and the links for that one please.

    Thanks Again,
    Narasimha.

  18. Great job. Its definitely awesome. A billion thanks.
    I want to know if there are special issues with update.php which appears after enabling a new module?
    Thanks.

  19. Hi,
    I have been following your tutorial, and I gotta say, by bar the best tutorials ever. Thank you so much. I do have a question though.
    Right now my website’s name is localhost/drupal . I want a personal domain name. What do I need to do for that? Do I have to buy a domain name?

    • Vishu
      Yes, you will need to buy a domain name, and then get a hosting account. This will allow you to build your website on your own domain name and have it accessible online.

      mary

  20. i must say , i have read all your tutorials about drupal 6 and helped me to understand a lot of things. I have one question to make …. how can i install different language , and what will be my options if i do this? i mean if i install another language do i have an option to change between them whenever i want? or what? and one more question about CKEditor…i was reading at drupal.org about FCKEditor module and it says “CKEditor module: we received lots of user requests asking for the CKEditor module. CKEditor is the next version of FCKeditor. Just wanted to let you know that the first stable release of the CKEditor module is now available, it is very similar to the 6.x-2.x version of the FCKeditor module.” ….. so which one should i prefer best? is CKEditor better?

    • Tasos
      For different languages, you use the Locale module. You can read more about multilanguage support at http://drupal.org/node/21145. I have never used it so I can’t really comment much about it.
      For the RTEs, I use FCKeditor at the moment and will soon switch to CKEditor which as you read is the new version of FCK. I use CKEditor on MODx websites and I like it a fair bit.

      I recommend you try both and make your choice based on your own experiences with each.

      mary

  21. thanks a lot for drupal tutorial

  22. Great tutorials – fantastic help for someone totally new to process to get started with a very professional site. Steep learning curve though.

    Thanks

  23. This (Drupal 6 – Part 12)
    appears to be the last tutorial of the series?

    • Yes, this is the last part of this series. I had intended to do more but time just wasn’t on my side. Now that I’m working more with Drupal 7 I will be doing a series on that. But I think the Drupal 6 series has gone far enough that it should be possible for a beginner to figure out anything else after that by looking at the official docs or just experimenting. Is there something specific you were looking for?

      mary

  24. Hi

    Thank you very much for your tutorials. I could not go this far without them.

    The only problem I have by now is with CFKeditor. I followed the instructions, set permission, configure FCKeditor profile, but still I couldn’t see the a palette with formatting options when create content/page.

    Is there any trick?

    Thank you

Leave a Reply

Close