Why HCd? Testimonials & Awards Bio: J. Hogue Bio: James Re Studies in [Web] Design HCd>CMS Tutorials Found Thoughts Contact / Location

TinyMCE: HTML editing made easy

HCd hearts TinyMCE

TinyMCE is a WSIWYG HTML editor that HCd uses for our Content Management System. Hopefully, it makes life a little easier for you – the client – when you are editing the page content of your website.

The best thing about TinyMCE is that it makes it easy to edit HTML, and the interface is designed in a fairly user-friendly way. Below is an overview of the buttons and what they do, but should you ever wonder what a button is, be sure to take advantage of the Tool Tips that are inherent in the interface. Simply hold you mouse over one of the button icons for more than a second, and a Tool Tip should show up with the title of the button. Usually, the title of the button will explain what it does.

Tiny MCE with a Tool Tip
If you hover the mouse over a button, a tool tip will briefly explain what that button will do

We have been fiddling with the number of tools and options that TinyMCE provides, and so far, we have come up with the layout below. Your install of the HCd>CMS may be custom, and may not look exactly like this.

Tiny MCE Button Layout
The current button layout of TinyMCE (as of June 2009)

And now, a list of what they are, and what they do

(Top row first, from left to right)

    • Remove Formatting/Eraser:
      This button will remove styles if you need to start from scratch. Select All the text, or select what you want to change to a plain style, and click this button.
    • Bold:
      All of these tools work basically the same – highlight the text that you want to bold, italicize, align center, etc... and click the proper button.
    • Italic
    • Underline
    • Strikethrough
    • Superscript
    • Subscript
    • Left Align Text
    • Center Align Text
    • Right Align Text
    • Paragraph Style Drop Down Menu:
      The contents of this drop-down may vary, but basically, it contains the formats for block-level elements, meaning, these styles will change the style of the entire line of text, from beginning to the next paragraph break (full return). Simply place your cursor anywhere on the line that you want to change, and choose a style from the drop down menu. You do not need to select the whole line. If your entire story changes style, then you do not have full returns between paragraphs. Insert your cursor at the beginning of a line, delete the space before the paragraph, delete again to bring the paragraph up to the end of the previous paragraph, and then hit return to insert a full paragraph break. Now change the style of this paragraph back to a plain paragraph, or whatever you want.
    • Paste as Plain Text:
      A usefull tool for cutting and copying from the web or other programs. A lot of times, styles will come along with the copied text that you may not want to copy. Use this button to paste from your clipboard and remove any unnecessary styles.
    • Select All: Helps PC users select all the text in the window.
    • Clean Up Messy Code:
      Will help clean up code after you have pasted it. Doesn’t always get all the messy code, but it does help remove redundant and nested style tags.
    • Horizontal Rule:
      Inserts a horizontal rule which will typically go all the way across the text column.
    • Bulleted (unordered) List
    • Numbered (ordered) List
    • Undo
    • Redo
    • Insert Link:
      Use this button to insert a web link. Highlight the text that you want to turn into a link, and click this button to open a little window to insert the information for a link. If the link is for an external website (not your own) make sure to start the link with http://. To link to your own site, start with a forward slash “/” and anything after the domain name (www.yourdomain.com/area/page).
    • Remove Link
    • Open HTML edit window:
      Great for advanced users, and maybe to find that tag that might be messing up the way the content displays on the front-end.
    • Get Help for TinyMCE:
      Unfortunately, this doesn’t contain many help documents, but instead, directs you to the TinyMCE website.

Other important things to remember

Email Links

Typically, links for a person’s email address would have to be coded, but remember, the HCd>CMS will automatically rewrite emails as links in a protective way so spammers can not “harvest” the email address. So you need not worry about turning email addresses into links by hand.

Because of this feature, we discourage the insertion of an email link in a more conversational way. For instance, saying something like “email us” will make the CMS see the email address in the link (email us) and try to protect it. Instead, try to get into the habit of writing things like “email us at ” or “email Jenny ( ) to sign up”, etc...

Allowed Code

TinyMCE was designed for public blogs and bulletin boards, therefore, it is very protective of the code that is entered into the window. It is designed to keep hackers from pasting or writing malicious code. We don’t have that problem, and so, have added a list of “allowed” code to the configuration of TinyMCE, so that you can paste links to YouTube videos and the like. There may be, however, some code that we have not yet allowed and which you need us to allow. If you are pasting code and the content is not being saved, or it is not saved with all the tags that it needs to run properly, then TinyMCE may be cleaning out the suspicious code. Simply let us know, and we can figure out which code tags need to be allowed.

Currently allowed elements:

  • listed as allowed element [allowed attributes]
  • div [ id | class | style ]
  • script [ language | type | src ]
  • form [ action | method | id | class | name ]
  • input [ name | type | value | alt | src ]
  • object [ width | height ]
  • embed [ src | type | wmode | width | height ]
  • param [ name | value ]
  • iframe [ id | width | height | frameborder | scrolling | marginheight | marginwidth | src ]

Additional Links:

Tiny MCE Wiki: Lots of in-depth tutorials in Wiki format.
MoxieCode: The developers of TinyMCE, who we owe a debt of gratitude.