How to Update Content Pages

TinyMCE is the editor you use to write and format content on your Firehouse Solutions website. It works much like Microsoft Word or Google Docs, within your website's administration area. Look for the formatting toolbar and white editing box. This manual covers TinyMCE version 8.8.2; the buttons available on your website depend on its configuration.

This Firehouse Solutions manual is for customers who maintain their organization's website content. It explains how to format text, add links and images, work with tables, and prepare changes for publication. No coding experience is required. The optional Source Code section explains the advanced HTML view and how to exit it safely if it is unfamiliar.

Start with Sections 1 and 2 to become familiar with the editor, then use the section that matches your task. Before leaving an editing page, save your changes using your website's Save, Publish, or Update control. Section 8 explains why this step matters.

2. Understanding the Editor Screen

When you open a page for editing in your Firehouse Solutions website administration area, the editor has four main parts, stacked from top to bottom:

A note on the toolbar vs. the menu bar: everything on the toolbar can also be found somewhere in the menu bar — the toolbar is just a shortcut. If you ever lose track of a button, check the matching menu (Format, Insert, Table) and you'll find it there too.

Some sites hide the menu bar and only show the toolbar. If you don't see a menu bar, don't worry — every feature in this manual is also reachable from the toolbar.

3. Formatting Text

To format text, select it first (click and drag over it, or double-click a word), then click a toolbar button. The format applies only to what you selected.

Basic styles

Headings and paragraph style

Near the left end of the toolbar is a dropdown that usually says Paragraph. Click it to choose:

• Heading 1 – the biggest heading, used once per page for the main title
• Heading 2, 3, 4... – smaller subheadings, used to break a page into sections
• Paragraph – normal body text

Using real headings (instead of just making text bold and bigger) matters: it keeps your page organized for readers and helps search engines and screen readers understand its structure.

Font and size

If your website enables them, you will also see dropdowns for Font (typeface) and Size. Use the options available on your Firehouse Solutions website to keep pages consistent with its design. If those dropdowns are not shown, use the supplied paragraph and heading styles.

Clearing formatting

If text looks wrong and you can't figure out why (often from pasting), select it and click the Clear formatting button (icon looks like a small eraser or "Tx"). It strips all styling back to plain text so you can start over.

4. Paragraphs, Lists, and Alignment

Alignment

Four buttons (usually showing lines of text aligned left/center/right/justified) control where text sits:

• Align left – the default for most body text
• Align center – good for titles or short callouts
• Align right – rarely used for body text
• Justify – stretches text so both edges are flush (common in newspapers, less common on the web)

Lists

• Bulleted list (icon with dots) – for items with no particular order
• Numbered list (icon with 1, 2, 3) – for sequential steps or ranked items

Click the button, then start typing — press Enter for a new item, and press Enter twice (or click the list button again) to exit the list.

Indenting

The Increase indent and Decrease indent buttons nest a list item deeper (sub-bullets) or pull it back out. You can also press Tab at the start of a list line to indent, and Shift+Tab to outdent.

Block quotes

If your toolbar includes a quotation-mark icon, it formats a paragraph as a block quote — visually set apart, typically used to highlight a quoted statement.

5. Adding Links

1. Select the text you want to turn into a link.
2. Click the Link button (looks like a chain link) in the toolbar.
3. In the box that appears, paste or type the web address (e.g., https://example.com).
4. Give it a Title if prompted — this is optional text that appears as a tooltip when someone hovers over the link.
5. Under Open link in..., choose:

• Current window – the link replaces your page (best for links to other pages on your own site)
• New window – opens in a new tab (better for links that send visitors away from your site)
  6. Click Save or Insert.

Linking an email address

Type mailto: immediately before the address, with no space — for example mailto:[email protected]. This makes the link open the visitor's email program instead of a webpage.

Editing or removing a link

Click anywhere inside existing linked text. A small toolbar will pop up above it with a pencil icon (edit the link) and a broken-chain icon (remove the link, keeping the text).

6. Adding Images

1. Click where in your text you want the image to appear.
2. Click the Image button (a small picture icon) in the toolbar, or go to Insert → Image.
3. A dialog box opens with two ways to add an image:

• Upload: click the upload area and choose a file from your computer.
• Source: paste a web address pointing directly to an image file (ends in .jpg, .png, .gif, etc.), if the image is already hosted online.
  4. Fill in Alternative description (often called "alt text"). Write one honest sentence describing the image (e.g., "Golden retriever puppy sitting in grass"). This matters for two reasons: visitors using screen readers hear it instead of seeing the image, and it shows if the image fails to load.
  5. Click Save or Insert.

Resizing and aligning an image

Click the image once to select it. Small square handles appear at its corners — drag a corner handle to resize it (dragging a corner, not an edge, keeps its proportions). A small toolbar also appears above or below the image with alignment options (left, center, right) that control how text wraps around it.

A caution on image size

A photo straight from a phone or camera can be several megabytes, which slows your page down for visitors. Where possible, use images that are already resized to roughly the dimensions they'll display at (a few hundred pixels wide is enough for most inline images) before uploading.

7. Adding and Editing Tables

1. Click the Table button in the toolbar (a small grid icon), or use the Table menu.
2. Hover over the grid that appears and click to pick how many rows and columns you want (e.g., 3x2). A blank table appears in your content.
3. Click inside any cell and type — press Tab to jump to the next cell, or Shift+Tab to go back.

Adding or removing rows and columns

Click inside a cell in the row or column you want to change, then open the Table menu in the menu bar (or right-click the table). You'll find:

• Insert row before / Insert row after
• Insert column before / Insert column after
• Delete row
• Delete column

Formatting a table

The Table menu also offers Table properties (overall width, borders, spacing) and Cell properties (background color, text alignment within a cell, borders for that one cell). Most sites apply their own table styling automatically, so you may not need to touch these often.

8. Undo, Redo, and Saving Your Work

Undo and redo

Two curved-arrow buttons sit at the far left of the toolbar:

• Undo (arrow curving left) – reverses your last change. You can click it repeatedly to step back through several changes.
• Redo (arrow curving right) – brings back a change you just undid.

Keyboard shortcuts work too: Ctrl+Z (Undo) and Ctrl+Y or Ctrl+Shift+Z (Redo) on Windows; Cmd+Z and Cmd+Shift+Z on a Mac.

Saving your work

TinyMCE itself does not save your page. It holds your content while you are editing. On your Firehouse Solutions website, save changes using the website's Save, Publish, or Update control outside the editor box, often above or below it. The exact label and behavior depend on your website's configuration.

Because of this:

• Always look for that Save/Publish button and click it before navigating away or closing your browser tab.
• If your site has a Preview option, use it before publishing to see how the page will really look.
• If you are unsure whether a button saves a draft or publishes changes publicly, check with your website administrator or Firehouse Solutions before using it.

9. The Menu Bar, Explained

If your Firehouse Solutions website shows the menu bar, use this table to locate commands. Available menu entries depend on your website's configuration:

If you can't find a button on the toolbar, this is the first place to look — almost every toolbar feature has a matching menu entry, often with more options than the toolbar button alone shows.

10. Viewing the Source Code (Advanced — Optional)

Under the hood, everything you type is stored as HTML, the code language of web pages. TinyMCE's Source Code tool (found under Tools, or as a </> icon on the toolbar) lets you see and edit that raw code directly.

You will likely never need this. It exists for people comfortable with HTML who want precise control the visual editor doesn't offer. It's mentioned here only so that if you ever click it by accident, you understand what you're looking at — and know to click Cancel rather than Save if the code looks unfamiliar.

One genuinely useful case for beginners: if you paste text from Word or a PDF and the formatting looks broken in strange ways, opening Source Code and looking for a wall of messy, repeated code confirms that's the cause. In that situation, it's usually safer to undo, paste as plain text instead (see Troubleshooting, below), and reformat using the toolbar.

11. Keyboard Shortcuts Reference

Tip: "Paste as plain text" is one of the most useful shortcuts for beginners — it strips out all formatting from whatever you copied (a Word document, a webpage, an email), so it won't bring in stray fonts, colors, or sizes.

12. Troubleshooting Common Problems

13. Quick Glossary