Configure the Rich Text Editor plug-ins configure-the-rich-text-editor-plug-ins

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

Create the parent node of <rtePlugins-node> if it does not exist, before configuring any RTE plug-ins:

• Depending on your component, the parent nodes are:

  • config: .../text/cq:editConfig/cq:inplaceEditing/config
  • an alternative configuration node: .../text/cq:editConfig/cq:inplaceEditing/inplaceEditingTextConfig
  • text: .../text/dialog/items/tab1/items/text

• Are of type: jcr:primaryType cq:Widget

• Both have the following property:

  • Name name
  • Type String
  • Value ./text

Depending on the interface you are configuring for, create a node <rtePlugins-node>, if it does not exist:

• Name rtePlugins
• Type nt:unstructured

Below this, create a node for each plug-in that you want to activate:

• Type nt:unstructured
• Name the Plug-in ID of the plug-in required

In your component, navigate to <rtePlugins-node>/edit node. Create the nodes if the nodes do not exist. For more information, see activate a plug-in.

In the edit node create a property using the following details:

• Name defaultPasteMode
• Type String
• Value is one of the required paste mode from browser, plaintext, or wordhtml modes.

In your component, navigate to the node <rtePlugins-node>/edit. Create the nodes if the node do not exist. For more details, see activate a plug-in.

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

• Name htmlPasteRules
• Type nt:unstructured

Create a node under htmlPasteRules, to hold details of the basic formats allowed:

• Name allowBasics
• Type nt:unstructured

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 check mark to enable or disable the functionality.

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

In your component, navigate to the node <rtePlugins-node>/styles. Create the nodes if the nodes do not exist. For more details, see activate a plug-in.

Create the features property on the styles node:

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

Save all changes.

Navigate to the root node of your text component, for example, /apps/<myProject>/components/text.

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

• Name externalStyleSheets
• Type String[] (multi-string; click Multi in CRXDE)
• Values The path and filename of every style sheet you want to include. Use repository paths.

Save all changes.

In the component definition, navigate to the node <rtePlugins-node>/styles, as created in Enabling the style drop-down selector.

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

• Name styles
• Type cq:WidgetCollection

Create a 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

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 ‘.’; for example, cssClass instead of .cssClass)

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; appears in the Style drop-down selection box.

Save the changes.

Repeat the above steps for each required style.

Create a node under the styles node. See specify a style.

• Name: jpn-word-wrap
• Type: nt:unstructure

Add the property cssName to the node to reference the CSS class. This class name is a reserved name for Japanese word wrap feature.

• Name: cssName
• Type: String
• Value: jpn-word-wrap (without a preceding .)

Add the property text to the same node. The value is the name of the style that the authors see when selecting the style.

• Name: text
  *Type: String
• Value: Japanese word-wrap

Create a style sheet and specify its path. See specify location of stylesheet. Add the following contents to the stylesheet. Change the background color as desired.

.text span.jpn-word-wrap {
    display:inline-block;
}
.is-edited span.jpn-word-wrap {
    background-color: #ffddff;
}

In your component, navigate to the node <rtePlugins-node>/paraformat. Create the nodes if the nodes do not exist. For more details, see activate a plug-in.

Create the features property on the paraformat node:

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

In the component definition, navigate to the node <rtePlugins-node>/paraformat, as created in Enabling the format drop-down selector.

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

• Name formats
• Type cq:WidgetCollection

Create a 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

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, and so on.

  You do not need to enter the delimiting angle-brackets.

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, and so on. This text is displayed in the Format selection list.

Save the changes.

Repeat the steps for each required format.

In your component, navigate to the node <rtePlugins-node>/misctools. Create the nodes if the nodes do not exist. For more details, see activate a plug-in.

Create the features property on the misctools node:

• Name features

• Type String[]

• Value specialchars

  (or String / * if applying all features for this plug-in)

Under misctools create a node to hold the special character configurations:

• Name specialCharsConfig
• Type nt:unstructured

Under specialCharsConfig create another node to hold the list of characters:

• Name chars
• Type nt:unstructured

Under chars add a 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

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.

Save the changes.

Use steps 1 to 3 from Define a single character.

Under chars add a 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

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

Save the changes.

For example, define a range from 9998 - 10000 provides you with the following characters.

Figure: In CRXDE, define a range of characters to be made available in RTE

Within your component navigate to the node <rtePlugins-node>/table. Create the nodes if the nodes do not exist. For more details, see activate a plug-in.

Create the features property on the table node:

• Name features
• Type String
• Value *

Define the location of CSS style sheets to refer those. See Specifying the location of your style sheet as this is the same as when defining styles for text. The location may be defined if you defined other styles.

Under the table node create the following 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

Create a 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

On this node create the properties:

• To define the CSS style that is referenced,

  • Name cssName
  • Type String
  • Value the name of the CSS class (without a preceding ., for example, cssClass instead of .cssClass)

• To define a descriptive text to appear in the pop-up selector,

  • Name text
  • Type String
  • Value the text to appear in the selection list

Save all changes.

Navigate to the page https://extensions.openoffice.org/.

Select the required language and download the ZIP file with the spelling definitions. Extract the contents of the archive on your file system.

Locate the .aff and .dic files. Keep filename in lowercase. For example, de_de.aff and de_de.dic.

Load the .aff and .dic files in the repository at /apps/cq/spellchecker/dictionaries.

Within your component navigate to the node <rtePlugins-node>/undo. Create these nodes if they do not exist. For more details, see activate a plug-in.

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 completely disable undo/redo.

Save the changes.

In your component, navigate to the node <rtePlugins-node>/keys. Create the nodes if the nodes do not exist. For more details, see activate a plug-in.

On the keys node create the property:

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

Save the changes.

Within your component navigate to the node <rtePlugins-node>/lists. Create these nodes if they do not exist. For more details, see activate a plug-in.

On the lists node create the identSize parameter:

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

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

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

Save the changes.

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

Create a node at the same level as <rtePlugins-node>, that is, create the node under the parent node of <rtePlugins-node>:

• Name htmlRules
• Type nt:unstructured

Under htmlRules, create a node.

• Name links
• Type nt:unstructured

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 ‘.’; for example, cssClass instead of .cssClass)

• CSS style for external links

  • Name cssExternal
  • Type String
  • Value the name of the CSS class (without a preceding ‘.’; for example, cssClass instead of .cssClass)

• Array of valid protocols including https://, https://, file://, mailto:, and 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 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).

Save all changes.