Content Editor - standard content structure v3 - customize UI definition

Customize which and how content is displayed in the Content editor user interface. Learn how to customize the UI definitions of the standard content structure. Retain inline style formats when copying and pasting text from other applications. Example: Inline styles formatting.

Retain inline style formatting when copying and pasting to the Content Editor from other applications.

Context

The task is carried out in censhare Web, in the Content editor configuration assets:

Module/Content Editor/ Content Editor UI Definition V3 asset
Module/Content Editor/ Content Editor/RelaxNG asset

Prerequisites

The customization described in this article is based on the Standard Content Structure version 3.

Introduction

The RelaxNG schema specifies a pattern or the structure and content of an XML document. The UI definition defines how the XML elements of the schema are represented in the user interface of the Content editor. You can customize both to your needs. For example, you can define how the corresponding element in the XML document should look like in the user interface.

Customize style elements

Style elements provide the mapping between the CSS rules which need to be retained during copy/paste and the corresponding element described in the UI definition.

When inline styles are defined, users can copy text from other applications such as Microsoft Word into the Content editor without losing the formatting. Users can paste the text into all kinds of text elements, such as titles, paragraphs, and tables.

The standard content structure provides common inline style elements such as bold and italic with the corresponding mapping. You can change this mapping. For example, you can define that the bold text is always displayed in bold and highlighted in blue. You can add further inline styles.

Note: If the application from which text is copied does not provide the inline styles information, retaining styles might not work properly.

Note: Style elements are optional. If you remove all style elements from the UI definition, no styles are retained.

Key steps

Edit the XML of the Content Editor/UI definition asset.
Edit the XML of the Content Editor/RelaxNG asset.

Customize inline style formatting in the UI definition

Open the Module/Content Editor/ Content Editor UI Definition V3 asset you want to customize.
For a text element with inline elements, create or customize a mapping. The mapping ensures that the element displays accordingly.
Go to the <-- inline styles--> declaration. Create or customize the CSS declarations. This defines how the inline element is formatted For all elements and attributes, you can also define an icon.

Note: If you edit element names in the UI definition, ensure that you update and declare them in the RelaxNG schema accordingly. For example: If you change the name of an inline-style element from "bold" to "strong", the element name must be declared in the RelaxNG schema in the define element as element name=strong accordingly.

Styles mapping sample

Inline styles mapping in the standard content structure v3 UI definition:

XML

<style-element>
	<style-element name="bold" element="bold" />
	<style-element name="italic" element="italic" />
	<style-element name="underline" element="underline" />
	<style-element name="sub" element="sub" />
	<style-element namw="sup" element="sup" />
</style-element>

Element	Description	Note
style element name	Define a CSS rule which should be applied for Copy and Paste actions.
element	Define the corresponding element which represents this CSS rule. Define the element in the UI Definition XML and RelaxNG schema.	For example, you can define such that the CSS rule "bold" displays as "bold-italic" in the XML document.

Style definition sample

Inline styles definition in the standard content structure v3 UI definition:

XML

<element name="bold" icon="cs-icon-bold">
            <inline style="font-weight:bold;" hotkey="mod+b"/>
        </element>
<element name="italic" icon="cs-icon-italic">
            <inline style="font-style:italic;" hotkey="mod+i"/>
        </element>
<element name="bold-italic" icon="cs-icon-bold-italic">
            <inline style="font-weight:bold;font-style:italic;"/>
        </element>
<element name="underline" icon="cs-icon-text-underline">
            <inline style="text-decoration: underline;" hotkey="mod+u"/>
        </element>
<element name="sub" icon="cs-icon-sub">
            <inline style="vertical-align:sub;font-size:smaller;"/>
        </element>
<element name="sup" icon="cs-icon-sup">
           <inline style="vertical-align:super;font-size:smaller;"/>
        </element>

Element, attribute	Description	Note
element name	Name of element	The names of the element in the mapping and in the style definition must match.
icon	Name of the icon. The icon displays in the Content editor toolbar.	For example, "cs-icon-bold"
inline style="<attribute>:<value>"	Contains the CSS style declaration for the element. This style declares how the element looks like in the Content editor when it is added to or presented in the document.	For example, you can define that the inline element "bold" should always display in bold, in a larger font and in the color Blue: <inline style="font-weight:bold; font-size:larger; color:blue">
hotkey	Defines a keyboard shortcut. Optional.	The element must be present in the toolbar. Assign the shortcut to the corresponding button in the toolbar.

Declare the style element in the RelaxNG schema

Open the associated Module/Content Editor/ Content Editor RelaxNG V3 asset.
Specify the name of the elements you customized in the UI definition. Declare for which XML elements, they are valid.

Element definition sample

Elements definition in the standard content structure v3 RelaxNG:

CODE

<define name="cont_text">
    <choice>
      <refname="cont_textSimple"/>
      <element name="bold">
        <oneOrMore>
          <refname="cont_textSimple"/>
        </oneOrMore>
      </element>
      <element name="italic">
        <oneOrMore>
          <refname="cont_textSimple"/>
        </oneOrMore>
      </element>
      <elementname="bold-italic">
        <oneOrMore>
          <refname="cont_textSimple"/>
        </oneOrMore>
      </element>
    </choice>
</define>

Result

When users copy and paste formatted text from other applications into XML text elements in the Content editor, the formatting is retained.