The body editor allows you to add and edit text, photos, videos, links, and more to any pages, news releases, articles and most other content types that are created on the site. Many of the body editor's features are similar to word processing programs, such as Microsoft Word.

Body Editor

This list covers some of the more complex button options.

Paste as Plain Text

Paste as Plain Text allows you to paste text without additional formatting. You will always want to use this when pasting text onto your page, as it will ensure that the formatting of your page is always consistent with the rest of the site.

Check Spelling

Check Spelling checks the spelling of the text in the editor. The spell check option is presently disabled because of a bug; however, you can download a plug-in for Mozilla Firefox that checks the spelling of anything you type in the page

Upload an Image

The website makes adding images to a page very similar to adding a link to a document on a page. Please make sure the image you plan to use is already edited to the correct size and specifications before uploading it to the website.

Image Properties Box

  1. Place the cursor where you want the image to be added.
  2. Click the “Image” button. The button is above the section where you are writing text and looks like a picture of a little house in the sun.
  3. The Image Properties dialogue box will pop up. Click “Browse Server.”
  4. The file finder that houses the website’s images will pop up. Select your department’s folder or subfolder you want the document to be in. You can create a new subfolder by right-clicking a folder. You can view a folder’s sub-folders by clicking on the ‘+’ next to the folder name. Make sure that the correct folder is highlighted before continuing to the next step.
  5. Click “Upload.”
  6. Browse to the image you want, and then double-click it.
  7. Once it loads into the system, double-click the image again.
  8. The image will be placed in the Image Properties dialogue box.
  9. Enter in the alternative text for the image. Learn more about why this is important.
  10. The width and height allow you to change the size of the image without stretching the image. Although, it's best to have your image sized before adding it to the file finder.
  11. The border, horizontal space (HSpace) and vertical space (Vspace) allow you to add a border, horizontal space for padding or vertical space for padding to the image.
  12. Selecting an alignment (right or left) will place the image on the right or left side of the page, allowing text to wrap around it. 10 is a good standard for HSpace. This keeps text from bumping up against images.
  13. Select “OK” to place the image on the page.

Insert a Table

If you want to add a table to your page, follow these steps:

  1. Within the body editor, click on the Table button.
  2. The Table Properties dialogue box will pop up. Put the number of rows and columns that should be included in the table.
  3. In the Headers field, specify whether the first row, the first column or both the first row and first column should be the table header.
  4. You can also set the alignment, cell spacing and cell padding fields if you want. A good rule of thumb is to have a cell padding of about 4. Dimensions are in pixels.
  5. Add a table caption or summary, if you want.
  6. Once you have the fields completed, click OK.
  7. Your table will be added, and you can start entering items into it.

The formatting looks much better than the formatting that appears in the CK Editor while editing the page.

Add Header Formatting

Remember that headers are more than just about how your page looks. They have a direct impact on how easy - or difficult - a page is to be read by those using screen readers. Therefore, headings directly impact whether or not your page is American with Disabilities Act compliant and accessible.

Those using screen readers can scan through your page's headers to find the section they need. For this reason, it's important to use the correct heading types. For our site, Heading 2 is used as the page title, so you should use Heading 3 for any headings on your page and Heading 4 for any subheads. Don't use just bolded text as a header on your page - screen readers won't recognize this as a header.

The use of headers also increases your page's readability. If someone can quickly scan through the headers to find the section they need, they're much more likely to stay on your page than if there's just a giant block of text on your page. Remember - in the end, it's about making your page consistent with the rest of the website. Using properly structured content will ensure that more people read your page than using content that may be "unique" but difficult to read. Less is always more.

To add the header, highlight the words you want to and a header to with your cursor, then select your heading from the "Format" dropdown in the body editor.

Heading 1 - Large, not suitable for regular page use

Heading 2 - Used for page titles only

Heading 3 - Most often used for headings within pages

Heading 4 - Most often used as sub-headings within pages

Heading 5
Heading 6

Normal

Link

Add a Hyperlink - Includes Relative Links

The link button within the body editor allows you to create links to different types of resources. When you click the link button, a dialogue box will pop up with several options for you to create the link.  When a user clicks on the link you create, they are taken to this resource. Links automatically match the website’s formatting.

Link properties box with an example of linking to an outside websiteCreating a Link to an Outside Website

If you are creating a link to an outside website, follow these steps:

  1. Highlight the text you want to link.
  2. Click the Link button.
  3. Type or copy the entire URL in the URL field.
  4. The site will automatically format it to take out the “http://” from the link, leaving everything including and after the “www.”
  5. If you want the link to open in a new window, select the Target tab, and then choose “New Window” from the drop-down menu.
  6. Once you have the link set up, click OK.

See rules for linking to external sites.

 

 

Link box showing example of linking to an internal webpage

Creating a Link to a Page Within the City of Austin’s Website (Using Relative Links)

If you want to create a link to another page within the City’s website, follow these steps:

  1. Highlight the text you want to link.
  2. Click the Link button.
  3. Find the page URL to which you want to link. For this example, we will use “http://www.austintexas.gov/example-internal-webpage”
  4. Type or copy everything in the URL field to which you want to link AFTER the “.gov.” For the example above, you would enter “/example-internal-webpage” into the field. Make sure to include the first slash after the “.gov.” This is called a relative link. ALSO please note the "Important Note" about relative links below. 
  5. If entered correctly, the Protocol field in front of the URL you entered will change to “Other.”
  6. Once you have the link set up, click OK.
  7. After you publish your content, TEST your published link to make sure it's working correctly. (If not, please see the "Important Note" below about relative links.)

Link to internal page within a fieldImportant Note about Relative Links: Creating a link to an internal page differs when there is a field that specifically asks for a link. This is not in the body editor, so you should not include the first slash that comes after the ".gov."

This means that for the example above, you would enter only "example-department" in the field at right. The easiest way to remember the difference is if you are in the body editor and have to click the link button to make the extra box appear, use the extra slash. For all other times, do not use the slash.

Link box with an example of linking to an email address

Creating a Link to an Email Address

There are two different types of email addresses – City of Austin email addresses, and non-City email addresses. City email addresses are set up in such a way as to prevent spam sites from getting our City email addresses. Steps to create both types are listed:

  1. Highlight the text you want to link.
  2. Click the Link button.
  3. City of Austin email addresses:
    1. Type “/email/emailalias” in the URL field, where URL alias is the Outlook alias for the email address. For john.smith@austintexas.gov, the you would place “/email/johnsmith” in the URL box. Notice that the period between names is not used.
    2. If you have a vanity email address (department@austintexas.gov), these work as well; however, you will need to contact the City’s web team to make these types of email addresses work correctly initially. After the address has been set up, it will work correctly in all other uses.
  4. Non-City of Austin email addresses:
    1. Click the drop-down menu under “Link Type” and select E-mail.
    2. Enter the Email address in the E-Mail Address field. You may also enter in a message subject and/or message body, if you choose.
  5. Click “OK.”

 

As with links to internal web pages, links to City of Austin emails differ when an email field is listed, like at right. In this case, you do not need to include the "/email/" part of the link. Simply put the email alias (without periods) in the field. Continuing the example above, you would type "johnsmith" in the field to create an email form for that email address.

Creating a Link to a Document

If you want to create a link to a document, you will have to upload the document first. It’s a good rule of thumb to make sure you are working on the draft.austintexas.gov site (as opposed to just austintexas.gov) before starting, as the document uploader won’t work otherwise. The steps are outlined below.

  1. Highlight the text you want to link.
  2. Click the link button.
  3. Click “Browse Server.”
  4. The file finder will pop up. Select your department’s folder or subfolder you want the document to be in. You can create a new subfolder by right-clicking a folder. You can view a folder’s sub-folders by clicking on the ‘+’ next to the folder name. Make sure that the correct folder is highlighted before continuing to the next step.
  5. Click “Upload.”
  6. Browse to the document you want, and then double-click it.
  7. Once it loads into the system, double-click the document again.
  8. What appears in the link box is the link to the document. Click “OK” to confirm the link.

The file finder will not accept files larger than 2 MB in size. If it is necessary to upload a larger document, talk your department's content manager about the steps for uploading the document to the website.

Additional Notes

  • URLs can never have spaces in them, so you should use an underscore or hyphen character instead.
  • By convention, URLs are typically all lowercase.
  • Files can have a space in them, which will be converted by body editor to the HTML character %20. This makes links look funny, so if you are uploading a file, the better method is to replace any spaces with hyphens before uploading the file.
  • When linking to another city webpage, there are times when you will not include the "/" after the ".gov" of the URL, as detailed above.
    • When linking to a city webpage in the body editor, you have to click the Link button, and an extra box will appear; this is the box where you type in the link (including the "/"). This is the process explained above.
    • Other times, like when creating a promo, you won't have to click the link button - a box will already be present where you'll provide the link (not including the "/").
    • Therefore, the easiest way to remember whether or not to use the "/" is: "Extra box, extra slash."

Add a Video/Data Portal Embed

For department pages, add videos to your Features section. Scroll down to that section and select “Department_features video” from the drop-down menu. Then, add the video's embed code into the Embedded Feature field. The video must be a YouTube video.Y

For extra pages, use the Embed Media button. It looks like a little film strip with a green plus over it. Add the embed code from the YouTube video or the Data Portal dataset. Do not add any other embed codes into this field as they could pose a serious security risk. Contact the Help Desk for approval for any non-approved, third-party embeds.