Beware HTML Gremlins Hidden in your Nodes

It's certainly efficient when entering text into your Drupal site to cut-n-paste from existing sources. Why retype, right? I'm with ya. But be careful when you are pasting already formatted rich text (like from a MS Word document) into your node's body if you have a rich text editor (e.g. TinyMCE) and allow HTML in your Input Format options.

Even if the copy doesn't look like it has any formatting, chances are it does. Word processing software embeds its formatting markup invisibly, behind the scenes. When you paste this formatted text into your Drupal node, TinyMCE/Drupal tries to render the invisible markup into corresponding HTML. Unless you look at the resulting HTML source in your node (by clicking on TinyMCE's "HTML" button, for instance) you may never see some dangerous gremlins hiding out waiting to hijack your meticulously themed Drupal layout.

Take, for instance, the example we tore our hair out over this morning (we won't name any names). For some reason the layout of one particular page which had a list of teasers generated by a View, was throwing the top navigation bar to the bottom of the page and the footer to the top. Huh? Turns out, one of the teasers has some hidden HTML. The HTML was placing a CSS class identifier of "content" into P and Span tags present in the node (and teaser) body. As it happens, "content" is a pretty common class identifier in Drupal themes. In this case, rules applied to this class were causing major havoc with this page's layout. We didn't find the culprit until after checking the usual suspects: template.php, page.tpl.php, several CSS files, the view, the page node itself, etc.

Save yourself the hassle. Paste only text that is text-only. You can do this by copying your formatted text from its source, like MS Word doc, and paste it into a text editor like Notepad or TextEdit and save that resulting doc as text-only. Then, and only then, you can copy this text to paste it into our node body. Upon doing so, feel free to apply any desired formatting within Drupal itself and avoid the nightmare of invisible markup.

No votes yet

Comments

Post new comment

  • Allowed HTML tags: <a> <img><b><i> <em> <h1> <h2> <h3><h4><h5><h6> <sub> <super> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <br> <p><sup>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
4 + 10 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.