Using TinyMCE

TinyMCE is a JavaScript application that allows you to edit the content of your pages similarly to using a word processor. It works behind the scenes to drop the HTML code in so you don't have to. Here's a run down of all the buttons on the editor:

TinyMCE: tinymce.png

Top Row

  • The first group of buttons are for making text bold, italic, underlined, struck through, etc. You can also change the text color or highlighting.
  • The second group of buttons allow you to set paragraph alignment.
  • The popup menus allow you to set the text format (paragraph, heading level, preformatting, etc.), font, and text size. You need to be careful when setting the font as not every computer has the same set of fonts loaded. Many fancy fonts will not display properly on other computers.

Middle Row

  • The first set of buttons are for inserting images, links, anchors, horizontal rules, and special symbols.
  • The second set of buttons provide tools for creating unordered and ordered lists as well as increasing or decreasing the indent level of a paragraph.
  • The next two buttons allow you to create superscripts and subscripts (e.g. 32 or H2O).
  • The last two buttons allow you to define the writing direction of a paragraph.

Bottom Row

  • The first five groups of buttons here provide tools for editing tables. These functions include splitting and merging cells, inserting and deleting rows and columns, etc.
  • The sixth group of button are for cleaning up text formatting or working in full screen mode. It is recommended that you use the eraser and whisk broom to clean up text you paste in from a word processor.
  • The last set of buttons give you search and replace functions as well as undo and redo.

Link Editor

The link editor allows you to link to an external site or to one of your own pages or files. If you are linking to an external site it is recommended that you include the full URL (e.g. http://www.rcstn.net). Use the link list popup menu to select a section or file on your site.

TinyMCE: link-editor.png

Image Editor

The image editor allows you to edit the properties of an image you upload to SiteMaker. You need to select an image from the image list popup menu (General tab) to get started. Keep in mind that changing the dimensions of the image (Appearance tab) is NOT the same as resizing the image before uploading it. This simply changes the size it will be displayed on the browser window.

TinyMCE: image-general.png

TinyMCE: image-appearance.png

TinyMCE: image-advanced.png

Table Editor

The table editor allows you to edit the attributes of a table.

TinyMCE: table-general.png

TinyMCE: table-advanced.png