The Editor

Mura uses CKEditor™ to allow non-technical users to edit and format content. While we've highlighted some useful information for developers below, you may also be interested in reading the CKEditor 3.x User's Guide as well.

Format and Styles

Mura CMS was built to insure standards-based, logically structured, semantically correct markup. While there is no silver bullet to guarantee this, we've minimized opportunities for poor markup the could be presented by the editor itself.

One of the ways this is accomplished is by limiting styles within the editor. You'll note that the options to select fonts, font size and color are not available by default. Instead, Mura relies on the "Format" and "Styles" dropdowns to provide the means for adding style.

Format

Formats are pre-defined block-level combinations of various formatting options that make it easier to keep the presentation of the text uniform. What is more, since a format often contains a number of features at once, when you want to customize the way a text fragment looks, you do not need to change a font, its size, or text and background color separately.

To choose a format, place the cursor inside the block-level element and press the    toolbar button. The Format drop-down list contains a number of pre-defined block-level styles that you can use. To make the choice easier, the format names are displayed in a format that they represent, giving you a preview of what the text will look like.


Format drop-down menu in CKEditor

Note, however, that a format can only be applied to a block-level element, like a paragraph or a div element. To change the appearance of a text fragment of arbitrary length, even a single letter, choose an inline style via the Styles feature of CKEditor.

Normal (Paragraph)

Wraps selected content in a <p> tag.

Normal (Div)

Wraps selected content in a <div> tag.

Formatted

Wraps selected content in a <pre> tag.

Address

Wraps selected content in a <address> tag.

Headings

Headings can be a bit confusing, depending on your knowledge of HTML. By default, they are assigned as follows:

  • Heading 1 = <h2>
  • Heading 2 = <h3>
  • Heading 3 = <h4>
  • Heading 4 = <h5>
  • Heading 5 = <h6>

This follows the most generally accepted best practices for Seach Engine Optimation (SEO) since <h1>'s are generally either avoided or, if used at all, placed at the top of the page, but not within the content body itself.

Styles

Styles are pre-defined combinations of various formatting options that make it easier to keep the presentation of the text uniform. What is more, since a style often contains a number of features at once, when you want to customize the way a text fragment looks, you do not need to change a font, its size, or text and background color separately.

To choose a style, select a text fragment and press the toolbar button. The Styles drop-down list contains a number of pre-defined block and inline styles that you can use. To make the choice easier, the style names are displayed in a style that they represent, giving you a preview of what the text will look like.


Styles drop-down menu in CKEditor

A style can be applied to the whole document, a pragraph, or a text fragment of arbitrary length - even a single letter. Do note, however, that for esthetic and readability reasons it is recommended not to combine too many different styles in one document and to keep the styling consistent.


Styles used in CKEditor

Showing Document Blocks

In CKEditor some formatting settings can only be applied to block-level elements. From the point of view of document structure, block-level elements are elements that may contain other elements, both block and inline in type. They typically begin a new line and when some types of (block-level) styling are applied to one element within them (one letter, one word), this styling is automatically taken over by the whole block. Some examples of block elements are a paragraph, a heading, a table, a list, or a block quote.

Inline elements, on the other hand, are minor building blocks that are contained within block-level elements and are distinguished from the text that they are embedded in mainly due to stylistic distinctiveness, like italics, bold, or fixed-width font.

Since these distinctions might be confusing for the user who does not know much about HTML code and its structure, and as a result, some users may not be sure why a given formatting feature works on a whole paragraph and another just on a selected fragment, CKEditor includes a Show Blocks feature.

When you press the  toolbar button, CKEditor will display a grid of dotted frames around the block-level elements of the document along with their HTML tag, like p for paragraph or h1 for level 1 heading, as shown in the figure below.


A sample document with block-level elements shown in CKEditor

Templates

A Content Template is a CKEditor feature that lets you control the structure of the document and preserve consistency across multiple documents. Templates are pre-defined, ready-made document forms with page layout, text formatting and styling as well as other elements.

To use a CKEditor template, press the  button on the toolbar. The following Content Templates dialog window will be displayed on the screen.


CKEditor Content Templates dialog window

The dialog window shows a list of pre-defined templates that are available in Mura. These templates have been customized for Mura to provide an easy way to insert multi-column layouts into the body of your page.

Each template listed in the window contains a title, an image presenting the schematic outline of the template as well as its description.

In order to select a template, choose it from the list in the Content Templates dialog window and click once. The dialog window will close and the selected template will be applied to the document.

The Content Templates dialog window contains only one configuration option: Replace actual contents.

Leaving it checked means that the inserted template will also replace the content entered previously into the CKEditor window, deleting it in the process. This is a potentially destructive operation, so if you unintentionally remove the text using this option, you can always revert this operation by pressing the  button on the toolbar or the Ctrl+Z shortcut on your keyboard.

If you leave the Replace actual contents option unchecked, the template will be inserted in the current position of the cursor in the document.

Components

Mura Components provide a custom way to provide templates for your content, allowing the insertion of content with a specific markup convention or visual display.

To choose a component, press the highlighted button  on the toolbar. This will launch the Select Component dialog window.


Select Component dialog window in CKEditor

Simply select the component you wish to insert and click OK.

 

*Mura 5.2 and older use an older version of CKEditor known as FCK Editor.