You're viewing help content for version:

The Rich Text Editor (RTE) provides authors with a wide range of functionality for editing their text content. Icons, selection boxes, and menus are provided for a WYSIWYG text-editing experience.

These can be individually activated, deactivated, or configured for your installation-specific text component(s).

  • Touch-Enabled UI

    chlimage_1
  • Classic UI

    rtedefault

The functionality is made available via a series of plugins, each with:

Note:

The Core Components text component allows template editors to configure many RTE features in a GUI, eliminating the need for technical configuration.

For more information see Creating Page Templates and the Core Components developer documentation.

RTE Plugins and the features Property

Plugins and their Features

Basic features of the RTE are activated, or deactivated, by the value of the features property on a node specific to the appropriate plugin.

The following table lists the current plugins, showing:

  • The plugin ID, used as the node name when activating the plugin
    • In the table there is a link to the API documentation for that plugin
  • Permitted values for the features property
  • A description of the functionality realized by that plugin
    • In the table there is a link to our documentation about authoring with the RTE
Plugin ID
features
Description
edit cut
copy
paste-default
paste-plaintext
paste-wordhtml
Cut, copy and various flavors of paste.
findreplace
find
replace
Find and replace.
format
bold
italic
underline
Basic text formatting.
image
image

Basic image support (drag from content or content finder).

Which depending on the browser may have different behavior in the usage.

keys   See Tab Size to define this value.
justify
justifyleft
justifycenter
justifyright
Paragraph alignment.
links
modifylink
unlink
anchor
Hyperlinks and anchors.
lists ordered
unordered
indent
outdent
This plugin controls both Indentation and Lists; including nested lists.
misctools
specialchars
sourceedit

Miscellaneous tools allowing you to enter special characters or edit the HTML source.

See Adding Special Characters if you want to define your own list.

paraformat
paraformat

Formatting paragraphs.

Default paragraph formats are:

  • Paragraph <p>
  • Heading 1 <h1>
  • Heading 2 <h2>
  • Heading 3 <h3>
See adding a new Paragraph Format if you want to add your own paragraph formats (or extend the list).
spellcheck
checktext
Language aware spell checker.
styles
styles

Support for styling using a CSS class.

See adding a new style (Text) if you want to add (or extend) your own range of styles for use with text.

subsuperscript
subscript
superscript
Extensions to the basic formats, adding sub- and superscript.
table
table
removetable
insertrow
removerow
insertcolumn
removecolumn
cellprops
mergecells
splitcell
selectrow
selectcolumns

Table support.

See adding styles for Tables and Table Cells if you want to add your own styles for either entire tables or individual cells.

undo
undo
redo

Undo and redo.

You can also define the history size for undo/redo.

RTE - In-Place and in a Dialog

The RTE can be used in a variety of modes:

In-Place Editing

  • Touch-Enabled UI

    When opened (with a slow double-tap/-click) the content can be edited and there is a compact toolbar with the basic options:

    chlimage_1

    The full-screen version of in-place editing can be opened from the compact toolbar (content will hide page content):

    chlimage_1

    Note:

    Table plugins and the source-edit feature are not available for in-place editing in the touch-enabled UI. Moreover, the Image plugin is only supported partially (drag-and-drop functionality is not available). Also, the drag-and-drop does not apply to the full-screen mode. 

  • Classic UI

    A slow double-tap/-click on the component area will open in-place editing. The content is surrounded by an orange border:

    chlimage_1

    Note:

    If you have the content finder open then a toolbar with the RTE formatting options will be shown at the top of the window area (as above).

    If the content finder is not open then the toolbar will not be shown.

Editing in a Dialog

  • Touch-Enabled UI

    An edit dialog is not required for the RTE in the touch-enabled UI. All edit functionality is present in the in-place or full-screen editing window.

    Note:

    Table Plugin is not supported when editing in the touch-enabled UI.

  • Classic UI

    A dialog is opened directly within the flow of the content:

    chlimage_1

    Note:

    In specific scenarios this dialog can also open as a pop-up window. For example, when a Text component is part of a column structure - and space is too small for the dialog to be within the content flow.

Configuration Locations

The mode of RTE editing (and the UI) that you provide for your authors decide the location for the configuration details when you are activating the RTE plugins:

Note:

The respective rtePlugins node will be referred to as <rtePlugins-node> to avoid duplication in the following sections.

  • In-place editing (touch-enabled UI and classic UI):

    • .../text/cq:editConfig/cq:inplaceEditing/config/rtePlugins

    Note:

    If, for example for backward compatibility reasons, the node under cq:inplaceEditing is called something other than config, then ensure that on the intermediate node:

    • cq:inplaceEditing

    The following property is defined:

    • Name: configPath
    • Type: String
    • Value: name of the node used for the configuration definitions (i.e. the equivalent of config; e.g. in some previous cases it was defined as inplaceEditingTextConfig)

  • Editing in a Dialog (classic UI only):

    • .../text/dialog/items/tab1/items/text/rtePlugins
    Configure the following properties that apply to RTE in Dialog Mode (touch-eanbled UI only):
    • useFixedInlineToolbar: Set this Boolean Property defined on the RTE node (one with sling:resourceType="/libs/cq/gui/components/authoring/dialog/richtext") to true, to make RTE toolbar permanently visible (even on out of area clicks) and fixed instead of floating.
      When this property is true, Richtext editing is, by default, started on the "foundation-contentloaded" event.
      To prevent this, set the property 'customStart' to true and trigger the 'rte-start' event to start RTE editing.
      When this property is 'true', the default behaviour, rte start on click, does not work.
    • customStart: Set this Boolean property defined on the RTE node to true, to control when to start RTE
      by triggering the event "rte-start" e.g. (Multifield Implementation)
    • rte-start: Trigger this event on the contenteditable-div of RTE, when to start editing RTE. This works
      only if 'customStart' has been set to true.

    When RTE is used in the touch-enabled dialog, setting the property useFixedInlineToolbar to true is mandatory to avoid unknown issues.

Note:

For reference purposes, the default Text components (delivered as part of a standard installation) can be found at:

  • /libs/wcm/foundation/components/text
  • /libs/foundation/components/text

These must not be edited, but can be copied to create your own text component.

Activate a Plugin and Configure the features Property

Each plugin node can have a features property configured to activate, or deactivate, one or more features:

Note:

When working with CRXDE Lite it is advisable to save the changes regularly using Save All.

Activating a Plugin

Note:

These steps are only needed the first time that a plugin is explicitly configured for your component. After that the nodes will already exist.

  1. Using CRXDE Lite, locate the text component for your project.

  2. Depending on your component you might need to create parent node of <rtePlugins-node> before configuring any RTE plugins:

    • Depending on your component the parent nodes:
      • config
        • as in
          .../text/cq:editConfig/cq:inplaceEditing/config
      • an alternative configuration node
        • as in
          .../text/cq:editConfig/cq:inplaceEditing/inplaceEditingTextConfig
      • text
        • as in
          .../text/dialog/items/tab1/items/text
    • Are of type:
      • jcr:primaryType cq:Widget
    • Both have the following property:
      • Name name
      • Type String
      • Value ./text
  3. Dependent on the UI you are configuring for create the new node (i.e. the <rtePlugins-node> - if it does not already exist):

    • Name  rtePlugins
    • Type nt:unstructured
  4. Below this create a new node for each plugin that you want to activate:

Configuring the features Property

  • For this "plugin" node (i.e. named after the plugin) add the property features.

    There are two methods of configuring the property:

    • To activate all features for that plugin:
      • Name features
      • Type String
      • Value * (asterisk)
    • To activate specific features (any not explicitly defined will be deactivated):
      • Name features
      • Type String[] (multi-string; set Type to String and click Multi in CRXDE Lite)
      • Value(s) set to one, or more, feature values

    Caution:

    Even if you are only setting one specific value of features you do have to use String[].

    String is only valid when defining features as *.

The following illustrates one example of configuring the features property:

Example to Configure the Flavors of Paste Shown

There are three paste icons (though you may decide that you do not want all to be shown):

  • Browser Default (paste-default)
  • Plain Text (paste-plaintext)
  • Microsoft-Word (paste-wordhtml)

You can configure those shown by:

  • Activating the edit plugin (by creating the <rtePlugins-node>/edit node)
  • Defining the value(s) of the features property on the <rtePlugins-node>/edit node
  1. Navigate to your component; for example:
        /apps/<myProject>/components/text

  2. Within your component definition navigate to the node rtePlugins/edit; for example:

        <rtePlugins-node>/edit

    See Activating a Plugin if these do not already exist.

  3. Create the features property on the edit node (the property type is dependent on the combination of icons that you want to show):

    • To show all icons (cut, copy, paste-browser, paste-plaintext, paste-wordhtml) create the features property as:
      • Name features
      • Type String
      • Value * (asterisk)
    • To show individual icons, for example
      • cut
      • copy
      • and "paste as Microsoft-Word" (paste-wordhtml)
      create the features property as:
      • Name features
      • Type String[]    (click Multi if using CRXDE)
      • Values:
        • cut
        • copy
        • paste-wordhtml
  4. Save the changes.

Configuring RichText Editor dialog settings for toolbar (touch-enabled UI)

You can configure UI settings for the RichText Editor dialog, which are used to build the RTE toolbar.

RTE provides the following default settings that you can override based on your requirements:

"uiSettings": {
    "cui": {
		"inline": {
			// TODO adjust to final decision of default inline toolbar settings
			"toolbar": [
				"#format",
				"-",
				"#justify",
				"-",
				"#lists",
				"-",
				"links#modifylink",
				"links#unlink",
				"-",
				"fullscreen#start",
				"-",
				"control#close",
				"control#save"
			],
			"popovers": {
				"format": {
					"ref": "format",
					"items": [
						"format#bold",
						"format#italic",
						"format#underline"
					]
				},
				"justify": {
					"ref": "justify",
					"items": [
						"justify#justifyleft",
						"justify#justifycenter",
						"justify#justifyright"
					]
				},
				"lists": {
					"ref": "lists",
					"items": [
						"lists#unordered",
						"lists#ordered",
						"lists#outdent",
						"lists#indent"
					]
				},
				"styles": {
					"ref": "styles",
					"items": "styles:getStyles:styles-pulldown"
				},
				"paraformat": {
					"ref": "paraformat",
					"items": "paraformat:getFormats:paraformat-pulldown"
				}
			}
		},
		"fullscreen": {
			"toolbar": [
				"format#bold",
				"format#italic",
				"format#underline",
				"subsuperscript#subscript",
				"subsuperscript#superscript",
				"-",
				"edit#cut",
				"edit#copy",
				"edit#paste-default",
				"edit#paste-plaintext",
				"edit#paste-wordhtml",
				"-",
				"links#modifylink",
				"links#unlink",
				"links#anchor",
				"-",
				"findreplace#find",
				"findreplace#replace",
				"-",
				"undo#undo",
				"undo#redo",
				"-",
				"justify#justifyleft",
				"justify#justifycenter",
				"justify#justifyright",
				"-",
				"lists#unordered",
				"lists#ordered",
				"lists#outdent",
				"lists#indent",
				"-",
				"table#createoredit",
				"-",
				"image#imageProps",
				"-",
				"spellcheck#checktext",
				"misctools#specialchars",
				"misctools#sourceedit",
				"-",
				"#styles",
				"#paraformat",
				"-",
				"fullscreen#finish"
			],
			"popovers": {
				"styles": {
					"ref": "styles",
					"items": "styles:getStyles:styles-pulldown"
				},
				"paraformat": {
					"ref": "paraformat",
					"items": "paraformat:getFormats:paraformat-pulldown"
				}
			}
		},
		"tableEditOptions": {
			"toolbar": [
				"table#insertcolumn-before",
				"table#insertcolumn-after",
				"table#removecolumn",
				"-",
				"table#insertrow-before",
				"table#insertrow-after",
				"table#removerow",
				"-",
				"table#mergecells-right",
				"table#mergecells-down",
				"table#mergecells",
				"table#splitcell-horizontal",
				"table#splitcell-vertical",
				"-",
				"table#selectrow",
				"table#selectcolumn",
				"-",
				"table#ensureparagraph",
				"-",
				"table#modifytableandcell",
				"table#removetable",
				"-",
				"undo#undo",
				"undo#redo",
				"-",
				"table#exitTableEditing",
				"-"
			]
		}
	}
}

Different UI settings are used for the inline mode and full-screen mode. The toolbar property is used to specify the buttons of the toolbar.

For example, if the button is itself a feature (e.g. Bold), it is specified as 'PluginName#FeatureName' (e.g. links#modifylink).

If the button is a popover (containing some features of a plugin), it is specified as '#PluginName' (e.g. #format).

Separators ( | ) between a group of buttons can be specified with '-'.

The popover node under inline/fullscreen contains a list of the popovers being used. Each child node under the 'popovers' node is named after the plugin (e.g. format). It has a property 'items' containing a list of features of the plugin (e.g. format#bold).

Overriding Default Features

In the standard Text component, AEM activates certain plugins and features as defaults, without them being explicitly defined (your site-specific components might set other defaults).

If you explicitly define such a plugin and its features, then your definition will override the defaults.

If for any reason you want to disable all features of a plugin that is activated per default, you can explicitly define the property features as String[] (i.e. setting the Type to String and selecting the Multi button in CRXDE Lite) with an empty list as the value.

Configuring Other Functionality of the RTE

Note:

This section details configuration of a subset of the RTE functionality.

Further options are available and can be configured using similar methods.

Styles (Text)

Styles affect the appearance of a portion of text, from a single character upwards. They are based on CSS classes (already existing in your CSS stylesheet); as they enclose a portion of text within span tags using the class attribute to reference the CSS class. For example:

    <span class=monospaced>Monospaced Text Here</span>

To enable styles for selection in the dialog you:

Note:

When the styles plugin is enabled there are no default styles available.

The drop-down list is empty until you specify which styles should be made available.

Note:

These procedures cover all steps needed for the first time you configure the availability of styles for selection.

If this has already been configured and you simply want to extend the list of styles available you will only need to perform certain steps:

Enabling the Style Drop-down Selector

This is done by enabling the styles plugin:

  1. Within your component definition create the nodes:

        <rtePlugins-node>/styles

    See Activating a Plugin for full details.

  2. Create the features property on the styles node:

    • Name features
    • Type String
    • Value * (asterisk)
  3. Save all changes.

Note:

Once the styles plugin is enabled you will see the Style drop-down selector in the edit dialog. However, as there are no default styles it will be either deactivated or empty.

Specifying the Location of Your Stylesheet

Then, specify the location(s) of the stylesheet(s) you want to reference:

  1. Navigate to the root node of your text component; for example:

        /apps/<myProject>/components/text

  2. Add the property externalStyleSheets to the parent node of <rtePlugins-node>:

    • Name externalStyleSheets
    • Type String[] (multi-string; click Multi in CRXDE)
    • Value(s) The path and filename of every stylesheet you want to include.
      • Use repository paths e.g. /etc/designs/geometrixx/static.css

    Note:

    You can add references to additional stylesheets at any later time.

  3. Save all changes.

Note:

When using RTE in a dialog (Editing in a Dialog - classic UI) You may want to specify stylesheets that are optimized for rich text editing. Due to technical restrictions the CSS context is lost in the editor, so you may want to emulate this context to improve the WYSIWYG experience.

The Rich Text Editor uses a container DOM element with an ID of CQrte which may be used to provide different styles for viewing and editing:

#CQ td {
    // defines the style for viewing
}

#CQrte td {
    // defines the style for editing
}

Specifying the Styles Available in the Drop-Down List

Finally, you need to specify the individual styles that can be selected from the Style drop down list in the editor:

  1. Within your component definition navigate to the node:

        <rtePlugins-node>/styles

    (As created in Enabling the Style Drop-down Selector).

  2. Under the node styles, create a new node (also called styles) to hold the list being made available:

    • Name styles
    • Type cq:WidgetCollection
  3. Create a new node under the styles node to represent an individual style:

    • Name, you can specify the name, but it should be suitable for the style
    • Type nt:unstructured
  4. Add the property cssName to this node to reference the CSS class:

    • Name cssName
    • Type String
    • Value The name of the CSS class (without a preceding '.'; e.g. cssClass instead of .cssClass)
  5. Add the property text to the same node; this defines the text shown in the selection box:

    • Name text
    • Type String
    • Value Description of the style; will appear in the Style drop down selection box.
  6. Save the changes.

  7. Repeat steps 3 to 6 for each style required.

Note:

Steps 3 - 6 can be used at a later time to add additional styles.

Paragraph Formats

Paragraph formats determine the paragraph type by assigning the correct block tag. The author can select and assign them using the Format selector.

Note:

Example block tags include (amongst others):

  • the standard paragraph <p>
  • headlines <h1>, <h2>, <h3>

Caution:

This plugin is not suitable for blocks that imply a complex structure, such as lists or tables.

All text entered is placed within a block tag, the default being <p>. By enabling the paraformat plugin, you specify additional block tags that can be assigned to paragraphs, using a drop-down selection list.

To add a new paragraph format you:

Note:

These procedures cover all steps needed for the first time you configure the availability of paragraph formats for selection.

If this has already been configured and you simply want to extend the list available you will only need to perform certain steps.

Enabling the Format Drop-down Selector

First enable the paraformat plugin:

  1. Within your component definition create the nodes:

        <rtePlugins-node>/paraformat

    See Activating a Plugin for full details.

  2. Create the features property on the paraformat node:

    • Name features
    • Type String
    • Value * (asterisk)

Note:

If no further configuration is made on the plugin, the following default formats will be enabled.

  • Paragraph (<p>)
  • Heading 1 (<h1>)
  • Heading 2 (<h2>)
  • Heading 3 (<h3>)

Specifying Paragraph Formats Available in the Drop-Down List

Paragraph formats may be made available for selection by:

  1. Within your component definition navigate to the node:

        <rtePlugins-node>/paraformat

    (As created in Enabling the Format Drop-down Selector).

  2. Under the paraformat node create a new node, to hold the list of formats:

    • Name formats
    • Type cq:WidgetCollection
  3. Create a new node under the formats node, this holds details for an individual format:

    • Name, you can specify the name, but it should be suitable for the format (for example, myparagraph, myheading1).
    • Type nt:unstructured
  4. To this node, add the property to define the block tag used:

    • Name tag
    • Type String
    • Value The block tag for the format; for example: p, h1, h2, etc.
                You do not need to enter the delimiting angle-brackets.
  5. To the same node add another property, for descriptive text to appear in the drop-down list:

    • Name description
    • Type String
    • Value The descriptive text for this format; for example, Paragraph, Heading 1, Heading 2, etc. This text will be shown in the Format selection list.
  6. Save the changes.

  7. Repeat steps 3 to 6 for each format required.

Note:

Steps 3 - 6 can be used at a later time to add additional paragraph formats.

Caution:

The default formats (<p>, <h1>, <h2> and <h3>) will be removed if you define custom formats (as specified above).

As <p> is the default format you must recreate this format.

The same applies to any formats that have already been used in existing content.

Special Characters

In a standard AEM installation, when the misctools plugin is enabled for special characters (specialchars) a default selection is immediately available for use; for example, the copyright and trademark symbols.

You can configure the RTE to make your own selection of characters available; either by defining distinct characters, or an entire sequence.

Caution:

Adding your own special characters will override the default selection.

If required, you will need to (re)define these within your own selection.

Defining a Single Character

  1. Within your component navigate to the node:

        <rtePlugins-node>/misctools

    Create these nodes if they do not already exist. See Activating a Plugin for full details.

  2. Create the features property on the misctools node:

    • Name features
    • Type String[]
    • Value specialchars
                (or String / * if applying all features for this plugin)
  3. Under misctools create a node to hold the special character configurations:

    • Name specialCharsConfig
    • Type nt:unstructured
  4. Under specialCharsConfig create another node to hold the list of characters:

    • Name chars
    • Type nt:unstructured
  5. Under chars add a new node to hold an individual character definition:

    • Name you can specify the name, but it should reflect the character; for example, half.
    • Type nt:unstructured
  6. To this node add the following property:

    • Name entity
    • Type String
    • Value the HTML representation of the required character; for example, &189; for the fraction one half.
  7. Save the changes.

    In CRXDE, once the property is saved the character represented will be shown. For example, for the fraction "half":

    chlimage_1

Note:

Steps 5 - 9 can be used at a later time to extend the special characters available.

Defining a Range of Characters

You can also add a complete sequence of characters:

  1. Use steps 1 to 3 from Defining a Single Character.

  2. Under chars add a new node to hold the definition of the character range:

    • Name you can specify the name, but it should reflect the character range; for example, pencils.
    • Type nt:unstructured
  3. Under this node (named according to your special character range) add the following two properties:

    • Name rangeStart
      Type Long
      Value the Unicode representation (decimal) of the first character in the range
    • Name rangeEnd
      Type Long
      Value the Unicode representation (decimal) of the last character in the range
  4. Save the changes.

    For example, defining a range from 9998 - 10000:

    chlimage_1

    Provides you with the following characters:

Note:

Steps 2 - 4 can be used at a later time to extend the special characters available.

Styles (Tables and Table Cells)

As well as defining styles to be used on the normal text, styles (a separate set) can also be defined for either an entire table, or for the individual cells. These will be available from the Style selector box in either the Cell properties or Table properties dialog:

Note:

These styles will only be available when editing a table within a Text component (or derivative), not the standard Table component.

Note:

Currently, you can define styles for tables and cells in Classic-UI only.

  1. Within your component navigate to the node:

        <rtePlugins-node>/table

    Create these nodes if they do not already exist. See Activating a Plugin for full details.

  2. Create the features property on the table node:

    • Name features
    • Type String
    • Value *

    Note:

    If you do not want to enable all table features you can create the features property as:

    • Type String[]
    • Value(s) one, or both, of the following, as required:
      • table to allow the editing of table properties; including the styles
      • cellprops to allow the editing of cell properties; including the styles

  3. You need to define the location of your CSS stylesheets so that they can be referenced.

    See Specifying the Location of Your Stylesheet as this is the same as when defining styles for text (it might have been defined already if other styles have been defined).

  4. Under the table node create the following new nodes (as required):

    • To define styles for the entire table (available under Table properties):
      • Name tableStyles
      • Type cq:WidgetCollection
    • To define styles for the individual cells (available under Cell properties):
      • Name cellStyles
      • Type cq:WidgetCollection
  5. Create a new node (under the tableStyles or cellStyles node as appropriate) to represent an individual style:

    • Name  you can specify the name, but it should reflect the style.
    • Type nt:unstructured
  6. On this node create the properties:

    • To define the CSS style to be referenced
      • Name cssName
      • Type String
      • Value the name of the CSS class (without a preceding '.'; e.g. cssClass instead of .cssClass)
    • To define a descriptive text to appear in the drop-down selector
      • Name text
      • Type String
      • Value the text to appear in the selection list
  7. Save all changes.

  8. Repeat steps 5 to 7 for each style required.

Hidden Headers (Tables)

Sometimes, you may create data tables without visual text in a column header assuming that the header's purpose is implied by the visual relationship of the column with other columns. In this case, it is necessary to provide hidden inner text within the cell in the header cell to allow screen readers and other assistive technologies to help differently-abled users understand the purpose of the column.

To enhance accessibility in such scenarios, RTE supports hidden header cells. In addition, it provides configuration settings related to hidden headers in tables. These settings let you apply CSS styles on hidden headers in edit and preview modes. To help authors identify hidden headers in the edit mode, include the following parameters in your code:

  • hiddenHeaderEditingCSS: Specifies the name of the CSS class that is applied on the hidden-header cell, when RTE is edited.
  • hiddenHeaderEditingStyle: Specifies a Style string that is applied on the hidden-header cell when RTE is edited.

If you specify both the CSS and the Style string in code, the CSS class takes precedence over the style string and may overwrite any configuration changes the Style string makes.

To help authors apply CSS on hidden headers in the preview mode, you can include the following parameters in your code:

  • hiddenHeaderClassName: Specifies the name of the CSS class that will be applied on the hidden header cell in preview mode.
  • hiddenHeaderStyle: Specifies a Style string that is applied on the hidden-header cell in preview mode.

If you specify both the CSS and the Style string in code, the CSS class takes precedence over the style string and may overwrite any configuration changes the Style string makes.

Adding Dictionaries for the Spell Checker

When the spellcheck plugin is activated, the RTE uses dictionaries for each appropriate language. These are then selected according to the language of the website by taking either the language property of the subtree or extracting the language from the URL; for example. the /en/ branch will be checked as english, the /de/ branch as german.

Note:

The message "Spell checking failed." is seen if a check is tried for a language that is not installed.

A standard AEM installation includes the dictionaries for:

  • American English (en_us)
  • British English (en_gb)

Note:

These standard dictionaries can be found under
    /libs/cq/spellchecker/dictionaries
Together with the appropriate README files.

These files should not be changed.

However, you can add more dictionaries as required:

  1. Select your required language and download the zip file with the spelling definitions.

    Caution:

    Only dictionaries in the MySpell format for OpenOffice.org v2.0.1 or earlier, are supported.

    As the dictionaries are now archive files, it is recommended that you fully test after downloading.

  2. Extract the contents of the zip file on your local system.

  3. Locate the files:

    • *.aff
    • *.dic

    Note:

    The file name must be fully lowercase. Change from upper to lowercase if necessary.

    For example, de_de.aff and de_de.dic.

  4. Load the *.aff and *.dic files into the repository at:

    /apps/cq/spellchecker/dictionaries

Note:

The AEM RTE spell checker is based on the MySpell spell checker.

For further information please contact the Support or Sales team.

History Size for Undo/Redo

The RTE offers authors the opportunity to undo and redo the last editing steps if necessary. For a standard installation, a default of 50 steps are "remembered" in the history. You can change this value as required:

  1. Within your component navigate to the node:

        <rtePlugins-node>/undo

    Create these nodes if they do not already exist. See Activating a Plugin for full details.

  2. On the undo node create the property:

    • Name maxUndoSteps
    • Type Long
    • Value the number of undo steps you want saved in the history.
      • The default is 50.
      • Use 0 to disable undo/redo completely.
  3. Save the changes.

Default Paste Mode

A default paste mode is available to the author by using Crtl-V. This can be configured to be one of three values:

  • browser
    Use the browser's paste implementation; not recommended as it may introduce unwanted markup.
  • plaintext
    Insert only plain text.
  • wordhtml (default)
    Microsoft-Word compatible HTML pasting (unsuitable markup is removed automatically).

To apply a default paste mode:

  1. Within your component navigate to the node:

        <rtePlugins-node>/edit

    Create these nodes if they do not already exist. See Activating a Plugin for full details.

  2. On the edit node create the property:

    • Name defaultPasteMode
    • Type String
    • Value the paste mode required (browser, plaintext or wordhtml).

Tab Size

When the tab character is pressed within any text a predefined number of spaces is inserted; by default this is three non-breaking spaces and one space.

To define the tab size:

  1. Within your component navigate to the node:

        <rtePlugins-node>/keys

    Create these nodes if they do not already exist. See Activating a Plugin for full details.

  2. On the keys node create the property:

    • Name tabSize
    • Type String
    • Value the number of space characters to be used for the tabulator
  3. Save the changes.

Indent Margin

When indentation is enabled (default) you can define the size of indent:

Note:

This indent size is only applied to paragraphs (blocks) of text; it does not affect the indentation of actual lists.

  1. Within your component navigate to the node:

        <rtePlugins-node>/lists

    Create these nodes if they do not already exist. See Activating a Plugin for full details.

  2. On the lists node create the identSize parameter:

    • Name: identSize
    • Type: Long
    • Value: number of pixels required for the indent margin

Height of Editable Space

Note:

This is only applicable when using the RTE in a dialog (not in-place editing - classic UI).

You can define the height of the editable space shown within the component dialog:

  1. On the ../items/text node in the dialog definition for the component, create a new property:

    • Name  height
    • Type Long
    • Value the height of the edit canvas in pixels

    Note:

    This does not change the height of the dialog window.

  2. Save the changes.

Formats Allowed when Pasting Content

The paste-as-Microsoft-Word (paste-wordhtml) mode can be further configured so that you can explicitly define which styles are allowed when pasting into AEM from another program, such as Microsoft Word.

For example, if only bold formats and lists should be allowed when pasting into AEM, you can filter out the other formats. This is called configurable paste filtering.

This can be done for both:

For links you can also define the protocols that are automatically accepted.

Formats Allowed when Pasting Text

To configure which formats are allowed when pasting text into AEM from another program:

  1. Within your component navigate to the node:

        <rtePlugins-node>/edit

    Create these nodes if they do not already exist. See Activating a Plugin for full details.

  2. Create a new node under the edit node to hold the HTML paste rules:

    • Name htmlPasteRules
    • Type nt:unstructured
  3. Create a new node under htmlPasteRules, to hold details of the basic formats allowed:

    • Name allowBasics
    • Type nt:unstructured
  4. To control the individual formats accepted, create one, or more, of the following properties on the allowBasics node:

    • Name bold
    • Name italic
    • Name underline
    • Name anchor (for both links and named anchors)
    • Name image

    All properties are of Type boolean, so in the appropriate Value you can either select or remove the checkmark to enable/disable the functionality.

    Note:

    If not explicitly defined the default value of true is used and the format accepted.

  5. Other formats can also be defined using a range of other properties or nodes, also applied to the htmlPasteRules node:

    Property Type Description
    allowBlockTags String[]

    Defines the list of block tags allowed.

    Possible block tags include (amongst others):

    • headlines (h1, h2, h3)
    • paragraphs (p)
    • lists (ol, ul)
    • tables (table)
    fallbackBlockTag String

    Defines the block tag used for any blocks having a block tag not included in allowBlockTags.

    p should suffice in most cases.

    table nt:unstructured

    Defines the behavior when pasting tables.

    This node must have the property allow (type Boolean) to define whether pasting tables is allowed.

    If allow is set to false, you must specify the property ignoreMode (type String) to define how pasted table content is handled. Valid values for ignoreMode are:

    • remove: Removes table content.
    • paragraph: Turns table cells into paragraphs.
    list nt:unstructured

    Defines the behavior when pasting lists.

    Must have the property allow (type Boolean) to define whether the pasting of lists is allowed.

    If allow is set to false, you must specify the property ignoreMode (type String) to define how to handle any list content pasted. Valid values for ignoreMode are:

    • remove: Removes list content.
    • paragraph: Turns list items into paragraphs.

    Example of a valid htmlPasteRules structure:

    "htmlPasteRules": {
        "allowBasics": {
            "italic": true,
            "link": true
        },
        "allowBlockTags": [
            "p", "h1", "h2", "h3"
        ],
        "list": {
            "allow": false,
            "ignoreMode": "paragraph"
        },
        "table": {
            "allow": true,
            "ignoreMode": "paragraph"
        }
    }
  6. Save all changes.

When pasting links into AEM you can define both:

  • The CSS styles to be used
  • The protocols automatically accepted

To configure how links are pasted into AEM from another program you must define HTML rules:

Note:

See Further Information for more details about HTML rules if required.

  1. Using CRXDE Lite, locate the text component for your project.

  2. Create a new node at the same level as <rtePlugins-node> (i.e. create the node under the parent node of <rtePlugins-node>):

    • Name htmlRules
    • Type nt:unstructured

    Note:

    The ../items/text node has the property:

    • Name xtype
    • Type String
    • Value richtext

    The location of the ../items/text node can vary, depending on the structure of your dialog; two examples include:

    • /apps/<myProject>/components/text/dialog/items/text
    • /apps/<myProject>/components/text/dialog/items/panel/items/text

  3. Under htmlRules, create a new node::

    • Name links
    • Type nt:unstructured
  4. Under the links node define the properties as required:

    • CSS style for internal links:
      • Name cssInternal
      • Type String
      • Value the name of the CSS class (without a preceding '.'; e.g. cssClass instead of .cssClass)
    • CSS style for external links
      • Name cssExternal
      • Type String
      • Value the name of the CSS class (without a preceding '.'; e.g. cssClass instead of .cssClass)
    • Array of valid protocols (including http://, https:// file://, mailto:, amongst others)
      • Name protocols
      • Type String[]
      • Value(s) one, or more, protocols
    • defaultProtocol (property of type String): Protocol to be used if the user did not specify one explicitly.
      • Name defaultProtocol
      • Type String
      • Value(s) one, or more, default protocols
    • Definition of how to handle the target attribute of a link. Create a new node:
      • Name targetConfig
      • Type nt:unstructured
      On the node targetConfig: define the required properties:
      • Specify the target mode:
        • Name mode
        • Type String)
        • Value(s) :
          • auto: means that an automatic target is chosen
            (specified by the targetExternal property for external links or targetInternal for internal links). 
          • manual: not applicable in this context
          • blank: not applicable in this context
      • The target for internal links:
        • Name targetInternal
        • Type String
        • Value the target for internal links (only use when the mode is auto)
      • The target for external links:
        • Name targetExternal
        • Type String
        • Value the target for external links (only used when the mode is auto).
  5. Save all changes.

Further Information

Please see the AEM Widget API documentation for more information about configuring the RTE.

Caution:

This is designed as reference documentation for developers so does not provide detailed step-by-step instructions.

In particular, to see the plugins and related options available:

  • The CQ.form.RichText component provides a form field for editing styled text information (rich text):
    • see the Config Options for all parameters available for the rich text form
  • The RichText component provides a wide range of functionality using plugins listed under CQ.form.rte.plugins.Plugin (also listed above under Plugins and their Features). For each plugin:
    • see the Features for details of functionality that can be enabled (or disabled)
    • See the Config Options for all parameters available for detailed configuration of the appropriate plugin
  • More information about HMTL Rules for links is also available.

Note:

If an arrow head is shown by the definition a feature or configuration option, then this entry can be expanded to show more information.

These can be used to extend and customize your own RTE, for example:

  • To list the anchors available in the page when creating a link you can provide your own implementation of the LinkPlugin.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy