Вы находитесь на странице справочной информации о версии:

The Rich Text Editor is a basic building block for inputting textual content into AEM. It forms the basis of various components, including:

  • Text
  • Text Image
  • Table

Rich Text Editor

The WYSIWYG editing dialog provides a wide range of functionality:

CQ55_RTE_BasicChars

Примечание.

The features available can be configured for individual projects, so might vary for your installation.

In-Place Editing

In addition to the dialog based Rich Text Editing mode, AEM also provides the in-place editing mode, which allows direct editing of the text as it is displayed in the layout of the page.

Click twice on a paragraph (a slow double-click) to enter the inplace editing mode (the component border will now be orange).

You will be able to directly edit the text on the page, instead of inside a dialog window. Just make your changes and they will be automatically saved.

cq55_rte_inlineediting

Примечание.

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

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

Currently, the Inplace Editing mode is enabled for page elements generated by the Text and Title components.

Примечание.

The Title component is designed to contain a short text without linebreaks. When editing a title in Inplace Editing Mode, entering a linebreak will open a new Text component below the title.

Features of the Rich Text Editor

The Rich Text Editor provides a range of featues, these depend on the configuration of the individual component. The features are available for both the touch-optimized and classic UI.

Basic Character Formats

CQ55_RTE_BasicChars

Here you can apply formatting to characters you have selected (highlighted); some options also have short-cut keys:

  • Bold (Ctrl-B)
  • Italic (Ctrl-I)
  • Underline (Ctrl-U)
  • Subscript
  • Superscript
CQ55_RTE_BasicChars_Use

All operate as a toggle, so reselection will remove the format.

Predefined Styles and Formats

CQ55_RTE_StylesParagraph

Your installation can include predefined styles and formats. These are available with the Style and Format drop down lists and can be applied to text that you have selected.

A style can be applied to a specific string (a style correlates to CSS):

CQ55_RTE_Styles_Use

Whereas a format is applied to the entire text paragraph (a format is HTML-based):

CQ55_RTE_Paragraph_Use

A specific format can only be changed (the default is Paragraph).

A style can be removed; place the cursor within the text to which the style has been applied and click on the remove icon:

Внимание.

Do not actually reselect any of the text to which the style has been applied or the icon will be deactivated.

Cut, Copy, Paste

CQ55_RTE_CutCopyPaste

The standard functions of Cut and Copy are available. Several flavors of Paste are provided to cater for differing formats.

  • Cut (Ctrl-X)
  • Copy (Ctrl-C)
  • Paste
    This is the default paste mechanism (Ctrl-V) for the component; when installed out-of-the-box this is configured to be "Paste from Word".
  • Paste as Text
    Strips all styles and formatting to paste only the plain text.
  • Paste from Word
    This pastes the content as HTML (with some necessary reformatting).

Undo, Redo

CQ55_RTE_UndoRedo

AEM keeps a record of your last 50 actions in the current component, held in chronological order. These actions can be undone (and then redone) in strict order, if required.

Внимание.

The history is only held for the current edit session. It is restarted each time you open the component for editing.

Примечание.

Fifty is the default number of tasks. This may be different for your installation.

Alignment

CQ55_RTE_Alignment

Your text can be either left, center or right aligned.

CQ55_RTE_Alignment_Use

Indentation

CQ55_RTE_Indent

The indentation of a paragraph can be increased, or decreased. The selected paragraph will be indented, any new text entered will retain the current level of indentation.

CQ55_RTE_Indent_Use

Lists

CQ55_RTE_Lists

Both bulleted and numbered lists can be created within your text. Either select the list type and start typing or highlight the text to be converted. In both cases a line-feed will start a new list item.

Nested lists can be achieved by indenting one or more list items.

The style of a list can be changed by simply positioning the cursor within the list, then selecting the other style. A sublist can also have a different style to the containing list. This can be applied once the sublist has been created (by indentation).

CQ55_RTE_Lists_Use
CQ55_RTE_Links

A link to an URL (either within your website or an external location) is generated by highlighting the required text then clicking the Hyperlink icon:

chlimage_1

A dialog will allow you to specify the target URL; also whether it should be opened in a new window.

CQ55_RTE_Link_Use

You can:

  • type in a URI directly
  • use the site map to select a page within your website
  • enter the URI, then append the target anchor; e.g. www.TargetUri.org#AnchorName
  • enter an anchor only (to reference "the current page"); e.g. #anchor
  • search for a page in the content finder, then drag and drop the page icon into the Hyperlink dialog

Примечание.

The URI can be prepended with any of the protocols configured for your installation. In a standard installation these are http://, ftp://, and mailto:. Protocols not configured for your installation will be rejected and marked as invalid.


To break the link position the cursor anywhere within the link text and click the Unlink icon:

chlimage_1

Anchors

CQ55_RTE_Anchor

An anchor can be created anywhere within the text by either positioning the cursor, or selecting some text. Then click on the Anchor icon to open the dialog.

Enter the name of the anchor then click OK to save.

CQ55_RTE_Anchor_Use

The anchor is shown when the component is being edited and can now be used within a target for links.

chlimage_1

Find and Replace

CQ55_RTE_FindReplace

AEM provides both a Find and a Replace (find and replace) function.

Both have a Find next button to search the open component for the text specified. You can also specify whether you need the case (upper/lower) to be matched.

The search will always start from the current cursor position within the text. When the end of the component is reached a message will inform you that the next search operation will start from the top.

CQ55_RTE_Find_Use

The Replace option allows you to Find, then Replace an individual instance with the specified text, or to Replace all instances in the current component.

CQ55_RTE_FindReplace_Use

Images

Images can be dragged from the content finder to add them to the text.

CQ55_RTE_Image_Use

Примечание.

AEM also offers specialized components for more detailed image configuration. For example the Image and Text Image components are available. 

Spelling Checker

CQ55_RTE_SpellChecker

The spelling checker will check all the text in the current component.  

Any incorrect spellings will be highlighted:

CQ55_RTE_Spellchecker_Use

Примечание.

The spelling checker will operate in 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 for English and the de branch for German.

Tables

Tables are available both:

  • As the Table component

    chlimage_1
  • From within the Text component

    chlimage_1

    Примечание.

    Although tables are available in the RTE, it is recommended to use the Table component when creating tables.

In both the Text and Table components table functionality is available via the context menu (usually the right-mouse-button) clicked within the table; for example:

CQ55_RTE_TableMenu

Примечание.

In the Table component, a specialized toolbar is also available, including various standard rich text editor functions, together with a subset of the table-specific functions.

The table specific functions are:

Table Properties

CQ55_RTE_TableProperties_Icon

The basic properties of the table can be configured, before clicking OK to save:

CQ55_RTE_TableProperties_Dialog
  • Width
    The total width of the table.
  • Height
    The total height of the table.
  • Border
    The size of the table border.
  • Cell padding
    This defines the white space between the cell content and its borders.
  • Cell spacing
    This defines the distance between the cells.

Примечание.

Width, Height and certain cell properties can be defined in either:
- pixels
- percentages

Внимание.

Adobe strongly recommends that you define a Width for your table.

Cell Properties

CQ55_RTE_CellProperties_Icon

The properties of a specific cell, or series of cells, can be configured:

CQ55_RTE_CellProperties_Dialog
  • Width
  • Height
  • Horizontal Align
    Left, Center or Right
  • Vertical Align
    Top, Middle, Bottom or Baseline
  • Cell type
    Data or Header
  • Apply to:
    • Single cell
    • Entire row
    • Entire column

Add or Delete Rows

CQ55_RTE_Rows

Rows can be added either above or below the current row.

The current row can also be deleted.

Add or Delete Columns

CQ55_RTE_Columns

Columns can be added either to the left or right of the current column.

The current column can also be deleted.

Selecting Entire Rows or Columns

chlimage_1

Selects the entire current row or column. Specific actions (e.g. merge) are then available.

Merge Cells

CQ55_RTE_CellMerge
CQ55_RTE_CellMerge
  • If you have selected a group of cells you can merge these into one.
  • If you have have only one cell selected then you can merge it with the cell to either the right or below.

Split Cells

CQ55_RTE_CellSplit

Select a single cell to split it:

  • Splitting a cell horizontally will generate a new cell to the right of the current cell, within the current column.
  • Splitting a cell vertically will generate a new cell underneath the current cell, but within the current row.

Creating Nested Tables

chlimage_1

Creating a nested table will create a new, self-contained table within the current cell.

Примечание.

Certain additional behavior is browser dependent:

  • Windows IE: Use Ctrl+primary-mouse-button-click (usually left) to select multiple cells.
  • Firefox: Drag the mouse to select a cell range.

Remove Table

CQ55_RTE_RemoveTable

This will remove the table from within the Text component.

Special Characters

CQ55_RTE_SpecialChars

Special characters can be made available to your rich text editor; these might vary according to your installation.

CQ55_RTE_SpecialChars_Use

Use mouseover to see a magnified version of the character, then click for it to be included at the current location in your text.

Source Editing Mode

CQ55_RTE_SourceEdit

The source editing mode allows you to see and edit the underlying HTML of the component.

So the text:

CQ55_RTE_SourceMode_1

Will looks as follows in source mode (often the source is much longer, so you will have to scroll):

CQ55_RTE_SourceMode_2

Внимание.

When leaving source mode, AEM makes certain validation checks (for example, ensuring that the text is correctly contained/nested in blocks). This can result in changes to your edits.

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет