The Content Editor

  • Content Formatting, Content Editing

With Mura, there are three different ways to edit a page:

  • with the "Inline Edit" menu (the equivalent of "Quick Edit" in Mura 6). This requires to be logged in when viewing a page. Use the esc-L shortcut on the page to login if you are not already. This displays a menubar on top of the page, including the Edit menu. A double-click on a text area in the page contents will start the editor. When you are done editing, don't forget to click on the "Done Editing" button on the right and choose a save option with the Save menu in the top menubar.
  • with the "Full Edit" menu. This also requires to be logged in. It displays the page in a window, with more editing options. It is for instance possible to change the page title, to upload an associated image, to edit the summary, or to change publishing options.
  • from the administration side of Mura. This side can be accessed by using the "Tree View" button in the top menubar after logging in with esc-L. Find the page in the Content tree, and click on the page title to edit it. The administrative side can also be reached simply by adding /admin to the site home page URL.

Mura includes CKEditor 4, a free HTML editor for the web, for content edition. It is the editor you see when you edit an article, whether you use inline edit or full edit.

The CKEditor 4 documentation does not currently contain any end user documentation. The CKEditor 3 User's Guide is still mostly valid, but CKEditor was configured in Mura for a better integration with the CMS, so the generic CKEditor documentation might not match the current Mura content editor. This article describes all the available icons in Mura, and provides some usage hints.

Toolbar buttons

    accessibility Accessibility This displays a dialog helping to fix common accessibility issues. For instance, it will suggest adding an alternative text for images, which can be used as a replacement if the image cannot be seen by the user. Several knowledge base articles, such as this one, can also provide help for a better understanding of the issues. There also is some documentation about the accessibility checker.
    source Source code Displays the source code, using the Code Mirror editor. It is possible to switch between the source code and the WYSIWYG editor, but be aware that CKEditor filters the markup every time you switch to ensure the HTML code stays valid.
    cut / copy / paste Cut / Copy / Paste The usual clipboard operations, except that they cannot work in the same way in a web application as a desktop application, because web applications are not allowed to read the clipboard (for security reasons). Because of this, CKEditor will often ask users to use the keyboard shortcut for paste (ctrl-V on Windows) in a dialog when the Paste icon is used. In practice it is just easier to always use the clipboard shortcuts with CKEditor.
    paste as plain text Paste as plain text This will paste the contents of the clipboard without any format or style. As with Paste, CKEditor will usually ask to use a keyboard shortcut in a dialog to paste the contents, which will then be stripped of any style before being inserted.
    paste from Word Paste from Word Microsoft Word has a tendency to add a lot of extra formatting and style which does not render well on the web when a simple copy-paste is used. When copying from Word, the best option is often to Paste as Plain Text, but to preserve the style this button should be used instead of Paste.
    print Print Prints the contents as displayed in CKEditor. Printing from the web page (for instance using a Preview) might give different results, because the stylesheet used is not the same.
    undo / redo Undo / Redo These typical undo / redo operations are limited to 20 edits with the current configuration.
    find Find Basic find dialog.
    replace Replace Basic find & replace dialog.
    remove format Remove Format Removes all the format and style in the selection, leaving only plain text.
    text direction Text Direction Changes the text direction (left-to-right or right-to-left).
    style Style

    Classic text styling buttons. Note that B will use a strong (strong emphasis) HTML element instead of b, and I will use an em (emphasis) HTML element instead of i, because style elements are deprecated. In practice, this means that characters displayed in bold or italics in CKEditor might be displayed differently on a web page under certain conditions (for instance if the text is within a block of bold or italics text, web browsers may use a different style to make inside text stand out).

    The underline style should not be used on the web, because it is often mistaken with a link. Bold or italics are preferred.

    subscript superscript Subscript / Superscript Standard subscript and superscript styles.
    lists Lists

    WYSIWYG numbered and bulleted lists. Use shift+Enter to insert a new line within the same list item. A contextual menu displayed with a right click will provide additional display options for the list.

    indents Decrease / Increase Indent

    Increases or decreases the text indent for the current block.

    block quote Block Quote Turns the current paragraph or selected paragraphs into a quote (display depends on the current stylesheet).
    div Div Creates an HTML div element, which can be used to give some style to a block of text. Usually, a class attribute is used to associate some predefined style to the block. This is for advanced usage, since several blocks with a class are already available in the Styles menu, under "Block Styles".
    align Alignment These buttons change the current paragraph or selected paragraphs alignment: left, center, right or justified.
    link Link Adds a link on the selection, or removes it. A link can be edited with a simple double-click on it.
    anchor Anchor Inserts an anchor. This can be used to define links within a page. For instance, an anchor named "introduction" can be linked to by adding "#introduction" at the end of a page URL.
    image Image Inserts a reference to an image, with a URL. If the "Browse Server" button is displayed to the right of the URL field, it can be used to select an image in the Mura site assets, using CKFinder. This feature is currently not available with inline edits. An alternative text should be provided to describe the image when it cannot be displayed or if it cannot be seen by the user.
    external media External Media

    This is a shortcut to include a media from an external site, such as YouTube, Flickr, Qik, Vimeo, Hulu, Viddler or MyOpera. Since the content is hosted on a separate server, a network issue could potentially make the media unavailable.

    It is also possible to include videos directly using the video HTML element, but this currently requires editing the source code.

    leaflet map Leaflet Map This inserts a link to a particular location on a map.
    table Table Inserts a new table. Set the border size to 0 if you do not want a border to be visible for table cells. The width can be set to 100% to fill the available width in the page. When editing a table, the contextual menu (right click) provides options to insert or delete rows and columns.
    horizontal line Horizontal Line This inserts a horizontal line.
    special character Special Character Dialog to insert special characters. Other special characters can be inserted with OS-specific tools, but be aware that some uncommon special characters might not display if a user does not have a font able to display that character.
    page break Page Break Inserts a page break that will only do something when the page is printing. This is ignored when the page is simply viewed on the web.
    internal link Internal Link Adds a link on the selected text to a page in the same site. This displays a dialog letting you search for a given page with keywords.
    component Component Inserts a Mura component. Components are pieces of HTML that can be saved like pages in the Mura contents (on the admin side), but can also be reused in various places on the site.
    template Template Replaces the contents with a template. The current templates define several columns for the contents.
    mura tag Mura Tag Inserts a Mura tag (this is an advanced feature).
    styles Styles Menu Changes the style for selected paragraphs (Block Styles), for selected text within a paragraph (Inline Styles), or for a table (Object Styles). See Container Classes for container examples and usage.
    paragraph format Paragraph Format This menu can be used for titles (the various Heading elements), for a formatted block of text, or for an address.
    maximize Maximize Increases the dimensions of the editor to fit the page. This is not available for inline edits.
    show blocks Show Blocks Displays the HTML elements in the documents. This can be very useful when several div elements are used inside another for structuring the contents.
    about About Displays information about CKEditor and the current version used.

    Spell Checking

    It is possible to spell check text in CKEditor using the browser built-in spell checker. To enable or disable spell checking, simply hold the shift or ctrl key when right-clicking on the document to bring up the browser contextual menu, and select the appropriate menu item (without the extra key, CKEditor's contextual menu shows up, and it does not have options for spell checking). The same browser menu also displays suggestions for a possibly misspelled word.

    Keyboard shortcuts

    CKEditor has many keyboard shortcuts that can be useful, especially for accessibility. Alt+0 opens the Accessibility Instructions dialog window.