Editor Body Templates

Mura includes the Content Templates plugin for CKEditor, which provides a dialog to offer predefined content templates - with page layout, text formatting and styles. It comes with a couple of sample templates, and theme developers may also create their own templates.

This feature only impacts the "Content/Body" area of the layout, and is separate from Mura's layout templates.

To see the sample templates in action, select a content item to edit, and locate the template button on the web editor toolbar. It's typically located on the last row, just before the Mura [m] tag button, as highlighted below.

Clicking the template button will launch the Content Templates dialog window.

The sample layouts include 2 Columns, 3 Columns, and 4 Columns. If "Replace actual contents" is enabled, all content will be deleted and replaced with the sample content. If you wish to disable this feature by default, you can add config.templates_replaceContents = false; to your editor's configuration settings.

The options on this dialog window are controlled by files located under the theme at {context}/{SiteID}/includes/themes/{ThemeName}/js/editor/templates/. Example files can be found in the default theme that ships with Mura, currently MuraBootstrap3.

The images directory contains the preview images that will display in the dialog window.

The default.js file contains the code used by CKEditor for the templates.

If you open the default.js file, you'll see where the "templates" are defined.

Each template definition should include the following:

• title
  • This is the text used next to the image in the dialog window as the Title.
• image
  • This is the image file used for the example layout to be displayed in the dialog window.
• description
  • This text will display under the Title in the dialog window.
• html
  • This markup is used to populate the web editor, if the template is selected.

You may add, modify, replace, or delete, any of the examples included.

Note: The sample default.js file included with MuraBootstrap3 includes the use of Bootstrap class names. You may want to modify these to match your own framework's classes.