Using Text and Image Editors

Plain, undecorated text is often okay. Then again, it's often boring. Chances are you'll want to spice up your entries with text styles, colors, lines, maybe even tables and graphics.

You can do that within many text fields – most importantly, within the body text of nodes. Drupal sites can offer any of many available tools for handling those tasks. 

Tools of the trade

First, there are many "WYSIWYG" ("What You See Is What You Get") text editors available for Drupal that bring word processor-like styling and editing ability to text fields in your nodes or elsewhere.

Next, text editors typically give you access to an image editor, a tool for inserting images into the text and making simple edits (such as changing its dimensions). 

Finally, you may have another tool to complement the image editor: an image browser (or general file browser) for uploading images to your server and selecting images on the server. 

What's available on your site depends on how it was set up. Take the below as a general overview; details may detail a little or a lot on your site, depending on what tools it offers and how it's all configured. Where things differ, you should be able to figure out specifics for your site by poking around or by asking the site's creator. (Don't hesitate to poke around first, though; it's the best way to discover things!)

Text editors

There are many text editors available for use on web sites, each offering different capabilities. Two named TinyMCE and FCKeditor are popular with Drupal site creators and are the focus of the overview below. But even if your site uses something completely different, the basic concepts should remain similar. 

Appearance

A typical text editor gives otherwise blank text fields many tools, displayed as buttons in rows, for editing text, inserting graphics, and so on. The buttons behave very much like those in well-known word processor programs.

The tools offered will vary with setup. A full palette of tools using TinyMCE may look like this:

TinyMCE

The tools offered by the FCKeditor text editor may look more like this:

FCKeditor

Note that a site may be set up to offer a whole mess of such buttons, or just a few of the most important ones. Or it may offer the full raft of tools to high-level users, and few or no tools to low-level users. 

Whatever the appearance, a good text editor will offer tool tips – that is, the small "labels" that pop up when you hold the pointer over a button for a couple of seconds. Try that if you're wondering what any button does. 

Helpful tools

While an overview of all available tools would be too much to cover, here are some of the more useful tools you may find among your text editor's offerings:

Text styling tools

text styling tools

Here's a passel of tools for making text fancy. All of those buttons should be familiar to anyone with word processor experience. From left to right, the first four are tools to make text bold, italic, underlined, or crossed-out. The next four set the flow of text. After that come two tools to make bulleted or numbered lists, and after that, two tools to indent or outdent text. Rounding up this bunch are tools to set the color of text or the background behind text.

You can no doubt create some lovely and awful effects with those tools. Use wisely. 

Paragraph styling and font tools

font tools

These tools are important, especially the first. The drop-down box titled 'Paragraph' lets you choose one of the common paragraph styles used in HTML, including headers of varying weight. You'll probably make use of these a lot as you organize text under headers and subheaders. 

The tools for font family and font size are less useful if you're happy to leave those font choices up to your site's Theme. If you want to change fonts and their sizes all over the place, modify the Theme; don't go crazy manually applying fonts and sizes to all of your text! But if you want to quickly style the occasional exception to your Theme's look, these are handy tools.

Linking tools

linking tools

The above tools let you insert and manage links in text.

To create a link, first select the desired text, click the first tool above, and input the link destination into the window that appears. Click 'insert' (or 'save' or whatever the window prompts you to do), and the text will now contain the link. 

To remove a link from text, select the text and click the second tool. Poof, no more link.

Finally, to add an anchor to text, click the point to insert the anchor (such as the start of a line containing a header), click the third tool, and input the name of the anchor. Easy! 

Image editor

image editor

The button that calls up an image editor typically looks like a little "landscape picture", such as the above. (In the picture of FCKeditor buttons at the top of the page, it's the yellowish button in the center of the center row of buttons.)

Place your text insertion cursor where you want the image to appear, click the image editor button, and you'll be rewarded with a window that lets you enter the URL, and some other specifics, of the image you want to insert. As follows: 

Image editors

Remember, there's no built-in or widely dominant image editor used in Drupal sites. Your site's offerings may differ from the below, but should share enough in common to let you figure things out. 

Appearance

If your text editor is TinyMCE, your image editor might look like this:

TinyMCE image editor

If your text editor is FCKeditor, your image editor might look like this:

If you can't get any such window to appear, make sure that your web browser isn't blocking pop-up windows, or at least from your domain. 

Preparing images

First, just to make sure there's no confusion on one key item: Basic image editors offer no ability to actually create images, or even perform fancy editing. Their job is placing images within your text; the "editor" capability is limited to setting display details, like specifying the size and position of the image. (It's possible for a Drupal site to offer more serious editing capability, but that's a topic for sites with such fancy abilities.) 

As with any web site management system, you'll need to first have your images ready to use, whether you've procured them from somewhere or made them yourself. If you need to edit the images, use your favorite image editing software. 

Finally, know where your images are so you can tell your image editor where to find it! If the images are already on your server, great; you're halfway there. If they're on your computer instead, you'll have to first upload them to the server. That's no problem; keep reading.

Inserting an image

The basic idea is simple. See the field that says "URL" or "Image URL"? There you input the URL that pinpoints your image's location on your server. That's the key step. Set some of the other properties if you like, then click 'Insert' or 'OK' at bottom. The image appears within the text. That's it!

Except... Chances are you don't know the image's URL on the server (or maybe even its name). Or the image isn't even on the server yet. If so, you need the help of an image browser

Using the image browser

Depending on its setup, your site may offer a specialized image browser, or a general file browser. Whatever the technical details, the text below will call it an image browser

The image browser will let you locate and select an image on the server. If the image you want isn't on the server, don't worry; the image browser will also help you upload an image to the server from your computer, and then let you locate and select that image on the server. Either way, the image browser will then report the file's URL to the image editor, which can then place the image into your text. That's the goal! 

In both of the above images, the button for calling forth the image browser is to the right of the URL field: a small red and blue icon in the first image, a button labeled 'Browse Server' in the second image. Click it. You'll see a new pop-up window looking like this:

IMCE file browser

The above browser is offered by the combination of TinyMCE and a browser component called IMCE. The following instructions speak to that particular setup, but as always, can be generalized to your setup too.  

If the image you want is already on the server, skip to right to step 6. Otherwise, start with step 1 below: 

Uploading a file to the server

1. Click 'Upload' at the top of the window

In this image browser, that's a bit of a misleading label: clicking this doesn't yet upload anything, it only starts the process of specifying what you want to upload. With that cleared up, go ahead and click. You'll reveal the following buttons:

file browser choose file

2. Click the 'Choose File' button

That will open a window in your computer's file browser, asking you to locate the image you want to upload. Do so. 

3. Click to select the desired image in your computer's file browser

Once you've found the desired image file, click it to select it.

4. Click 'Choose' in your computer's file browser

Click 'Choose', or 'OK', or whatever your computer's file browser prompts you to click. You'll go back to Drupal's image browser, with the selected file's name appearing to the right of the 'Choose File' button. 

5. Click the 'Upload' button

That's the 'Upload' button to the right of the 'Choose File' button, not the 'Upload' link from step 1. Clicking it will send the image file to the server. The image file should then show up in the list of files, located and selected and ready to go. That lets you jump right to step 8 below!

Selecting a file on the server

6. Locate the file

Navigating the list of directories on the left, find the directory that contains the file you're looking for. The file name will show up within the list on the right. A preview of the image should also appear at bottom.  

7. Select the file

Click the file's name in the list. Look at the preview to confirm that it's the right one. 

8. Click 'Send to tinymce' at top

This is the link (or button) most likely to vary with your setup. It may say 'Send to image editor' or something else – with some image browsers, it may be a link that says 'add' which appears within the file list itself, to the right of your file's name and data. Experiment if you have to; you'll find the link or button that sends your selected file to the image editor.

Once you've done this, the image browser window will disappear and you'll be back to the image editor window. What's new is that the "URL" field will now contain the proper URL for an image on your server – that was the point of all those steps!

Inserting the image

9. Click 'Insert'

Depending on your image editor, that may read 'OK' or something else instead. Either way, this completes the process: The image now appears within your text editor. Good!

Setting image properties

Between steps 8 and 9 above, you can set several properties of your image. Once again, your options will depend on your setup; below are typical options, based on the TinyMCE image editor. Check the various tabs offered by the image editor window to find all of the below (or whatever options may appear under similar names). 

"Image description" and "Title"

These fields may have names like "Alternative Text". They're for inputting text to display in case the image doesn't appear; it's optional, but is good web design. 

"Alignment"

The choices under "Alignment" will set the alignment of your image within the surrounding text. In particular, the "Left" and "Right" options are extremely useful for images that display on the left or right, with text flowing around the image.

"Dimensions"

Here you can set the height and width of your image. Leave the fields blank to display the image at its original dimensions.

Note any tools ("Constrain proportions", or possibly a padlock-like image) for forcing the image to retain its proportions. With that option selected, you need only set one dimension (height or width), and the other dimension will automatically scale to maintain the original proportions.

"Vertical space" and "horizontal space"

Insert numbers here to add a few blank pixels of space above and below, or to the left and right of, your image, respectively.

"Border"

This lets you create a border around the image. The number you input will be the width (in pixels) of the border. 

From computer to web page: an image upload summary

Getting an image from your computer into the text of a field on your website involved quite a few steps. Here's a nutshell version of the process, from start to finish, using the TinyMCE image editor and file browser shown above: 

  1. Have your image ready on your computer, in a location you can easily find (such as the Desktop).
  2. On your website, navigate to the text field to receive the image (such as a node's Body field).
  3. In the target field, place the cursor where you want the image to appear.
  4. Click the button that calls up your image editor. The image editor window will appear.
  5. Click the icon (to the right of the URL field) that calls up your image browser. The image browser window will appear.
  6. Click 'Upload' at the top of the window.
  7. Click the 'Choose File' button. A window of your computer's file browser will appear.
  8. Locate the desired file on your computer and click to select it. 
  9. Click 'Choose' (or 'OK' or 'Open' as appropriate) in your computer's file browser. You will go back to Drupal's image browser.
  10. Click the 'Upload' button (to the right of the 'Choose File' button). The file will appear in the image browser's list of files on the server.
  11. Click 'Send to tinymce' at the top. You will go back to the image editor window, with the image's URL now specified. 
  12. Input other image settings as desired.
  13. Click 'Insert' at the bottom of the image editor window. The image will appear in your text field.

Whew! It's a lot of clicking – though once you start building up a store of reusable images on the server, you'll get by much more quickly.

Share/Save

Comments

KenFar's picture

If you're willing to spend less than $40.00 bucks -- I would highly recommend the Whysiwig Pro Editor. In most respects it is very similiar to both TinyMCE and FCK Editor. But overall the tech support is outstanding and it works extremely well as one single stand alone unit for text, insertion of any and every type of file imaginable ie....jpg,gif, flash, wav, mpg, you tube, google video, etc...

I am a satisfied user and am in no way associated with the product. I have just found it to be absolutely awesome. It is one of the few things that I found that kept me from getting completely discouraged with Drupal and not just moving on to another CMS.

Drupalace's picture

Thanks – tips like this can be a lifesaver. Lately I've been grudgingly accepting of TinyMCE, so haven't thought about it much - but then, always, on some theme Tiny will start acting up, such as tossing up editor windows of bizarre width that don't play nice with the Theme. (Probably some master CSS switch in there somewhere to fix that...)

Whysiwig Pro Editor goes on the master Things to Try list! (I actually do keep such a list, all GTD-like, even if things go on the list far faster than they come off... : / 

Add new comment