Rich Text Editor Customization

Content fields with a "Rich Text" Data Type will display a rich text editor with toolbars and special functionality for working with rich text. Rich text is formatted text, which is formatted using HTML tags and CSS that is stored along with the text to preserve formatting information.

CKEditor is used to implement the rich text editor, plus some webCOMAND extensions.

Toolbar Customization

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

To configure a 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.

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.

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.

#CSCRIPT
    $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;
#ENDCSCRIPT

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.

#CSCRIPT
    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 />';
#ENDCSCRIPT