Customizing the CKEditor

OrchestraCMS supports the use of the third party rich text editor CKEditor (http://ckeditor.com/) within content editor pages.  The CKEditor implementation in OrchestraCMS comes with a default set of initialization options.  These can be overridden with a custom configuration.  Some use cases for the custom configuration include:

• Custom font list
• Custom styles
• Templates (as you would use for a letter in MS Word)
• Button addition or removal

Coding the Custom Configuration

The custom configuration is coded as a Visualforce page in Salesforce.  An example that limits the fonts to Arial and Calibri and then provides two predefined styles called My Custom Block and My Custom Inline is provided below.

<apex:page sidebar="false" standardStylesheets="false" contentType="application/javascript">
<apex:outputText escape="false">

(function() {
    // Take advantage of the fact that a CKEditor config object is JavaScript and NOT JSON.
    // We can use an IIFE to execute some code as long as it returns a JavaScript object at the end.
    // This is the object that we'll return at the end.
    var actualCKEditorOptions = {
        stylesSet: 'my_custom_style',
        font_names: 'Arial/Arial, Helvetica, sans-serif;' +
        'Calibri/Calibri, Verdana, Geneva, sans-serif;'
    };
    // This code will be executed once for every editor that's initialized. Any one-off registrations of
    // styles, templates, event handling etc. should only be done once. We'll track this with a global.
    window.customCKEditFirstCall = true;
    if (window.customCKEditFirstCall) {
        window.customCKEditFirstCall = false;
        CKEDITOR.on('instanceReady', function(evt) {
            var instance = evt.editor.instance;
            // Any post-initialization logic can act on an individual editor instance here. This would be
            // similar to calling 'var myEditor = CKEDITOR.replace('..'); myEditor.doThing()'
        });
        CKEDITOR.config.contentsCss = [
            // This should be a list of paths to CSS files. These files will be applied to the rich text
            // editor body area.
        ];        
        CKEDITOR.stylesSet.add('my_custom_style', [
            { name: 'My Custom Block', element: 'h3', styles: { color: 'blue'} },
            { name: 'My Custom Inline', element: 'span', attributes: {'class': 'mine'} }
      ]);
    }
    // Finally, return the object that the caller is actually expecting.
    return actualCKEditorOptions;
})()
</apex:outputText>
</apex:page>

Configuring the Content Layout Record

The content layout record for each content template that will use this custom configuration needs to be edited.  The Visualforce_CKEditor_Config field will need to be added to the Content Layout page layout in Salesforce.  Populate this field with c__VisualforcePageName.

Instantiating CKEditor

When instantiating an instance of the CKEditor within a content edit page, JavaScript is used to replace an HTML textarea with an instance of the CKEditor.  To call a custom configuration for the CKEditor instance, the {!CKEditorConfig} option is used.  An example is given below.

<script type="text/javascript">
$(document).ready(function() {
    CKEDITOR.replace('myRichTextField', {!CKEditorConfig});

    ce.content_editor('registerSaveFunction', function() {
        return [
            {
                name: "MyRichTextAttr", 
                value: CKEDITOR.instances['myRichTextAttr'].getData(), 
                type: "Text"
            }
        ];
    });
});

</script>
<div>
    <label class="ocmsLabel"><b>Rich Text</b></label>
    <apex:outputText escape="false">
    <textarea name="myRichTextField">{!myRichTextAttr}</textarea>
    </apex:outputText>
</div>