Important: The 'Paste from Word' functionality in CKEditor is no longer supported using the built-in button. The 'Paste from Word' functionality is only available using keyboard shortcuts ctrl/cmd + v.
The editor for rich text fields in the administration interface allows you to apply a selected style to the text using the Style drop-down list. You can use either built-in styles or your custom styles:
The styles offered in the list are defined in the CMS\CMSAdminControls\CKeditor\styles.js file within the Xperience administration project. The structure of the file looks like the following:
CKEDITOR.stylesSet.add( 'default', [
/* Block Styles */
{ name: 'Paragraph', element: 'p' },
{ name: 'Heading 1', element: 'h1' },
{ name: 'Heading 2', element: 'h2' },
{ name: 'Heading 3', element: 'h3' },
{ name: 'Heading 4', element: 'h4' },
{ name: 'Heading 5', element: 'h5' },
{ name: 'Heading 6', element: 'h6' },
{ name: 'Preformatted Text',element: 'pre' },
{ name: 'Address', element: 'address' },
/* Inline Styles */
{ name: 'Strikethrough', element: 'strike' },
{ name: 'Subscript', element: 'sub' },
{ name: 'Superscript', element: 'sup' },
{ name: 'Marker', element: 'span', attributes: { 'class': 'marker' } },
{ name: 'Big', element: 'big' },
{ name: 'Small', element: 'small' },
{ name: 'Typewriter', element: 'tt' },
{ name: 'Computer Code', element: 'code' },
{ name: 'Keyboard Phrase', element: 'kbd' },
{ name: 'Sample Text', element: 'samp' },
{ name: 'Variable', element: 'var' },
{ name: 'Deleted Text', element: 'del' },
{ name: 'Inserted Text', element: 'ins' },
{ name: 'Cited Work', element: 'cite' },
{ name: 'Inline Quotation', element: 'q' },
{ name: 'Language: RTL', element: 'span', attributes: { 'dir': 'rtl' } },
{ name: 'Language: LTR', element: 'span', attributes: { 'dir': 'ltr' } },
/* Object Styles */
{
name: 'Styled image (left)',
element: 'img',
attributes: { 'class': 'left' }
},
{
name: 'Styled image (right)',
element: 'img',
attributes: { 'class': 'right' }
},
{
name: 'Compact table',
element: 'table',
attributes: {
cellpadding: '5',
cellspacing: '0',
border: '1',
bordercolor: '#ccc'
},
styles: {
'border-collapse': 'collapse'
}
},
{ name: 'Borderless Table', element: 'table', styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },
{ name: 'Square Bulleted List', element: 'ul', styles: { 'list-style-type': 'square' } }
] );Every time you modify the styles.js file (or any other file that is used for the editor), you need to clear the cache of your browser so that the changes are applied.
If you need to set multiple styles for one object, separate individual style definitions with a comma:
{ name : 'Object', element : 'element', styles : { 'style 1' : 'value' , 'style 2' : 'value' } }Every style has its name and element for which it is used. The styles are offered in the drop-down list based on the current position of the cursor. If you select an image, the styles for the img element will be offered. If you select text, the styles for the h3 or span element will be offered.
If you choose to apply e.g. the Red Title style to the following HTML code:
We provide web development services.the result will be as follows:
<h3 style="color: red">We provide web development services.</h3>The text becomes encapsulated into the h3 element with the style attribute set to color: red.
However, you may want to apply CSS class names instead of hard-coded styles. If you want to add a new style, the definition of the style needs to be inserted into the styles.js file in front of the last square bracket. In this case, your style definition will look like this:
name : 'Green text',
element : 'h3',
attributes :
{
'class' : 'GreenText'
}In your CSS stylesheets, you need to define the GreenText class name:
.GreenText { color: green; }and the result will be:
<h3 class="GreenText">We provide web development services.</h3>To ensure that content added through the editor is displayed correctly on the live site, create and link any required stylesheets for the pages of your live site application (depending on your live site's CSS implementation).
Additionally, to make editing consistent in the administration interface, we recommend specifying a stylesheet that the system applies to the content of rich text fields edited using the WYSIWYG editor:
Open the Settings application in the Xperience administration interface.
Expand the Content -> Content management settings category.
Specify the stylesheet in the CSS stylesheet for WYSIWYG editor setting.
Click Save.
Tip: If your instance contains multiple sites, we recommend specifying the stylesheet separately for each site (select the Site in the Settings application and then configure the setting). Each site typically has its own styles and stylesheet files.