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
:
|
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:
|
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.:
|
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 typeadditional-content
.csSCS3AnchorRenderer
- specialized renderer to view/edit nodes of typeanchor
.csSCS3AudioBoxRenderer
- specialized renderer to view/edit nodes of typeaudio-box
.csSCS3AudioRenderer
- specialized renderer to view/edit nodes of typeaudio
.csSCS3BulletlistContentRenderer
- specialized renderer to view/edit nodes of typebullet-list
.csSCS3BulletlistRenderer
- specialized renderer to view/edit nodes of typeadditional-content
.csSCS3CalloutBoxRenderer
- specialized renderer to view/edit nodes of typecallout
.csSCS3CallToActionBoxRenderer
- specialized renderer to view/edit nodes of typecall-to-action
.csSCS3ConversationRenderer
- specialized renderer to view/edit nodes of typeconversation
.csSCS3GameBoxRenderer
- specialized renderer to view/edit nodes of typegame-box
.csSCS3HDividerRenderer
- specialized renderer to view/edit nodes of typehdivider
.csSCS3HeadlineAttributesRenderer
- specialized renderer to view/edit nodes of typeheadline
.csSCS3ImageBoxRenderer
- specialized renderer to view/edit nodes of typeimage-box
.csSCS3ImagerangeBoxRenderer
- specialized renderer to view/edit nodes of typeimage-range-box
.csSCS3ImageRenderer
- specialized renderer to view/edit nodes of typeimage
.csSCS3ImagerevealBoxRenderer
- specialized renderer to view/edit nodes of typeimage-reveal-box
.csSCS3InteractiveelementBoxRenderer
- specialized renderer to view/edit nodes of typeinteractive-element-box
.csSCS3KeyVisualRenderer
- specialized renderer to view/edit nodes of typekey-visual
.csSCS3NumberlistRenderer
- specialized renderer to view/edit nodes of typeenumeration
.csSCS3PosterRenderer
- specialized renderer to view/edit nodes of typeposter
.csSCS3ReferenceDefRenderer
- specialized renderer to view/edit nodes of typereference-def
.csSCS3ReferenceDescriptionRenderer
- specialized renderer to view/edit nodes of typereference-description
.csSCS3SectionRenderer
- specialized renderer to view/edit nodes of typesection
.csSCS3SlideshowBoxRenderer
- specialized renderer to view/edit nodes of typeslideshow-box
.csSCS3SlideshowRenderer
- specialized renderer to view/edit nodes of typeslideshow
.csSCS3TurntableBoxRenderer
- specialized renderer to view/edit nodes of typeturntable-box
.csSCS3VideoBoxRenderer
- specialized renderer to view/edit nodes of typevideo-box
.csSCS3VideoRenderer
- specialized renderer to view/edit nodes of typevideo
.
Online Channel Renderers
csOCTranslationEditorEntryRenderer
csOCTranslationEditorGroupRenderer