Using The Content Widget

The First-Time Users documentation covered basic usage of the Content widget. This documentation will teach you how to leverage each feature of the Content widget as you create great content for the web.

Tabs

The Content widget uses a tabbed editor. Each tab has one self-contained chunk of content typically named after the name given to the Content widget when it was created. People viewing the page will never see the names of the tabs unless you take a screenshot and post it somewhere.

The Content widget supports multiple tabs.
The Content widget supports multiple tabs.

One important aspect of the tabbed interface is that it tracks whether or not content has been saved. At a glance, you can see if content has been saved or not. If content in the Content Editor has changed, the Content widget will ask if it is okay to close the tab, leave the page, or close the web browser when any of these events take place.

To close a tab, click the little red 'X' on the tab. When the last tab is closed, the editor disappears until it is needed again.

One final feature, that isn't terribly useful in practice, is the ability to reorder tabs. When two or more tabs are open, click the tab and drag it around to change the order. During this process, the red 'X' disappears due to weird UI bugs in various browsers. It reappears when the drag-and-drop operation is complete.

Shortcodes may also use the Content Editor that the Content widget uses to display and edit content.

Toolbar Icons

The toolbar icons offer convenient, basic visual editor functionality that do not fit into the Container or Class paradigms. The toolbar contains mostly inline elements, things that affect the overall content in the editor, and functionality that requires a dialog.

The default toolbar icons with some extra Shortcodes.
The default toolbar icons with some extra Shortcodes.

What follows is a breakdown of each icon in the order seen above. While the underlying WYMEditor supports more options than these, the "missing" features are very buggy. Also note that keyboard shortcuts listed are those for using the Content Editor under Windows and Firefox.

Save

Keyboard shortcut: None.

This is the save button. It only appears in the tabbed editor version of the Content Editor. It is designed to be connected to an AJAX callback to save the content in the editor itself.

Bold

Keyboard shortcut: Ctrl + B

Example output: This text is bold.

This modifies selected text in the editor and sets/removes a bold style.

Web designers: The editor outputs the 'strong' tag instead of the 'b' tag.

Italic

Keyboard shortcut: Ctrl + I

Example output: This text is italic.

This modifies selected text in the editor and sets/removes an italic style.

Web designers: The editor outputs the 'em' (emphasis) tag instead of the 'i' tag.

Superscript

Keyboard shortcut: None.

Example output: This text is superscript.

This modifies selected text in the editor and sets/removes a superscript style.

Web designers: The editor outputs a 'sup' tag.

Subscript

Keyboard shortcut: None.

Example output: This text is subscript.

This modifies selected text in the editor and sets/removes a subscript style.

Web designers: The editor outputs a 'sub' tag.

Paste From Word

Keyboard shortcut: None.

This opens a dialog to copy and paste content from Microsoft Word into. This helps to bring completely clean content into the editor from Word.

Undo

Keyboard shortcut: Ctrl + Z

This attempts to undo the last operation. This feature is a bit buggy when it comes to undoing container-level modifications and may not function as expected.

Redo

Keyboard shortcut: Ctrl + Y

This attempts to redo an operation performed by Undo. Like Undo, this feature is buggy and may not function as expected.

Link

Keyboard shortcut: None.

Example output: This is a hyperlink

This modifies selected text in the editor to be a hyperlink to another page. A dialog appears that accepts a URL. It is not terribly advanced but it works.

One issue is the inability to set a target window. While the 'target' attribute is technically "deprecated" by the XHTML Standard, it is supported by every web browser and is rather useful.

Web designers: The editor outputs an 'a' tag.

Unlink

Keyboard shortcut: None.

This modifies selected text in the editor to remove part or all of a hyperlink. This is useful in some cases where typing expands a hyperlink. This is one more reason to begin the next paragraph before enhancing/changing content on the previous paragraph.

Ordered List

Keyboard shortcut: None.

Example output:

  1. An item.
  2. Another item.
    1. A subitem.
    2. Another subitem.
  3. And one last item.

This changes a paragraph into an ordered list of items. Clicking the button on a line inside an ordered list changes the line back into a paragraph.

Web designers: The editor outputs an 'ol' tag set with one or more 'li' tags inside. Each 'li' tag can contain a limited number of additional tags.

Unordered List

Keyboard shortcut: None.

Example output:

This changes a paragraph into an unordered list of items. Clicking the button on a line inside an unordered list changes the line back into a paragraph.

The difference between this and the ordered list is what appears before each item - symbols vs. numbers.

Web designers: The editor outputs an 'ul' tag set with one or more 'li' tags inside. Each 'li' tag can contain a limited number of additional tags.

Indent/Outdent

Keyboard shortcut: None.

This adds or removes an indentation in an ordered/unordered list.

Web designers: The editor creates a new 'ol'/'ul' tag set in the previous 'li' tag.

Shortcodes

The last thing that appears on the toolbar are Shortcodes. Shortcodes offer powerful, self-contained functionality such as inserting images, video, etc. consistently into the content. They only appear on the toolbar if you have permission to use and edit such content.

See the section entitled "Using Shortcodes" in the First-Time Users documentation to learn more about how to use them. Visit the Download page to find new Shortcodes. Note that someone with FTP access - typically a programmer - will need to upload new Shortcodes and change the security settings for your Barebones CMS installation before it will appear in the toolbar.

If a desired Shortcode does not exist, a programmer will have to Create a New Shortcode.

Containers

Basic containers.
Basic containers.

The Containers box off to the right of the main editor area allows for block-level transformations. The most stable container is the 'Paragraph' and also happens to be the default container. Changing a container before editing a line or beginning the next line is slightly buggy - strange whitespace issues tend to occur. It is recommended that content authors begin the next paragraph before moving the cursor back and changing the container type.

Here is the breakdown of each container and the HTML tag it outputs:

Web designers will need to style each tag so it appears correctly in the content that is output.

Containers do not have keyboard shortcuts.

Classes

Basic classes.
Basic classes.

The Classes box off to the right of the main editor area allows for class-level transformations. The classes are mostly used to modify the stable 'Paragraph' container and adds a 'class' attribute to the 'p' tag. It is important to note that some classes are special and that what appears in the editor may not be what is actually output. After all, the editor is intended to be a "What You Mean" editor. What gets displayed to the user can be different than what is displayed in the editor. However, each class attempts to output something visually in the editor to make it apparent that a class was successfully applied to the container.

Note that some classes can modify other container types as well. Web designers should keep this in mind as they style each class in their layouts.

Occasionally, a class will need to be added for some special styling in the final output. A web designer can add additional classes that modifies certain containers. See the Content Widget documentation for more details.

Classes do not have keyboard shortcuts.

What follows is a breakdown of each class, what appears in the editor, and what is actually output to the user.

Left/Center/Right/Justify-Align

Editor display:

Alignment classes.
Alignment classes.

The 'Left-Align', 'Center-Align', 'Right-Align', and 'Justify-Align' classes can be applied to the 'Paragraph', 'Heading 1-6', and 'Preformatted' containers. Only one of these classes can be applied at a time.

Web designers: The output class names for supported containers are '.left-align', '.center-align', '.right-align', and '.justify-align'.

Wrap Shortcode

Editor display:

Wrap Shortcode class.
Wrap Shortcode class.

The 'Wrap Shortcode' class can only be applied to 'Paragraph' containers that contain a Shortcode placeholder icon. Every Shortcode should have this class applied to its surrounding paragraph so that web designers can correctly style the content on the page. Failure to do this will likely result in content being displayed incorrectly - usually just padding, margins, and general whitespace issues but can result in content that displays without any styles at all.

Web designers: The output class name is 'div.wrap-shortcode'. This is a transformation class that replaces the 'p' tag around the Shortcode with a 'div'.

Wrap Start/Wrap End

Editor display:

Wrap Start and Wrap End classes.
Wrap Start and Wrap End classes.

The 'Wrap Start' and 'Wrap End' classes can only be applied to 'Paragraph' containers. Only one of these classes can be applied at a time.

These classes allow paragraphs and other content to be wrapped in what is known as a 'div'. Content editors should ignore these classes unless told by a web designer to use them and get trained in their use. These classes are typically used in conjunction with another class that a web designer creates to apply specific styles to the content contained within the 'div'.

'Wrap Start' opens a 'div' tag while 'Wrap End' closes a 'div' tag. In the paragraph container with the 'Wrap End' class applied, any content contained within will be inside a paragraph. The containers with these classes applied do not require any content contained within.

Web designers: The output is a 'div' wrapped 'p' tag. Content in the 'p' tag portion is optional and will not be output if there is no content. This is useful if you create a custom class that needs to be applied to more than a single container element. These classes allow for as many 'div's deep that you need.

Note that the Content widget will automatically terminate 'Wrap Start' 'div's that are not closed properly. This "feature" could be problematic for content that needs to terminate early for whatever reason.

Float Left/Float Right/Clear Floats

Editor display:

Float classes.
Float classes.

The 'Float Left', 'Float Right' classes can only be applied to the 'Paragraph' container. The 'Clear Floats' class can be applied to the 'Paragraph', 'Heading 1-6', and 'Preformatted' containers. Only one of these classes can be applied at a time.

The concept of "floating content" is difficult to understand. The most common illustration is an image that appears to the right of some content. The content that follows then wraps around the image to the left. This is known as floating an image to the right. This page has a couple examples of floating images to the right of other content.

When using 'Float Left' and 'Float Right', the floated content must appear first before the content that will wrap around it. This is not intuitive but it is fairly easy to get the hang of.

Whenever floats are used, the next unrelated container of content should have the 'Clear Floats' class applied to it. This forces that content to appear below all floated content that came before.

Web designers: The output class names for supported containers are '.float-left', '.float-right', and '.float-clear'.

First Line

Editor display:

First Line class.
First Line class.

The 'First Line' class can only be applied to the 'Paragraph' container. It is used to indicate that the specific container is the start of some new section of content. Web designers can use this class to apply different padding, margins, and other styles to elements with this class.

While it can be hard to notice, the main editor shows a little extra space above the container that this class is applied to.

Web designers: The output class name is '.first-line'. Note that you may have to be very specific in CSS when overriding styles to get this class to do exactly what you want.

Tables

Editor display:

Table classes.
Table classes.

The 'New Table Row', 'New Table Cell', and 'Table End' classes can only be applied to the 'Paragraph' container. Only one of these classes can be applied at a time.

The 'Vertical-Align Top' and 'Vertical-Align Bottom' classes can only be applied to 'Paragraph' containers with 'New Table Row' or 'New Table Cell' applied. Only one of these classes can be applied at a time.

Occasionally, tabular data needs to be presented. These classes offer a way to transform paragraphs into tables using the "What You Mean" approach.

Creating a table is easy. First, enter your data. Then, go back and apply 'New Table Cell' to a paragraph container. The paragraph can be empty. Repeat this for every cell except for the first cell of each new row. For those cells, use the 'New Table Row' class.

For cells where the content may wrap, apply the 'Vertical-Align Top' and 'Vertical-Align Bottom' classes to the relevant paragraph containers. This applies a class that can be used to make the content align to the top or the bottom of the cell. Note that when applied to a 'New Table Row' class, it only affects that cell, not the whole row.

At the end of the table, apply 'Table End' to a paragraph container. The paragraph can be empty here too.

Web designers: The output class names are transformed into correct 'table', 'tr', and 'td' tag sets. The output class names for vertical alignment are 'td.vert-align-top' and 'td.vert-align-bottom'.

By default, table cells occupy exactly one cell. If you wish to offer users the ability to span multiple rows and columns, then create new classes called 'rowspan-#' and 'colspan-#' where '#' is the number of rows and columns to span.

Note that the Content widget will automatically terminate open 'table' tags at the end of the content. This "feature" could be problematic for content that needs to terminate early for whatever reason.

© CubicleSoft