TinyMCE Guide

TinyMCE Editor is the WYSIWYG tool we have decided to use to help our contributors enter their articles into Financial Sense's content management system.

WYSIWYG (What You See Is What You Get) editors such as TinyMCE help contributors who are not HTML or CSS experts create web pages with simple "buttons" that function a lot like the formatting options available in many word processing programs. In other words, WYSIWYG editors help you leverage all the document formatting knowledge you already have so you can easily create web pages.

Contents:

Which browser should I use to enter my article?

Internet Explorer 8, Firefox, Safari & Chrome work well with our content entry system; Internet Explorer 7 has some known bugs so we recommend using another browser to enter your articles. Chrome tends to be the "fastest."

Save, Save, Save!

Since our web contribution system does not have an "auto-save" feature, we strongly recommend that you frequently save your article as you work on it using the "Save" button at the bottom of the "Story" you are working on.

Any unsaved work will be lost if you "navigate away" from the Story you are working on. Accidental "navigating away" can occur in a number of ways, such as when you click on a hyperlink within an email or within another program. These other programs often try to use the current browser page (which will likely be the browser page you are using to edit and submit your contribution) to open the hyperlink you've clicked.

There is a safety net to help prevent accidental "navigating away": if you attempt to navigate away from the current editing page, a warning pop-up window appears.

confirm navigationNavigate away IE

Press "Stay on this Page" or "Cancel" to continue editing your article.

Titling Your Article

The title and subtitle of your piece should perform several functions:

  1. Quickly summarize the key point of your article
    • Generally, the title and subtitle should tell the reader who, what, how, and/or why in as few words as possible
  2. Draw the reader's attention and pique their interest
    • Aim for "pithy" and "arresting" word choice
  3. Optimize your title and subtitle for search engine results
    • Properly capitalize the title; only capitalize the first word and any proper nouns in the subtitle
    • Include a noun and a verb (preferably "active" rather than "passive") in your title
    • Include "key words" (a.k.a. keywords) in your title and subtitle; key words are phrases that make it possible for people to easily find your article via search engines

FS Staff may retitle your article so that it meets these guidelines.

Pasting Your Text into the Editor

To correctly paste text into the editor, use the "Paste as Plain Text" button. This gives the editor a chance to analyze the text, and remove any unnecessary formatting. Don't be dismayed if the editor seems to "strip out" a lot of your formatting. It's supposed to. A lot of word processing formatting doesn't translate well across browsers. So you'll use the editor to re-add the formatting later; this will help your article look the way you want it to on most browsers.

 paste as plain text

Q: What happens if I don't use the "Paste as Plain Text" button?

A: When you paste content directly from a word processing document or from a web page creation program into the editing area, it will often have incorrect HTML. Your article may look the way you want it to on your browser, but may not look right on other browsers.

  • The main faults observed when directly pasting without using this button are as follows:
  • The code is not correctly broken up into paragraphs; line breaks (br) tags are incorrectly added instead.
  • Quotation marks and special characters often don't paste properly.
  • Graphics are not properly displayed.

Q: Do I have any alternatives to using the "Paste as Plain Text" button?

A: Yes, but they're really just solutions that create extra work and add extra steps for you.

You can convert your word processing document to "plain text" before copying it into the editor. Converting to plain text can be done by saving the document as plain text or, on Windows, by copying and pasting the text into Notepad first and then copying from Notepad into the "Paste as Plain Text" button.

Before copying the text you should ensure that the there is a blank line between each paragraph.


Adding Formatting to Your Text

Want Your Article to Show Up on Google Searches and Other Search Engine Results?

  • Make use of "header styles"
    Search engines give more weighting to words tagged in the code as "headers."

Once your text has been pasted into the editor, you can apply many of the formatting options available to you in your word processing program: bold, italic, numbers, bullets, hyperlinks, text alignment, etc. using the familiar buttons on the editor toolbar. 

There are a few formatting options you will *not* have access to, such as "font," "font size," etc. Instead, we provided specific text formatting options for you so that our contributors' articles will look consistent. They include:

Div: Inserts a pre-formatted, horizontal gold line

Paragraph: The default format for your text

Headings 3–6: Help to subdivide your content into sub-topics. (Headings 1 & 2 are not available since they are reserved for the Title and Subtitle.)

Blockquote: If you are quoting more than 5 lines of text from another author, you will apply this format to the text.

Here's an example of what they may look like in the body of the article:

styles for heading

Adding Images/Graphics (IMCE)

Graphics Tips

  • We recommend that you use .jpg, .gif, and .png graphics only. Other graphics file types may have problems with some browsers and will be slow to download.
    • JPEG (.jpg) is best for photos in that it compresses to a smaller size and yet shows in better quality. JPEG will always show in a square or oblong shape.
    • GIF and PNG are better for graphics. When creating a .GIF or PNG image you can specify one color of the image to be transparent. This gives the effect of an image that can have any shape.
  • Keep your graphics file names short, and try to avoid using spaces and special characters in the file names. *Do* use hyphens to separate words. As an example, name your image "stock chart from 1980 to 1990.gif" as "stock-chart-1980-1990.gif."
  • To prevent poor image quality, we recommend that you make sure your images are already the correct display size before you upload them.
  • Be sensitive to the ink-cartridge-use impact of your graphics and charts; for example, consider a white or "clear" background with a dark border instead of a dark background.

To Upload and Insert an Image

To add images to your article, your images need to first be uploaded to the Financial Sense server, and then connected to your specific article. So there are a few steps involved.

First click within the editor window at the position where you want to insert the image. Then click on the "Insert/edit image" icon (picture of a tree).

insert image button

The "Insert/edit image" window (below) will pop up.

browse button

The first entry line within the General Tab is "Image URL" (see example above). At the far right of this entry line should be a small square graphic (see circled button above). This is the "Browse" button. You will use this button to navigate to where your images are stored on your local computer, and then upload them onto the Financial Sense website.

Click on the "Browse" button. A new browser window comes up (below).

image steps 1 to 4

Click on the "images" folder, then click on the "year" (i.e. 2010) folder on the left side of the window. This sets up the image upload system to drop the images into the correct, search-engine-friendly folder.

To upload a new image to the Financial Sense server:

Step 1: Click on the "Upload" hyperlink at the top left of the window.

Step 2: Click on the "Choose File" (or just "File" in some browsers) button. This will open a browser window you can use to navigate around your personal computer to the location of the graphics file. The local browser window will likely look something like this:

choose file

Select the file on your local computer, then click on the "Open" (or "Choose" on other operating systems) button. The path to the file you have selected will appear in the "Choose File" (or "File" in some browsers) entry line in the File Browser window (example circled in red below).

file browser upload

Step 3: Click on the “upload” button that's next to the browse button. This will upload you image file into your user folder on Financial Sense. Once the image has been uploaded, it will be in your list of available images. (Now that the file has been uploaded to Financial Sense server, options are available to create additional thumbnail images from any of the files, should you choose to do so).

Step 4: Select the image you would like to insert into your article; it should become “highlighted”.

file browse select

Step 5:  Click “Insert file” button at the top of the window. It has a fluorescent green check mark next to the name Insert file.  After the button is clicked, you should get a new window saying “Insert/edit image” you'll now be viewing the “General” tab and you should see the Image URL of the image you just inserted from your image user folder. Click “Insert” button that looks like it has a green border around the button. You should now be seeing your uploaded and inserted image in your body content from your internet browser. (see circled file above as an example).

File uploaded

Want Your Graphics to Show Up on Google Searches and Other Search Engine Results?

  • Rename images so the filename means something to a search engine
    Search engines look at words separated by hyphens in URLs and filenames to decide if the URL or file matches the search terms.
    Example: If you want someone to pull up one of your images when they type "market crash 2008" into a search engine (like Google, Bing, Yahoo, etc.), you might name your image: market-crash-2008.jpg.
  • Add meaningful "alt" image text to the image
    Search engines crawl this text as well. No hyphens are necessary to separate words in the "alt" text area. This text is also used when 1) a web browser can't load the image or 2) a visually impaired person is having their computer "read" the web page to them. So this is important for accessibility.
  • Add meaningful "title" text to the image
    Search engines crawl this text as well. No hyphens are necessary to separate words in the "alt" text area. This text often shows up when someone's cursor "hovers" over the image.
  • Images should be in a folder named "images"
    The FSO Editorial Staff has tried to make sure your User Folder on our site has an "images" folder. Please let us know if this is not the case.

Fill out "Image description" (also referred to as the "alt attribute" or "ALT"). Best practice would be to make image description a readable sentence or short paragraph.

Fill out "Title." Title should be a short, readable, descriptive "label" for the image.

Image description and Title can use the same text. Completing both will help your image appear in search engine results.

image description

Format an Image

In the "Insert/edit image" window, select the "Appearance" tab.

image alignment

Alignment

The first field within the Appearance Tab is "Alignment." Note: The default or "Not set" setting centers the image horizontally. The "Left" and "Right" alignments allow the text to flow around the image; all other settings will only place a single line of text next to the image.

As you try different alignment options, you can observe the typical effect in the Lorem ipsum demonstration block.

Dimensions

This option tells the browser at what size it needs to display the graphic. These dimensions should always be specified; handily, the Insert/edit image plugin automatically enters the graphic's actual dimensions for you.

image dimensions

You can change the display dimensions here so the graphic displays at a smaller or larger size than the actual graphic itself, but this may lead to browser inefficiencies or poor image quality. For this reason, we recommend that you make sure your images themselves are already the correct size before you upload them (for optimal use by many of our visitors' browsers, a width of 420px is ideal). If you do decide to change the display dimensions, clicking the "Constrain proportions" box will make sure your graphic's height and width ratios remain constant so your graphic won't look "stretched" or "compressed."

Vertical Space, Horizontal Space, & Border

 image space

The "Vertical space," "Horizontal space," and "Border" under the Appearance tab allow you to add some "buffer space" or a border around your graphic. You can preview the effects of your changes in the "Lorem ipsum" demonstration block.

Note: If you are planning on adding a hyperlink to the image (done separately with hyperlink button), many browsers will show the image with a border to indicate the link. If you don't want this border then you should place a 0 in "Border."

Other Formatting Options and Notes
  • Our contributors will not be using the "Class" dropdown for their images.
  • The "Style" text entry line should only be used by contributors who are proficient in HTML. As you change the graphic's Appearance, the Insert/edit image plugin will automatically fill this text entry area with the appropriate HTML code. Making changes to the text in this box will alter the image's appearance on browser windows.
  • Contributors who are interested in "rollover" graphics may use the "Advanced" tab.
  • You can also use tables <hyperlink to tables section> to format graphics and text.

Tables

insert table button

The options for inserting a Table in TinyMCE are fairly similar to options available in most word processing programs.

insert table

However, a few notes:

  • Selecting "Not set" for the table alignment will result in space above and below the table; other selections will lead to text "wrapping" around the table.
  • Do not use the table's own parameters to specify aspects such as backgrounds, since they are interpreted differently in different browsers.
  • Ensure that the pictures and other embedded media objects inserted in the table all have their sizes specified. This will help web browsers load the table properly and efficiently.
  • If at all possible, avoid "tables within tables" structures, as they don't always read well in different browsers.
  • If you're positioning a table of small images, for example, you'll likely want to use a table without borders or lines in order to more precisely position the images.

Adding & Changing Hyperlinks

link button

Select the text or graphic to which you would like to add a hyperlink, then click on the "Insert/edit link" button (see above picture of a chain link). Please note: You must select something—text or graphic—before the Link button will become operational. The "Insert/edit link" window will pop up.

 insert url steps

In the Link URL you need to place the full URL (Universal Resource Locator), which typically starts with http:// (i.e. http://www.google.com *not* www.google.com).

Typically your "Target" should be "Open link in a new window."

Most of the time you will only need to fill in the Link URL and the Target, but placing a single sentence in the "Title" field is useful for adding keywords for search engines. In some browsers the Title will show as a "hover description" when the viewer's mouse moves over the link.

A Tip for Optimizing Your Hyperlink for Search Engines

  • Avoid using "click here" as it is bad for usability, reading flow, and search engines. A link (i.e. link text) such as "more alternative energy resources" is full of nice and rich context for search engines.

Adding Anchors

Sometimes you may want to be able to help your reader quickly navigate around your contribution, especially if it's lengthy. You can do this by creating "anchors," or links to a location within the same web page (e.g. links to "Top of Page").

First, select the position within the document to which you'd like your readers to be able to easily navigate, and click the "Insert/edit anchor."

target

Second, name the anchor. Do not use spaces or punctuation as part of the anchor name. You'll want to keep the anchor name short and sweet (less than 10 characters is a good rule of thumb) and easy to remember. Note: If you add multiple anchors to a contribution, they each need to have unique names.

anchor blank

Third, select the text you'd like to hyperlink to the anchor. To hyperlink to the anchor location, use the "Insert/edit link button" and enter #anchorname as the URL.

So for example, if I had created an anchor by the text "Sometimes you may want to be able…" at the beginning of this section, and called that anchor "anchorhelp", I would enter "#anchorhelp" in the "Insert/edit link."

Footnotes as referenced in Word documents.

Finally, creating anchors is also useful for articles that have several chronological footnotes referenced in the original document. The process is similar to the steps above. You would hyperlink the number that specifies that it's a footnote (i.e. Murphy's Law is a witticism which states that 'anything that can possibly go wrong will go wrong'.(1)) So select the number 1 and use the Insert/edit link button. There you enter #1 as the URL. Next step would be to find the footnote at the bottom of the story and select the number "1" referenced there and click the Anchor button and type in "1". From there you can continue to insert as many as footnotes as referenced in story.

Insert Other File Types: PDFs, videos, etc.

file attach button

file attachment

file attach

To insert a PDF, you can use the File Attachment section below the main editor. You may have to click the left arrow to drop down the section to upload your file. First, select Choose File (Step 1) to browse for your attachment. Once you select the file (Step 2) you want to upload and then click Open (Step 3) to complete the file upload. From there you want to Attach (Step 4) the file to the article. Changes made to the attachments are not permanent until you save this post. The first "listed" file will be included in RSS feeds. Also, be aware that maximum upload size is 1 MB. Only files with the following extensions may be uploaded: jpg jpeg gif png txt doc xls pdf ppt pps odt ods odp.

Quantcast