Editor Settings
Mura's web editor, CKEditor, comes with a rich set of configuration options that make it possible to customize its appearance, features, and behavior.
Custom Configuration File
Mura utilizes a custom configuration file for setting CKEditor's configuration. Using a custom configuration file allows you to customize the various toolbars, and offers a way to control much of the way the web editor looks and functions.
The important piece to know is where you can place your custom configuration information. Mura automatically scans for specific files within your theme to use for CKEditor's configuration file. Listed below are the files Mura checks for in the specified order.
{context}/{SiteID}/includes/themes/{ThemeName}/js/editor/config.js.cfm{context}/{SiteID}/includes/themes/{ThemeName}/js/editor/config.js
The default theme that ships with Mura, MuraBootstrap3, includes a sample file with miscellaneous configuration examples. You can find it under {context}/{SiteID}/includes/themes/MuraBootstrap3/js/editor/config.js.cfm.txt
Since the sample file's extension ends with ".txt", Mura will ignore it. If you wish to use it, simply rename the file to remove the ".txt" file extension.
Custom Toolbar
A common question from developers centers around the ability to customize the editor toolbar. For example, if you only want the "Default" editor toolbar to display Bold, Italic, and Underline options, your configuration file could look something like the following code example.
if ( 'CKEDITOR' in window) {
CKEDITOR.editorConfig = function( config ) {
config.toolbar_Default = [
{name:'group1',items:['Bold','Italic','Underline']}
];
};
}
Using the example code above, the editor toolbars for "Content" will only display the Bold, Italic, and Underline options. However, the "Summary" toolbar will not change, as shown below.
As noted in the sample configuration file, if you wish to update the "Summary" toolbar, you'll need to explicitly define that as well. In addition, the front-end toolbar may be referenced with "QuickEdit". Below is an example that would update all three toolbars.
if ( 'CKEDITOR' in window) {
CKEDITOR.editorConfig = function( config ) {
config.toolbar_Default = [
{name:'group1',items:['Bold','Italic','Underline']}
];
config.toolbar_Summary = config.toolbar_Default;
config.toolbar_QuickEdit = config.toolbar_Default;
};
}
As you can see in the example code, we're simply using the first definition for the other toolbars. However, you could easily have different options for each toolbar definition, if you wish.
The example below displays both the Summary, and Content ("Default") toolbars.
The example below displays the "QuickEdit" toolbar used for front-end editing.
As you can see, Mura exposes CKEditor's configuration settings to allow you the ability to customize Mura's web editor quickly and easily.
Where to Learn More
All available CKEditor configuration options can be found in the CKEditor API documentation. Please refer to the CKEDITOR.config object definition for full details on each option.