Using the Blog Entry Editor

When you create a new blog entry, you create its content with the blog entry editor. This editor is simple yet powerful. Its editing tools are context-aware, only appearing when you need them. They aren’t visible while you’re writing, which lets you focus on the task at hand. But when you select text, for example, a toolbar appears that contains buttons for styling the text. There are similar contextual options for adding and editing images, tables, and other types of content. And this is all in the editor’s text view. You can switch to code view to edit the content’s HTML. Regardless of which view you use, your entry is automatically saved as a draft every 25 seconds, so a browser crash or network interruption won’t cause you to lose your work.

This guide shows you how to use this editor to create and edit blog entries.

Figure 1: This screenshot shows some of the blog entry editors controls.

Figure 1: This screenshot shows some of the blog entry editor's controls.

Using the Editor’s Text View

When you create or edit a blog entry, the editor is in text view by default. Text view is a WYSIWYG editor that lets you enter and edit text and other types of content. To enter text, place your cursor in any text field (e.g., Title, Subtitle, Content, etc.) and type or paste your text. Note that the Content area expands to fit its contents.

To style or format text in the Content area, first select the text. A toolbar appears above the text that contains the following options, as shown in the above screenshot:

Text Style: This selector menu, set to Normal by default, lets you choose the text’s style. Normal is typical body text, but you can also select from different heading styles, alert or error message styles, code style, and more.

Typeface: Select bold, italic, or underline.

List Style: Select a numbered or bulleted list.

Link: Link the selected text to a specific URL, or to an item in the portal (e.g. a file in Documents and Media).

Twitter: Generates a link to tweet the selected text.

When you park your cursor in the entry’s content area, the Add icon (+) appears. If you click this icon, it shows controls for inserting an image, video, table, or horizontal line (Controls). Follow these instructions to insert each:

Image: Click the mountain icon, then select or upload an image in the image file selector screen that appears. Alternatively, you can drag-and-drop image files into the content area. You can also use the built-in Image Editor to apply simple edits to an image. Any edits you make are automatically applied to a copy of the image. After you add an image to the blog entry, clicking the image brings up controls for justifying it to the right or left side of the article.

Video: Click the play icon and insert the video’s link. The video then appears in your content.

Table: Click the table (grid) icon and then choose the number of rows and columns in your table. When you click inside the table, table editing controls appear. They let you designate the first row and/or column as table headers. The controls also enable you to add rows, columns, and cells. As you type in a cell, the column width automatically adjusts to fit the content.

Line: Click the line icon. A simple, lightweight horizontal line then appears in your content. Such lines are good for separating sections of content in a large blog entry.

Using the Editor’s Code View

To switch to code view, click the the Source icon (</>) that appears when you place your cursor in the Content area. The following buttons exist at the top-right of code view:

Text View (Text): Switch back to text view.

Dark/Light Theme (Dark Theme / Light Theme): Switch the code editor between dark and light theme.

Fullscreen (Fullscreen): Work in a dual-pane view that shows your HTML code on the left and a preview pane on the right. In this view, you can arrange the HTML and preview panes horizontally or vertically. You can also hide the preview pane so the HTML editor takes up the entire window space.

Figure 2: Editing in code view lets you work with your blog entrys underlying HTML.

Figure 2: Editing in code view lets you work with your blog entry's underlying HTML.

« Adding Blog EntriesManaging Blog Entries »