Rich Text Editor Page 1 / Overview

Rich Text Editor
Rich Text Editor
Overview / Adobe Experience Manager / Adobe Experience Manager 6.0 / Authoring / Authoring Pages /
The Rich Text Editor is a basic building block for inputting textual content into CQ. It forms the basis of
various components, including:
•
•
•
Text
Text Image
Table
The Rich Text Editor is available from both UI, though it's look-and-feel is dependent on the UI you are
using:
• Rich Text Editor - Touch-optimized UI
• Rich Text Editor - Classic UI
NOTE
Both offer the same basic range of features, though the following button/feature combinations are
not fully supported with the touch-optimized UI:
• Cut/Copy/Paste; this relates to the RTE-specific buttons, the browser cut/copy/paste
functionality is available when editing
• Image
• Source Edit
• Spelling Checker
• Styles
• Table; the Table component should be used
RICH TEXT EDITOR - TOUCH-OPTIMIZED UI
In-Place Editing - Touch-optimized UI
Selecting a text-based component with a slow double-tap/-click will open in-place editing, which has its own
toolbar. Here you can edit the content and make basic formatting changes:
NOTE
The first tap/click will open the component toolbar.
This toolbar provides:
• Text
This allows you to set Bold, Italic and Underline.
• Alignment
Set the text to left, center or right aligned.
• Lists
With this you can create bulleted or numbered lists, or set the indentation.
• Create a link
• Remove a link
• Full-screen mode
• Close the toolbar
Rich Text Editor - Touch-optimized UI
For text-based components, selecting the full screen mode from the toolbar:
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 1
Created on 2014-10-07
Rich Text Editor
Will open the rich text editor (and will hide the rest of the page content):
This gives you access to all options of your rich text editor (these might vary depending on the
configuration).
RICH TEXT EDITOR - CLASSIC UI
Rich Text Editor - Classic UI
The WYSIWYG editing dialog provides a wide range of functionality:
NOTE
The features available can be configured for individual projects, so might vary for your
installation.
In-Place Editing - Classic UI
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.
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 2
Created on 2014-10-07
Rich Text Editor
NOTE
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.
NOTE
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
Here you can apply formatting to characters you have selected (highlighted); some options also have shortcut keys:
•
•
•
•
•
Bold (Ctrl-B)
Italic (Ctrl-I)
Underline (Ctrl-U)
Subscript
Superscript
All operate as a toggle, so reselection will remove the format.
PREDEFINED STYLES AND FORMATS
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.
NOTE
Style formatting is not available under the touch-optimized UI.
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 3
Created on 2014-10-07
Rich Text Editor
A style can be applied to a specific string (a style correlates to CSS):
Whereas a format is applied to the entire text paragraph (a format is HTML-based):
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:
CAUTION
Do not actually reselect any of the text to which the style has been applied or the icon will be
deactivated.
CUT, COPY, PASTE
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).
NOTE
The RTE-specific Cut/Copy/Paste buttons are not available under the touch-optimized UI.
However, the browser cut/copy/paste functionality is available.
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 4
Created on 2014-10-07
Rich Text Editor
UNDO, REDO
CQ 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.
CAUTION
The history is only held for the current edit session; it is started anew each time you open the
component for editing.
NOTE
50 is the default number of tasks; this may have been changed for your installation.
ALIGNMENT
Your text can be either left, center or right aligned.
INDENTATION
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.
LISTS
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 5
Created on 2014-10-07
Rich Text Editor
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).
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:
A dialog will allow you to specify the target URL; also whether it should be opened in a new window.
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
NOTE
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:
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 6
Created on 2014-10-07
Rich Text Editor
ANCHORS
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.
The anchor is shown when the component is being edited and can now be used within a target for links.
FIND AND REPLACE
CQ 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.
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.
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 7
Created on 2014-10-07
Rich Text Editor
IMAGES
Images can be dragged from the content finder to add them to the text.
NOTE
Images are not supported in the RTE under the touch-optimized UI.
NOTE
CQ also offers specialized components for more detailed image configuration; for example the
Image and Text Image components.
SPELLING CHECKER
The spelling checker will check all the text in the current component.
NOTE
The spell checker is not available in the RTE under the touch-optimized UI.
Any incorrect spellings will be highlighted:
NOTE
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; i.e. the en branch will be
checked for english, the de branch for german.
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 8
Created on 2014-10-07
Rich Text Editor
TABLES
Tables are available both:
1.
As the Table component
NOTE
It is recommended to use the Table component when creating tables in both the touchoptimized and classic UI.
2.
From within the Text component
NOTE
Tables are not available in the RTE in the Text component under the touch-optimized
UI.
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:
NOTE
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
Cell Properties
Add or Delete Rows
Add or Delete Columns
Selecting Entire Rows or Columns
Merge Cells
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 9
Created on 2014-10-07
Rich Text Editor
Split Cells
Nested Tables
Remove Table
Table Properties
The basic properties of the table can be configured, before clicking OK to save:
•
•
•
•
•
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.
NOTE
Width, Height and certain cell properties can be defined in either:
- pixels; for example 400
- percentages; for example 100%
CAUTION
Day strongly recommends that you define a Width for your table.
Cell Properties
The properties of a specific cell, or series of cells, can be configured:
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 10
Created on 2014-10-07
Rich Text Editor
•
•
•
•
•
•
•
•
•
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
Rows can be added either above or below the current row.
The current row can also be deleted.
Add or Delete 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
Selects the entire current row or column. Specific actions (e.g. merge) are then available.
Merge Cells
•
•
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
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
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 11
Created on 2014-10-07
Rich Text Editor
Creating a nested table will create a new, self-contained table within the current cell.
NOTE
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
This will remove the table from within the Text component.
SPECIAL CHARACTERS
Special characters can be made available to your rich text editor; these might vary according to your
installation.
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
The source editing mode allows you to see and edit the underlying HTML of the component.
NOTE
Source editing mode is not available in the RTE under the touch-optimized UI.
So the text:
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 12
Created on 2014-10-07
Rich Text Editor
Will looks as follows in source mode (often the source is much longer, so you will have to scroll):
CAUTION
When leaving source mode CQ makes certain validation checks (for example, ensuring that the
text is correctly contained/nested in blocks). This can result in changes to your edits.
© 2012 Adobe Systems Incorporated.
All rights reserved.
Page 13
Created on 2014-10-07