Creating Custom Editors

Overview

The properties (attributes) collected for authoring or editing content using the inline editor in a community or in the Lightning experience are controlled by the content template.

The Name and Description fields are inherent to OrchestraCMS content and are provided by the core product code.  Any additional fields are the responsibility of the developer.

When using the CTC to create a content template the editor is based on the field selections defined in the CTC.

When functionality outside of that available through the Content Template Creator is required for the editor the editor can be crafted as a Lightning component.  That Lightning component can then be specfiied in the Component Name field of the Content Layout record.

Sample code used for the Component of the editor pictured at the top is included below.

The component must extend cms:LightningEditorController.

Each field/attribute being collected must be defined using the aura:attribute and have a unique name.

attributeTypes

The cms:InlineEditingContentAttribute component has the following attributeType options:

• TextInputAttribute : Standard text input 
• TextAreaAttribute: Standard text area for unformatted text
• PageSelectorAttribute: A text field for a link with a checkbox to have the link open in a new window if desired
• CheckboxAttribute: A standard checkbox
• RichTextAttribute: An instance of the CKEditor 
• ImageSelectorAttribute: Launches a browser to select an image/file from the OrchestraCMS media library
• SinglePicklistAttribute: A picklist allowing a single value to be selected
• MultiPicklistAttribute: A picklist allowing multiple values to be selected

The developer is not limited to the attibuteTypes provided above.  Any Lightning fields or other constructs would be valid as well as long as the value is added to the array in the controller.

<aura:component extends="cms:LightningEditorController" access="global">

    <aura:attribute name="Headline" type="String" access="global" />
    <aura:attribute name="SummaryContent" type="String" access="global" />
    <aura:attribute name="HTMLContent" type="String" access="global" />
    <aura:attribute name="ImageId" type="String" access="global" />
    <aura:attribute name="LargeImageId" type="String" access="global" />
    <aura:attribute name="TitleImageText" type="String" access="global" />

    <aura:method name="getAttributes" action="{!c.getAttributes}" access="global" />


    <cms:InlineEditingContentAttribute attributeType="TextInputAttribute" label="Headline" name="Headline" value="{!v.Headline}" />
    <cms:InlineEditingContentAttribute attributeType="TextInputAttribute" label="Summary" name="SummaryContent" value="{!v.SummaryContent}" />
    <cms:InlineEditingContentAttribute attributeType="RichTextAttribute" label="Article Body" name="HTMLContent" value="{!v.HTMLContent}" siteBundle="{!v.siteBundle}" contentLayout="{!v.contentLayout}" />
    <div class="slds-form-element__group">
        <div class="slds-form-element__row">
            <div class="slds-form-element slds-size--1-of-2">
                <cms:InlineEditingContentAttribute attributeType="ImageSelectorAttribute" label="Summary Image" name="ImageId" value="{!v.ImageId}" siteBundle="{!v.siteBundle}" />
            </div>
            <div class="slds-form-element slds-size--1-of-2">
                <cms:InlineEditingContentAttribute attributeType="ImageSelectorAttribute" label="Detail Image" name="LargeImageId" value="{!v.LargeImageId}" siteBundle="{!v.siteBundle}" />
            </div>
        </div>
    </div>
    <cms:InlineEditingContentAttribute attributeType="TextInputAttribute" label="Image Caption" name="TitleImageText" value="{!v.TitleImageText}" />

</aura:component>

The Controller of the editor must return an array of the collected attributes in order to have the values saved and incorporated into the content.  These will be saved as Attribute records related to the Content record. 

• name : The name that will be used to save the Attribute record, these must match in the component and controller
• value: The code to get the value of the field from the component to be saved as the value of the Attribute

A sample controller to go with the component above.

({
    getAttributes: function(component, event, helper) {
        return [
            {name: "Headline", value: component.get('v.Headline'), valueType: "Text"},
            {name: "SummaryContent", value: component.get('v.SummaryContent'), valueType: "Text"},
            {name: "HTMLContent", value: component.get('v.HTMLContent'), valueType: "RichText"},
            {name: "ImageId", value: component.get('v.ImageId'), valueType: "Link"},
            {name: "LargeImageId", value: component.get('v.LargeImageId'), valueType: "Link"},
            {name: "TitleImageText", value: component.get('v.TitleImageText'), valueType: "Text"}
        ];
    }
})