Element Renderers

The renderer in this category can be configured for element nodes in the xml data source. By default, each element renderer generates a label to indicate the beginning of the element and serves as a selection target which can be clicked to select the whole element. On some complex structures it can be helpful to hide the label especially if you have deeply nested compositions of elements and the additional labels between the elements are disturbing. For this case the label can be hidden by configuring the attribute hide-title and set the value to true:

<element name="subtitle" hide-title="true">
    ...
</element>

Attribute Renderers

  • csContentEditorAttributeRenderer - This renderer is the generic attribute renderer. Enumerables are editable by a dropdown-control. All other types are editable by a text-input-control.
  • csContentEditorAttributeRadioRenderer - This renderer can be configured on attributes where a radio-group-control is the preferred editor.

Default Renderers

The renderers in this section can be configured for elements and are part of the default renderer package. Some of them are used as fallbacks when no renderers are configured for specific elements.

  • csContentEditorElementRenderer - fallback if no interface definition matches and no name fallback matches.
  • csContentEditorMetadataRenderer - takes care of meta data nodes.
  • csContentEditorRelationRenderer - takes care of relation nodes.
  • csContentEditorRelationsRenderer - takes care of relations nodes.
  • csContentEditorRelationTypeRenderer - takes care of relation type nodes.

Text Renderer

  • csContentEditorTextRenderer - This renderer is used when the user should edit normal plain text without any special formatting and there is no rich text renderer configured for the targeted element. It is the fallback for #text nodes.

Rich text Renderers

Rich text renderer can be used to display complex xml structures in form of rich text, so e.g. the xml node:

<paragraph>
    This is an <bold-text>example</bold-text> of <italic-text>an <bold-text>rich</bold-text></italic-text> text.
</paragraph>

Visualized as:

This is an example of an rich text.

To define that the bold-text should be displayed with a bold font face, and that italic-text with an italic font face, you have to specify for the two elements with the inline configuration what how it should be visualized.

Configuration of child elements for Rich text Renderers

With the configuration node inline it is possible to define for the inline text renderer and its inherited renderers how its children should be visualized, e.g.:

<element name="bold" icon="cs-icon-bold">
    <inline style="font-weight:bold;"/>
</element>

Instances

Why do we have so many different rich text renderers? This question arises easily when you have a look at the list of available renderers below. The answer to this question is simple. Each of them do support different kind of attributes and provide special forms to interact with them. The general case, in which the user just wants to work with the rich text content and wants to have the ability to manipulate the attributes of the containing element naturally with the inspector, the renderer with name csContentEditorInlineTextRenderer can be used.

csContentEditorInlineTextRenderer

Possible Attributes: style: string

Other Rich text Renderers

The following renderers are rich text renderers and only differ in the way they treat the attributes of the containing element node by using special forms in the attribute inspector. With respect to the main canvas, they all behave exactly as the csContentEditorInlineTextRenderer. They support the same parameters and facilitate the inline configuration for their children.

  • csSCS3HeadlineRenderer
  • csSCS3ParagraphRenderer
  • csSCS3PreformattedTextRenderer
  • csSCS3ParagraphStyleRenderer
  • csSCS3StyleInlineRenderer

Others

  • csContentEditorWorkflowRenderer - Specialized renderer to edit workflow-steps.
  • csContentEditorXIncludeRenderer
  • csContentEditorAssetRenderer - This renderer is the generic Version of the file reference renderer which can be used to include assets of any type into documents. It acts as a drop area when empty and is able to show a preview if the asset-type is known by the system.

    Additional configuration options are:
    * the filtering of the allowed type
    * a flavor variant can be specified to tell the renderer which preview snippet is needed

    <element name="interactive-element">
        <renderer>
            <csContentEditorAssetRenderer>
                <layout type="borderLessImage"/>
                <filter assettype="extended-media.html.*" />
            </csContentEditorAssetRenderer>
        </renderer>
    </element>

Standard Content Structure 3.0 Renderers

There are some custom made renderers to increase the usability and reach a better overall user experience.
The List of prebuilt renderers with their corresponding mapping are:

  • csSCS3AdditionalContentRenderer - specialized renderer to view/edit nodes of type additional-content.
  • csSCS3AnchorRenderer - specialized renderer to view/edit nodes of type anchor.
  • csSCS3AudioBoxRenderer - specialized renderer to view/edit nodes of type audio-box.
  • csSCS3AudioRenderer - specialized renderer to view/edit nodes of type audio.
  • csSCS3BulletlistContentRenderer - specialized renderer to view/edit nodes of type bullet-list.
  • csSCS3BulletlistRenderer - specialized renderer to view/edit nodes of type additional-content.
  • csSCS3CalloutBoxRenderer - specialized renderer to view/edit nodes of type callout.
  • csSCS3CallToActionBoxRenderer - specialized renderer to view/edit nodes of type call-to-action.
  • csSCS3ConversationRenderer - specialized renderer to view/edit nodes of type conversation.
  • csSCS3GameBoxRenderer - specialized renderer to view/edit nodes of type game-box.
  • csSCS3HDividerRenderer - specialized renderer to view/edit nodes of type hdivider.
  • csSCS3HeadlineAttributesRenderer - specialized renderer to view/edit nodes of type headline.
  • csSCS3ImageBoxRenderer - specialized renderer to view/edit nodes of type image-box.
  • csSCS3ImagerangeBoxRenderer - specialized renderer to view/edit nodes of type image-range-box.
  • csSCS3ImageRenderer - specialized renderer to view/edit nodes of type image.
  • csSCS3ImagerevealBoxRenderer - specialized renderer to view/edit nodes of type image-reveal-box.
  • csSCS3InteractiveelementBoxRenderer - specialized renderer to view/edit nodes of type interactive-element-box.
  • csSCS3KeyVisualRenderer - specialized renderer to view/edit nodes of type key-visual.
  • csSCS3NumberlistRenderer - specialized renderer to view/edit nodes of type enumeration.
  • csSCS3PosterRenderer - specialized renderer to view/edit nodes of type poster.
  • csSCS3ReferenceDefRenderer - specialized renderer to view/edit nodes of type reference-def.
  • csSCS3ReferenceDescriptionRenderer - specialized renderer to view/edit nodes of type reference-description.
  • csSCS3SectionRenderer - specialized renderer to view/edit nodes of type section.
  • csSCS3SlideshowBoxRenderer - specialized renderer to view/edit nodes of type slideshow-box.
  • csSCS3SlideshowRenderer - specialized renderer to view/edit nodes of type slideshow.
  • csSCS3TurntableBoxRenderer - specialized renderer to view/edit nodes of type turntable-box.
  • csSCS3VideoBoxRenderer - specialized renderer to view/edit nodes of type video-box.
  • csSCS3VideoRenderer - specialized renderer to view/edit nodes of type video.

Online Channel Renderers

  • csOCTranslationEditorEntryRenderer
  • csOCTranslationEditorGroupRenderer