Using a Rich Text Editor

Drupal and WordPress both provide a rich-text editor for composing text content that appears very similar to MS Word’s interface (see Rich Text Editor Tips in our Drupal 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.

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.

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, click the Paste as plain text button in the Drupal editor:

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 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 will need to reviewed and edited by our team.

Before copying the content, switch to the source view. In the originating site 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.

Using an External HTML Editor

Another possibility is to use an external HTML editor in between two Drupal or WordPress sites or as a stand-alone writing tool. Perhaps you want to pass around files you are writing using Box before you’re ready to work inside Drupal or WordPress. There are several good HTNL editors that have an WYSIWYG editing mode.

We recommend free app that runs on both Windows and Mac called BlueGriffon. It’s free for basic use. Here is a possible workflow to use BlueGriffon as an intermediary editor between two Drupal or WordPress sites:

  1. Copy the HTML out of old Drupal or WordPress site.
  2. Create a new page in BlueGriffon and select Source from the tabs below the page: BlueGriffon View Tabs
  3. Paste the source code into a new page in BlueGriffon. Be sure to paste the HTML between the <body> tags.
  4. Edit formatted text in BlueGriffon.
  5. Copy HTML in BlueGriffon. Again, be sure to copy the HTML from between the <body> tags.
  6. Paste HTML into new Drupal or WordPress site.

BlueGriffon Screenshot

Quick Style Note: <i> vs. <em>, <b> vs. <strong>

Blue Griffon allows you to either use the the old-style <b> (bold) and <i> italic html tags or the newer <em>  (emphasis, displays as italic) and <strong> (strong, displays as bold) tags. Unless you are writing something like a bibliography, stick to the new <em> and <strong> tags and avoid the <u> underline tag.
You can choose <em> and <strong> from the left-side icons:
em and strong buttons

Achievements & Updates

Announcements, tips for a successful website and analysis reports of trends and visitor data.
College of Fine Arts WordPress Instruction
College of Fine Arts Drupal Instruction
Subscribe to our email list to receive periodic tips and resources for generating great digital content

Contact Us

The COFA Web team can be reached by emailing us at cofawebmaster@austin.utexas.edu


To view some links on this page you may need to download Acrobat Reader.