What is a rich text editor?

0
114

Rich Text editor, sometimes called a WYSIWYG (What You See is What You Get) editor, is the one that appears in areas where text can be entered. You can control the appearance of your text using the Rich Text Editor. It contains the formatting tools and editing icons needed to edit your text. It also provides links to audio, websites, and video, as well as other text documents.

There are instances when pasting text into a Rich Text Editor alters the original format of the text. However, there are also instances when the formatting is preserved, such as alignment. Rich Text Editor has many versions. It has been the building block of much inputting textual content into AEM. It can form the basis of different components such as text, text image, and table. The Rich and Text Editor is dependent on the UI. There are two types of UI that you may be using: (1) Rich Text Editor-Touch-optimized UI and (2) Rich Text Editor – Classic UI. Both of the UI types mentioned above carry the same feature, and the only thing that differentiates them is that the touch-optimized UI does not fully support the image and table feature.

Want to know more about the in-place editing of touch-optimized UI?

chlImage_1

In order for you to edit your content and implement basic formatting charges, select first a text-based component with a slow double-tap or click in the space for in-place editing. The toolbar above provides the following:

  1. Text – This allows you to set your texts into bold, italicize, or underline.
  2. Alignment – This sets your text to the left, center, or even right align.
  3. Lists – For you to further organize your content, you can order them through bullets or using numbered lists. You can also set indentation.
  4. The chain contains the create a link feature.
  5. The next one beside it is the remove a link feature.
  6. You also have the choice to put your editor in full-screen mode.
  7. The big X  is an option if you want to close the toolbar.

If you want to put into full-screen mode the text-based components, just look for this toolbar:

chlImage_1

 The full screen mode will hide the rest of the page content and allows you to see all the options that are in your rich text editor. The options will depend on the configuration.

Want to know more about the classic UI?

The WYSIWYG editor dialog provides support for the various functionalities present in the Rich Text Editor- Classic UI. Moreover, the features available in the interface can be modified depending on your individual projects. Hence, it will vary for your installation.

In-Place Editing-Classic UI

The in-place editing mode provides direct editing for the page that is displayed in the layout of the page. You can simply double-click to modify the in-place editing mode. You can be able to directly edit the text on the page, instead of moving inside a dialog window. Every time you make changed, all the alterations are automatically saved.

CQ55_RTE_InlineEditing

Now that you have a walk-through on the difference between touch-optimized UI and classic UI, here are some of the features of a Rich Text Editor. These are available for both the touch-optimized UI and classic UI.

Formatting of Basic Characters

Bold, Italic, Underline

https://helpx.adobe.com/experience-manager/6-2/sites/authoring/using/rich-text-editor/_jcr_content/main-pars/image_26.img.png/CQ55_RTE_BasicChars.png

Some of the options shown above have their short cut keys:

  • Bold – Ctrl - B
  • Italic – Ctrl - I
  • Underline – Ctrl - U
  • Subscript
  • Superscript

Style and Format

There are also predefined styles and formats in Rich Text editor. Depending on your installation, these predefined styles and formats.

https://helpx.adobe.com/experience-manager/6-2/sites/authoring/using/rich-text-editor/_jcr_content/main-pars/image_0.img.png/CQ55_RTE_StylesParagraph.png

The Style and Format contain drop down lists, and when text is selected, these options can be applied. For touch-optimized UI, only the Format drop down lists is available.

You can also format an entire text paragraph through this one.  The default format is the Paragraph option.

If you wish to remove a style, you may opt to place the cursor within the text over which the style you had previously applied. From there, you can click to remove icon.

Cut, Copy, Paste

https://helpx.adobe.com/experience-manager/6-2/sites/authoring/using/rich-text-editor/_jcr_content/main-pars/image.img.png/CQ55_RTE_CutCopyPaste.png

The standard functions of Cut, Copy and Paste are available on Rich Text Editor also for usage. In order for your formatting to be easier, you may opt to try the following shortcuts:

  • Cut – Ctrl – X
  • Copy – Ctrl – C
  • Paste – Ctrl – V

This is the default option when you are copying text directly from other text applications.

  • Paste as Text

This removes all the styles and formatting applied previously. This only saves the plain text.

  • Paste from Word

This retains some formatting applicable to the Rich Text Editor and converts the content to HTML.

Undo, Redo

https://helpx.adobe.com/experience-manager/6-2/sites/authoring/using/rich-text-editor/_jcr_content/main-pars/image_5.img.png/CQ55_RTE_UndoRedo.png

Good news for you, mate! You can go back to all your previous 50 actions as they are recorded based on chronological order. Rich Text Editor keeps track of all your actions so you can undo and redo them when you want to.

Alignment

https://helpx.adobe.com/experience-manager/6-2/sites/authoring/using/rich-text-editor/_jcr_content/main-pars/image_6.img.png/CQ55_RTE_Alignment.png

You can adjust your text on how you want it to look. You can align it in the left, center, or in the right. Here is an example of the mentioned three options above:

https://helpx.adobe.com/experience-manager/6-2/sites/authoring/using/rich-text-editor/_jcr_content/main-pars/image_17.img.png/CQ55_RTE_Alignment_Use.png

Indentation

You can also adjust the indentation of your paragraph. You can increase it or decrease it according to your preference. If you select your paragraph, it will be indented. The succeeding texts will follow the set level of indentation automatically.

Lists

https://helpx.adobe.com/experience-manager/6-2/sites/authoring/using/rich-text-editor/_jcr_content/main-pars/image_8.img.png/CQ55_RTE_Lists.png

You can create bulleted and numbered lists through Rich Text Editor. You can choose whether the list types and start typing, or you can simply highlight the text you want to convert. Tiu can also create a sublist by applying indentation.

Links

https://helpx.adobe.com/experience-manager/6-2/sites/authoring/using/rich-text-editor/_jcr_content/main-pars/image_9.img.png/CQ55_RTE_Links.png

You can incorporate links to a website in the Rich Text Editor. The first icon puts a link, and the second removes a link in the editing place. This basically links and unlinks the links.

This wraps up our introduction on what a Rich Text Editor is. You can try to apply the information given here by using a Rich Text Editor on your own. Good luck!