TDX Knowledge: Remove Extra HTML Formatting from an Article

You can use a variety of editors to create a knowledge base article.

If you draft in Google docs (or some other text editor), when you copy and paste into a TeamDynamix (TDX) article, extra HTML formatting is added.

For example, the HTML code may have span tags, such as <span style="font-size: 10pt;">. Span tags and other extra HTML code can cause formatting inconsistencies and issues, particularly if the article is published to the Technology Help website. If you are publishing to the Technology Help website, you must clean your article's HTML.

We are currently using HTML Tidy.Net (htmltidy.net) to remove the extra formatting that other text editors add.

  • Beware: This free tool sometimes sticks random HTML ads into the code at the bottom of the article. Be sure to remove anything that is inserted.

In this article:

Preparing to Clean a Google Doc Article

  1. Create a New Knowledge Base Article and keep it open in edit mode.
  2. Open the Google doc article in a new tab or window.
  3. Copy everything except for the article title.
  4. Remove the extra HTML formatting.

Removing Extra HTML Formatting

You must use keyboard shortcuts for all copy/paste actions when using HTMLTidy.Net.

Notes:

  • After you clean your article's HTML, you will have to fix any nested numbered lists because they will have changed to Arabic numerals. 
  • Use HTML Tidy to set links to open in a new window​​​​​​​​​​​​​​; it is easier than setting them in TDX.
  1. Open htmltidy.net in a new tab or window. The visual editor is on the left and the source editor is on the right. The Tidy options drop-down menu is on the right above the source editor pane. 
    • The first time you use the tool, you will need to turn off the default option for removing Classes, ID's. 
      1. Click the drop-down Tidy options menu.
      2. Click the checkmark next to Classes, ID's option to deselect it. This setting will be saved for the next time you use the tool.
        htmltidy cleaner menu options; classes, ID's not selected
      3. Collapse the menu.
  2. Click New page button on the Source editor toolbar above the source editor on the left, if necessary.
    htmltidy source editor menu bar; new page icon highlighted
  3. Paste the article content into the left pane under the editing toolbar. The underlying HTML code appears in the right pane.
    • Images from a Google doc will not appear. You will need to put them directly in TDX.
  4. Click Tidy that code button on the right above the source editor pane. The extra unwanted HTML formatting will be removed.​​​​​​​​​​​​​​

Using HTML Tidy to Set Links to Open in a New Window​​​​​​​​​​​​​​

Even though links in a Google doc automatically open in a new window, there is no code associated with that action. You can use HTML Tidy's visual editor to set links to open in a new window.

  1. Click somewhere in a link in the visual editor.
  2. Click the Insert/edit link button on the toolbar. The Insert link window opens.
  3. Select the Target drop-down menu and select New Window.
  4. Click Ok. The code target="_blank" rel="noopener" automatically generates in the HTML pane.   

Entering the Cleaned Content in a TDX Article

  1. Copy the text from the left pane in HTML Tidy.net.
  2. Paste the text into the Body field of the TDX article.
  3. Make any necessary final edits to your article.

Making Final Edits to Your Article

  1. Add any images. See Add an Image to an Article.
  2. Make Images Accessible Using Alternative Text. 
  3. Update Table of Contents and Other In-Page Links
  4. Set any links to pages external to the article so they open in a new window if you did not set them in the HTML Tidy visual editor. See Create Links in an Article.
  5. Remove any bold formatting from Headings only. 
  6. Format Nested Numbered Lists.
    • HTML Tidy changes all lower alpha and lower roman lists to numbered lists. So you'll want to update those in TDX.
  7. Save your article.

Additional Resources

Last modified

TDX ID

5432