Using the Tinymce Editor in Drupal

One of the most important modules to understand in Drupal is the Tinymce module. Tinymce is a “what you see is what you get” html editor or “WYSIWYG” for short. What WYSIWYG editors do is allow users to make changes in the html of a web page without having to type out the code all by hand. I set up every site that I build with the Tinymce editor because it makes it much easier for the average person to make attractive pages in their Drupal website. Click here to watch the Tinymce video tutorial for Drupal.

The most important buttons to become familiar with in the Tinymce editor are the “disable rich-text” and the “enable rich-text” buttons. Most sites that I set up have Tinymce turned on by default, which is good for most situations, but there are some cases in which it is important to turn the editor off. In order to do so you just need to click the disable rich text button underneath the text field. As soon as you click disable rich text Tinymce disappears. If you want it to come back just click enable rich text. It is very important to remember to turn Tinymce off every time that you paste text in from external sources especially text coming from web pages or word processors. Although you may sometimes be able to get away with pasting text into your pages while Tinymce is on, doing so imports foreign html into your page and can cause very strange results.

Adding Links with Tinymce

Adding links into your pages is easy with Tinymce. All you have to know is the URL of the page that you want to link to. To create a link inside of a page select the text, then click the little chain icon on the top of the Tinymce editor. The Tinymce link editor window will then appear. Just fill in the URL of the page that you want to link to in the field titled “Link URL” click insert and you’re done. The link can be a complete URL to an external website such as http://www.waitingforthestorm.com or it may be an internal link to a page on your site such as node/23 or admin/build/blocks. If after submitting your page the link doesn’t work, you might want to double check your spelling. Links are case sensitive.

Formatting text with Tinymce

There are several handy ways that you can change the display of your text directly through the Tinymce interface. The most commonly used are Bold which is displayed on the Tinymce bar as a B, Underline (U), Italics (I), subscript (x2) and super script (x2). To use these functions first select the text that you would like to change with your mouse, then click the icon of your choice. To undo a style, select that same text again and click the same icon again and it will go back to normal.

Adding images to your page with Tinymce and the imce file manager.

At some point you will probably want to add images to your website. Fortunately Drupal provides a way of doing this easily without having to know any html.
The first step to adding an image with Tinymce is to click the little tree icon on the top bar of your Tinymce editor. (The icons may be at the bottom of the editor depending on how your site was configured.) When you click the tree icon the advanced image editor should pop up with the following window.

The little box on the far right corner of the field titled “Image URL”. That little box is very important. Clicking on the box opens imce file manager which is what allows you to upload images to your website and insert them into your pages. If you’re following along go ahead and click that little box. When you do you should see something similar to the image below.

The interface for the imce file manager may be a bit confusing at first, but take a little time to get to understand it. It’s worth the trouble.

At the top of the imce window is the list of files that are currently available in the directory that you are looking at. If you have never uploaded any images at this point the directory might be empty, unless your web designer made use of Tinymce when creating pages for you (which is not uncommon). Underneath the file list is a solid black line, and under that line is the directory navigation. Now this might seem confusing to you, but all this tool does is help you move up in down in the hierarchy of folders in your files directory. It works the same as the file explorer system for your computer. If you click on the down arrow on the right you will see the options for exploring your folder. If you are at the top folder you will see a list of subfolders if you have created subfolders, or if you are already inside of a subfolder then you will also have the option to go “up” which means to go up to directory holding the subfolder that you are in.

If you have ftp access and you know how to use it, it can be much quicker to upload files and folders directly to the server through an ftp client. Imce automatically recognizes any folders created with ftp and allows you to navigate through them. However, sometimes it is just simpler to use imce’s handy little uploader located on the bottom of the window. This works the same as any file upload system that you may have used in the past. First click “browse” to search for images or files on your computer. Then click upload. Be aware of file sizes here! There usually are limits to the size of image that you can upload, and for good reason. Once the file has been uploaded you will see the file name appear in the file list on the top of the window. Then when you’re ready, just click the image and you will be taken back to the Tinymce image editor with the URL of the image filled in for you.

You might think that you are finished, but resist the temptation to click the “Insert” button for now, there are still a few important steps. Take a few moments to fill out the “Image description” and “title” fields. Doing so is helpful for establishing your ranking with the search engines. At this point if all you want is an image above or below your text you can click “Insert” and the image will be added. There is much more that can be customized in the display of images using the Tinymce image editor, be sure to check out our Advanced Image Formatting tutorial for more details.