Rich Text Editor: FCKeditor

Our favorite rich text editor for websites is the FCKeditor. While it isn’t perfect, it simplifies the ability to add content or make quick edits in content on a website. The Drupal 6 implementation of the FCKeditor is very well done.

This tutorial is designed for those users that have the FCKeditor configured for their Drupal site. If we have built your Drupal site and you are in the role of Blogger, Site Moderator or Site Administrator this tutorial applies to you. We still think the easiest way to add content to a page is via Windows Live Writer, but the FCKeditor will make it very easy for you to edit content on pages as needed.

Here are the key components of the FCKeditor:

fckeditor key options

  1. If you need to add images to a post, you will place your cursor where you would like the image inserted and click this button. A pop-up window will appear.
    • If you know the web location of the image, you can put the URL here. The alternate text is so that search engines will know what your images is. The other settings on this screen allow for configuration of the image.
      fck image properties
    • If you would like the image to link to a location, you can add the link to URL here and if you set the target to New Window, you can link to another site without the visitor leaving your site.
      fckeditor image link properties
    • If your image isn’t on the web already and you would like to load it, simply click the upload tab, browse to the location on your desktop and then click send to server.
      fckeditor upload image
  2. If you would like to add some code to your page (for example if you want to embed a YouTube video) you’ll simply click this source button. You’ll need to understand a bit about HTML code to make this work. One point of caution, the FCKeditor doesn’t do a great job formatting the code.
  3. When pasting content from Microsoft Word, it will carry over some “gunk” code that could really mess up your post. When you copy from Microsoft Word, you should click this button to paste. If you still have problems, you may need to click the button just to the left and paste as plain text. The easiest way to over come the “gunk” code that Microsoft Word causes is to use Windows Live Writer.
  4. Sometimes you may have some formatting that isn’t playing nicely. You may have a bold tag in the wrong place or a numbered list acting funny. This button will erase the formatting so that you can start over without rewriting your content.
  5. If you want to create a link to another page, you will simply need to highlight your text and click this link button.
    • Usually, you’ll just need to add in your URL for where you would like to link. If it isn’t a web location (i.e. http) you’ll have to adjust some of the other settings.
      fckeditor link
    • If you need to have your link open in a new window, select the target of “New Window”
      fckeditor target
    • If you would like to include a file attachment, you can upload it like you did with the images above, but in this case, it will insert a link instead of an image.
      fckeditor upload file
  6. If you would like to have your font to be a different size, current HTML standards to not like it when you add a font size tag. That means that you can’t change the font size to a different point size. Instead, you have different headings. This is where that is handled.
  7. For every post, there are two parts to the content. The first is the teaser (summary) text and the second is the full text. The teaser text is what is shown in lists (like on a blog aggregate page). For most content that you create, you can manually determine where the teaser text will break off by putting your cursor there and then clicking this button. If you don’t put this break in, Drupal will determine where your break should be.

Required module for this tutorial:

FCKeditor

Archive Category: