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
/adminto 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.
|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 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||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||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||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.|
|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||These typical undo / redo operations are limited to 20 edits with the current configuration.|
|Find||Basic find dialog.|
|Replace||Basic find & replace dialog.|
|Remove Format||Removes all the format and style in the selection, leaving only plain text.|
|Text Direction||Changes the text direction (left-to-right or right-to-left).|
Classic text styling buttons. Note that B will use a
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||Standard subscript and superscript styles.|
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.
|Decrease / Increase Indent||
Increases or decreases the text indent for the current block.
|Block Quote||Turns the current paragraph or selected paragraphs into a quote (display depends on the current stylesheet).|
|Div||Creates an HTML
|Alignment||These buttons change the current paragraph or selected paragraphs alignment: left, center, right or justified.|
|Link||Adds a link on the selection, or removes it. A link can be edited with a simple double-click on it.|
|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||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.|
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||This inserts a link to a particular location on a map.|
|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||This inserts a horizontal line.|
|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||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||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||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||Replaces the contents with a template. The current templates define several columns for the contents.|
|Mura Tag||Inserts a Mura tag (this is an advanced feature).|
|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||This menu can be used for titles (the various Heading elements), for a formatted block of text, or for an address.|
|Maximize||Increases the dimensions of the editor to fit the page. This is not available for inline edits.|
|Show Blocks||Displays the HTML elements in the documents. This can be very useful when several
|About||Displays information about CKEditor and the current version used.|
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.