Rich Text Settings

Rich Text fields present a Rich Text Editor with toolbars and features for working with formatted text. The formatted text is stored as HTML and CSS.

CKEditor 4 is used to implement the rich text editor, along with webCOMAND extensions.

Toolbar Customization

The rich text editor toolbar can be customized per Rich Text field and content folder.

To configure the toolbar for a Rich Text field:

Create a Rich Text Settings object in any folder.
Select the Folders where content that will use the custom toolbar options will be located.
Select the Content Types that will use the custom toolbar options.
Select the "Rich Text" Field(s) that will use the custom toolbar options.
Under the "CKEditor Settings" tab, add any number of Toolbars.

All defined toolbars will completely replace the default toolbars. Each toolbar is defined by a Label and comma-separated list of buttons and dividers. Toolbars can be configured to flow from one to the next, or break to another row of toolbars. See the Items field help for a list of supported buttons.

Spell Check

Check this option to enable the native browser spell checker in the CKEditor widget.

Styles

Custom styles can be defined for the styles drop-down menu, which appears as the first drop-down in the default toolbar.

To configure custom Styles for a Rich Text field:

Create a Rich Text Settings object in any folder.
Select the Folders where content that will use the custom toolbar options will be located.
Select the Content Types that will use the custom toolbar options.
Select the "Rich Text" Field(s) that will use the custom toolbar options.
Under the "CKEditor Settings" tab, add any number of Styles.

See the field help within a style for more information about how to configure each style.

Include Default Styles

If checked, this option will append the Styles to the default styles provided by the CKEditor widget.

Content Rules

The Rich Text Editor can be configured to allow or filter out certain HTML tags, styles and attributes. This makes it possible to automatically produce clean HTML, even when formatted text is pasted into the editor from Microsoft Word or other sources that may contain undesirable formatting.

By default, only formatting allowed by the enabled Toolbar options and Styles will be allowed. The following options are available to further customize the content rules

Allow All Content - CKEditor's default behavior is to strip all unrecognized styles from entered content. Check this box to disable this behavior and allow any styles entered by the user.
Allowed Content Rules - CKEditor allows for the definition of rules that drive which styles/attributes are stripped from which types of elements. If Allow All Content is NOT checked, these rules will apply. Note that rules defined here will replace all default CKEditor rules. If you wish to modify/extend the default rules, use Extra Allowed Content Rules or Disallowed Content Rules. See the Allowed Content Rules in the CKEditor Guide or webCOMAND field help for some examples.
Extra Allowed Content Rules - Extra Allowed Content Rules are similar to Allowed Content Rules, but are used to extend the default set of allowed styles/attributes, rather than replace it. See the extraAllowedContent in the CKEditor API Docs or webCOMAND field help for some examples.
Disallowed Content Rules - Disallowed Content Rules are similar to Extra Allowed Content Rules, but are used to remove styles/attributes that are otherwise available in the default set. Any rules defined here will be filtered from a user's input. See the disallowedContent in the CKEditor API Docs or webCOMAND field help for some examples.

Style Sheet

Custom CSS can be applied to the text area of the rich text editor. This is useful for providing a visual indicator of Styles applied to the text. It can also be used to simulate/indicate how the text will look when published to a website or other publication.

To configure custom Styles for a Rich Text field:

Create a Rich Text Settings object in any folder.
Select the Folders where content that will use the custom toolbar options will be located.
Select the Content Types that will use the custom toolbar options.
Select the "Rich Text" Field(s) that will use the custom toolbar options.
Under the "CKEditor Settings" tab, enter CSS in the Style Sheet field.

See the Style Sheet field help for more information. Basically standard CSS can be entered and will be applied to the editor content, which is basically a standard page inside an iframe.

cTemplate Rich Text

Content fields with a "cTemplate Rich Text Box" Data Type will:

process cTemplate code entered into the flow of the rich text.
enable linking to published content within the flow of the rich text.
enable Image insertion into the flow of the rich text.

cTemplate Code

cTemplate code can simply be typed into the rich text editor like text. It can also be entered into various tags through their dialogs, such as into the Link popup URL field.

Published Content

Publication Procedures and content associated with a Publication Procedure through it's Publication List can be selected from the Link toolbar option. All Publication Procedures the user has View authorization for will be displayed in the left side under "From Content" tab within the Link dialog. When a Publication Procedure that is based on a Publication List is selected on the left, content will be displayed on the right to link to the page published for that content.

The user must be authorized to view a Publication Procedure for it to be listed in the Link dialog under the "From Content" tab.

Image Content

Image content can be selected from the image toolbar option to produce an inline image in the flow of the rich text.

To make a content type and it's content available for selection from the image toolbar option:

Open the Content Type and add a new Template named "Image". Use cTemplate or cScript to produce and echo/return binary image data, typically based on an image field, using #IMAGE() to resize, crop or otherwise process the image. The image produced by this Template will be displayed only within the Rich Text editor as a preview. The published image will come from the ImageHTML template described in the next step.
Add a second Template named "ImageHTML". Use cTemplate or cScript to produce and output the image, and produce and echo/return the image tag or output to be published.

Image and ImageHTML Templates must be defined to display the content type in the image dialog.

Image Template Example

Two parameters are passed to the Image Template:

$A - The desired width of the image, as specified in the rich text editor image dialog under the Settings tab.
$B - The desired height of the image, as specified in the rich text editor image dialog under the Settings tab.

#{
    $width = $A;
    $height = $B;
    $max_width = 1280;
    $image_format = image($Image, 'GetFormat');
    if($image_format) {
        if($width || $height) {
            $exact = ($width && $height ? 1 : 0);
            if($width && $width > $max_width) {
                if($height) {
                    $height = $height * ($max_width / $width);
                }
                $width = $max_width;
            }
            $Image = image($Image, 'Resize', $width, $height, $exact);
        }
    }
    return $Image;
}

ImageHTML Template Example

Several parameters are passed to the ImageHTML Template:

$A - The desired width of the image, as specified in the rich text editor image dialog under the Settings tab.
$B - The desired height of the image, as specified in the rich text editor image dialog under the Settings tab.
$C - The desired alt text, as specified in the rich text editor image dialog under the Settings tab.
$D - The desired classes, as specified in the rich text editor image dialog under the Settings tab.

#{
    local $width = $A ? $A : 0;
    local $height = $B ? $B : 0;
    local $alt = $C;
    local $class = $D;

    // Init variable to store ultimate output to empty string
    local $image_url = '';
    local $image_attributes = '';
    if($class) {
        $image_attributes += ' class="$class"';
    }
    if($alt) {
        $image_attributes += ' alt="$alt"';
    }

    // Define some "constants"
    local $image_path = '/img/pages/';
    local $max_width = 1280;

    local $image_format = image($Image, 'GetFormat');
    if($image_format) {
        local $orig_image_width = image($Image, 'GetWidth');
        local $orig_image_height = image($Image, 'GetHeight');

        // remove the extension from the filename
        local $filename = $Identifier;
        local $image_ext = image($Image, 'GetExtension');

        if($width || $height) {
            local $exact = ($width && $height ? true : false);
            if($width && $width > $max_width) {
                if($height) {
                    $height = $height * ($max_width / $width);
                }
                $width = $max_width;
            }
            $Image = image($Image, 'Resize', $width, $height, $exact);
        } else {
            if($orig_image_width > $max_width) {
                $Image = image($Image, 'Resize', $max_width, 0);
            }
        }
        $image_width = image($Image, 'GetWidth');
        $image_height = image($Image, 'GetHeight');
        $image_url = output('$image_path$filename-${image_width}x${image_height}.$image_ext', $Image); 
        $image_attributes += ' data-size="${orig_image_width}x${orig_image_height}"';
    } else {
        warning('Invalid image: $Filename (OID $OID)');
    }

    return '<img src="$image_url"$image_attributes />';
}