Using a Rich Text Editor

Drupal and WordPress both provide a Rich Text editor for composing content that appears very similar to MS Word’s interface (see Rich Text Editor Tips in our Drupal Instruction site and Using the Editor in our WordPress Instruction site). Behind the scenes, however, it’s building HTML code suitable for a web page. It would be a mistake to simply cut content from Word (or any other word processor) and paste it directly into Drupal or WordPress. It might look OK in the editor, but the actual HTML code that gets pasted in from Word is a mess that can break the design and layout in unexpected (and sometimes crippling) ways.

Below are tips and instructions for writing new content, pasting from a Word processing software and copying from another Drupal or WordPress site. Another option is to learn to learn a little HTML or to Use an External HTML Editor.

Writing New Content

When creating new content, we recommend composing it directly in Drupal or WordPress. Format as you see fit. Leave the page unpublished until it’s ready. If it’s not working out the way you want, contact us at cofawebmaster@austin.utexas.edu. We’ll be happy to help.

Pasting from a Word Processor

If you must paste content from Word, you will need to paste it in unformatted. First copy the content as you normally would in MS Word; then,

in Drupal click the Paste as plain text button:

Insert as plain text button circled

You will then need to reformat the text: bold, italics, headings, lists, etc. will need to be reformatted.

WordPress has a similar button:

paste as text in wordpress

If you don’t see the second row of buttons, click the Toggle toolbar button on the first row. To see the HTML code in WordPress Click the Text tab.

Copying Content from another Drupal or Worpress Site

HTML content can be copied between sites without losing formatting. Note, however, that not all styling will be identical between sites and that some code may not be visually supported. Pages with complex content like tables and special layouts with the Body field may need to be reviewed and edited by the college Web team.

Before copying the content, switch to the source view. In the originating site: in Drupal click the “Source” button, in WordPress click the “Text” tab:

Drupal Editor Source Button Screenshot

Then select all the HTML content in the editor window:

Drupal Editor HTML source view

Now switch to the destination site and do the same, but paste instead of copy: Switch to source view. Past HTML code. Switch back to the regular view (AKA the WYSIWYG view, for what you see is what you get) and continue editing.