WYSIWYG (‘what you see is what you get’) Editor is an add-in used in the backend for content editing. It allows people who don’t work with HTML to edit content. Besides, it speeds up content publishing as there is no need to put in all the tags and attributes. By using the editor, you can see how the updates will look like while creating the frontend of a Magento 2 website.

Given you seek for more custom options for your blog layout, try this GraphQL-read-compatible M2 Blog Pro extension. It comes with advanced SEO options, 3D tags and advanced categories, a customizable layout and, what's most important, AMP for smooth UX on any mobile device.

Handy, isn’t it? However, the other side of the HTML WYSIWYG editor is that sometimes it can break bonds and insert the markup code where it is unwanted. Therefore, a qualified Magento 2 developer has to know the markup language to get into the code and clean everything up.

How to enable/disable Magento 2 WYSIWYG Editor?

• Log in to the Admin Panel and go to Store>Configuration:

And then change to General>Content Management:

• WYSIWYG is enabled in Magento 2 by default. To use the option uncheck the Use system value box:

• Choose one of the offered options: Disabled by Default; Disabled Completely; Enabled by Default:

Don’t forget to click the Save Config button.

• Then clear the cache. For this, go to System>Cache Management>Select all>Refresh>Submit:

Magento 2 show/hide WYSIWYG Editor is not working

When switching between Show/Hide Editor and refreshing the page the Magento WYSIWYG Editor appears only randomly, images are broken/ not showing or nothing happens at all. Have come across the issue? Check all the basic requirements. If the Magento 2 WYSIWYG editor is still not working, make sure the cache is cleared.

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

To know how to use RTE features for authoring, see Use Rich Text Editor for authoring. RTE can be configured to enable, disable, and extend the features available in the authoring components. The following workflow illustrates a recommended order of completing the RTE configuration tasks in Experience Manager.

Figure: Sequence of steps to learn how to configure RTE

Understand Touch-enabled UI and Classic UI understand-touch-enabled-ui-and-classic-ui

The Touch-enabled UI is the standard user interface for Experience Manager. Adobe introduced Touch-enabled UI with responsive design for authoring environment. The Touch-enabled UI is designed for touch and desktop devices. The interface differs considerably from the original Classic UI.

Figure: Rich Text Editor toolbar in Touch-enabled UI

Figure: Rich Text Editor toolbar in Classic UI

• UI recommendations
• Experience Manager 6.5 release notes
• Touch UI and Classic UI
• Concepts of Experience Manager Touch UI

Various modes of editing editingmodes

Authors can create and edit textual content in Experience Manager using the different modes of components. The toolbar options for authoring and formatting content and the user experience of RTE-enabled components in different editing mode varies based on RTE configurations.

Editing mode

Editing area

Recommended features to be enabled

Touch UI

Classic UI

Inline

In-place editing for quick, minor edits; Format without opening a dialog box

Minimal RTE features

Y

Y

RTE full screen

Covers entire page

All the required RTE features

Y

N

Dialog

Dialog box on top of the page content but does not cover the entire page

All the required RTE features in Classic UI; judiciously enable features in Touch UI

Y

Y

Dialog full screen

Same as Full screen mode; contains fields of the dialog alongside RTE

All the required RTE features

Y

N

The source-edit feature is not available in inline editing mode in Touch-enabled UI. You cannot drag images in the full screen mode. All other features work in all the modes.

Inline editing inline-editing

When opened (with a slow double-click) the content can be edited within the page. A compact toolbar with very basic options is presented.

Figure: Inline editing with basic toolbar in Touch-enabled UI

In Classic UI, a slow double-click the component allows inline editing and an orange outline highlights the content. If the Content Finder is open, a toolbar with the available RTE formatting options is displayed at the top of the window. If the Content Finder is not open, the formatting options are not displayed and you can do basic text edits only.

Full screen editing full-screen-editing

Experience Manager components can be opened in full screen view that hides the page content and occupies the available screen. Consider full screen editing a detailed version of the inline editing as it offers the most editing options. It can be opened by clicking

In the dialog full screen mode, along with a detailed RTE toolbar, the options and components available in a dialog are also available. It is applicable only for a dialog that contains RTE alongside other components.

Figure: The detailed RTE toolbar when editing in full screen mode in Touch-enabled UI

Dialog editing dialog-editing

When a component is double-clicked a dialog box opens for editing the contents. The dialog box opens on top of the existing page. In some specific scenarios, the dialog opens as a pop-up window. For example, when a Text component is part of a column in a multi-column page layout and the area available for the dialog is less.

Figure: Dialog editing mode in Touch-enabled UI

Figure: Dialog box in Classic UI that contains detailed toolbar for editing

About RTE plug-ins and the associated features aboutplugins

The functionality is made available via a series of plug-ins, each with:

• A features property:
  • Used to activate, or deactivate, basic functionality for that plug-in
  • That can be configured using a standardized procedure
• Where appropriate, additional properties and options requiring specialized configuration.

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

The following table lists the current plug-ins, showing:

• Plug-in IDs with a link to API documentation. ID is used as the node name when activating a plug-in.
• Permitted values for the features property.
• A description of the functionality provided by the plug-in.

Plug-in ID

features

Description

edit

cut copy paste-default paste-plaintext paste-wordhtml

findreplace

find replace

Find and replace.

format

bold italic underline

image

image

Basic image support (drag from content or Content Finder). Depending on the browser, the support has different behaviors for authors

keys

To define this value, see tab size.

justify

justifyleft justifycenter justifyright

Paragraph alignment.

links

modifylink unlink anchor

lists

ordered unordered indent outdent

misctools

specialchars sourceedit

Paraformat

paraformat

The default paragraph formats are Paragraph, Heading 1, Heading 2, and Heading 3 (<p>, <h1>, <h2>, and <h3>). You can add more paragraph formats or extend the list.

styles

styles

Support for styling using a CSS class. Add new text styles 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 super-script.

table

table removetable insertrow removerow insertcolumn removecolumn cellprops mergecells splitcell selectrow selectcolumns

See configure table styles, if you want to add your own styles for either entire tables or individual cells.

The full screen plug-in is not supported in dialog mode. Use of the dialogFullScreen setting to configure the toolbar for full screen mode.

Understand the configuration paths and locations understand-the-configuration-paths-and-locations

The that you provide for your authors decide the location for the configuration details when you are activating the RTE plug-ins:

Editing mode

Location for Touch UI

Location for Classic UI

Inline

<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format jcr:primaryType="nt:unstructured" features="bold,italic"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline jcr:primaryType="nt:unstructured"
                toolbar="[format
# bold,format
# italic,format
# underline,links
# modifylink,links
# unlink]">
            </inline>
            <icons jcr:primaryType="nt:unstructured">
                <bold jcr:primaryType="nt:unstructured"
                    command="format
# bold"
                    icon="textItalic"/>
            </icons>
        </cui>
    </uiSettings>
</text>

0

<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format jcr:primaryType="nt:unstructured" features="bold,italic"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline jcr:primaryType="nt:unstructured"
                toolbar="[format
# bold,format
# italic,format
# underline,links
# modifylink,links
# unlink]">
            </inline>
            <icons jcr:primaryType="nt:unstructured">
                <bold jcr:primaryType="nt:unstructured"
                    command="format
# bold"
                    icon="textItalic"/>
            </icons>
        </cui>
    </uiSettings>
</text>

0

Full screen

<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format jcr:primaryType="nt:unstructured" features="bold,italic"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline jcr:primaryType="nt:unstructured"
                toolbar="[format
# bold,format
# italic,format
# underline,links
# modifylink,links
# unlink]">
            </inline>
            <icons jcr:primaryType="nt:unstructured">
                <bold jcr:primaryType="nt:unstructured"
                    command="format
# bold"
                    icon="textItalic"/>
            </icons>
        </cui>
    </uiSettings>
</text>

0

Not applicable

Full screen dialog

<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format jcr:primaryType="nt:unstructured" features="bold,italic"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline jcr:primaryType="nt:unstructured"
                toolbar="[format
# bold,format
# italic,format
# underline,links
# modifylink,links
# unlink]">
            </inline>
            <icons jcr:primaryType="nt:unstructured">
                <bold jcr:primaryType="nt:unstructured"
                    command="format
# bold"
                    icon="textItalic"/>
            </icons>
        </cui>
    </uiSettings>
</text>

3

Not applicable

Do not name the node under

<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format jcr:primaryType="nt:unstructured" features="bold,italic"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline jcr:primaryType="nt:unstructured"
                toolbar="[format
# bold,format
# italic,format
# underline,links
# modifylink,links
# unlink]">
            </inline>
            <icons jcr:primaryType="nt:unstructured">
                <bold jcr:primaryType="nt:unstructured"
                    command="format
# bold"
                    icon="textItalic"/>
            </icons>
        </cui>
    </uiSettings>
</text>

4 as

<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format jcr:primaryType="nt:unstructured" features="bold,italic"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline jcr:primaryType="nt:unstructured"
                toolbar="[format
# bold,format
# italic,format
# underline,links
# modifylink,links
# unlink]">
            </inline>
            <icons jcr:primaryType="nt:unstructured">
                <bold jcr:primaryType="nt:unstructured"
                    command="format
# bold"
                    icon="textItalic"/>
            </icons>
        </cui>
    </uiSettings>
</text>

5. On

<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format jcr:primaryType="nt:unstructured" features="bold,italic"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline jcr:primaryType="nt:unstructured"
                toolbar="[format
# bold,format
# italic,format
# underline,links
# modifylink,links
# unlink]">
            </inline>
            <icons jcr:primaryType="nt:unstructured">
                <bold jcr:primaryType="nt:unstructured"
                    command="format
# bold"
                    icon="textItalic"/>
            </icons>
        </cui>
    </uiSettings>
</text>

4 node, define the following properties:

• Name:

  <text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">

  <rtePlugins jcr:primaryType="nt:unstructured">  
      <format jcr:primaryType="nt:unstructured" features="bold,italic"/>  
  </rtePlugins>  
  <uiSettings jcr:primaryType="nt:unstructured">  
      <cui jcr:primaryType="nt:unstructured">  
          <inline jcr:primaryType="nt:unstructured"  
              toolbar="[format
  

  # bold,format

  italic,format

  underline,links

  modifylink,links

  unlink]">

          </inline>  
          <icons jcr:primaryType="nt:unstructured">  
              <bold jcr:primaryType="nt:unstructured"  
                  command="format
  

  # bold"

                  icon="textItalic"/>  
          </icons>  
      </cui>  
  </uiSettings>  
  

  </text>

  7
• Type:

  <text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">

  <rtePlugins jcr:primaryType="nt:unstructured">  
      <format jcr:primaryType="nt:unstructured" features="bold,italic"/>  
  </rtePlugins>  
  <uiSettings jcr:primaryType="nt:unstructured">  
      <cui jcr:primaryType="nt:unstructured">  
          <inline jcr:primaryType="nt:unstructured"  
              toolbar="[format
  

  # bold,format

  italic,format

  underline,links

  modifylink,links

  unlink]">

          </inline>  
          <icons jcr:primaryType="nt:unstructured">  
              <bold jcr:primaryType="nt:unstructured"  
                  command="format
  

  # bold"

                  icon="textItalic"/>  
          </icons>  
      </cui>  
  </uiSettings>  
  

  </text>

  8
• Value: path of the node containing the actual configuration

Do not name the RTE configuration node as

<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format jcr:primaryType="nt:unstructured" features="bold,italic"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline jcr:primaryType="nt:unstructured"
                toolbar="[format
# bold,format
# italic,format
# underline,links
# modifylink,links
# unlink]">
            </inline>
            <icons jcr:primaryType="nt:unstructured">
                <bold jcr:primaryType="nt:unstructured"
                    command="format
# bold"
                    icon="textItalic"/>
            </icons>
        </cui>
    </uiSettings>
</text>

5. Otherwise, the RTE configurations take effect for only the administrators and not for the users in the group `features`0.

Configure the following properties that apply in Dialog editing mode in Touch UI only:

• `features`1: Set this Boolean property defined on the RTE node (one with sling:resourceType= `features`2) to `features`3, to make RTE toolbar 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 `features`4 to `features`3and trigger the ‘rte-start’ event to start RTE editing. When this property is ‘true’, the default behavior, rte start on click, does not work.
• `features`4: Set this Boolean property defined on the RTE node to `features`3, to control when to start RTE by triggering the event `features`8.
• `features`8: Trigger this event on the `features`0 of RTE, when to start editing RTE. This works only if `features`4 has been set to true.

When RTE is used in the touch-enabled dialog, setting the property `features`1 to true is mandatory to avoid issues.

Customizing in place editing customizing-in-place-editing

You can define on which HTML selector the text editor starts by configuring the following properties:

• `features`3 - Defined on `features`4, this property is used to specify a selector of the HTML element on which the inline-editing for the Text Component will be started. If not specified, the inline-editing is directly started on the Text Component HTML.
• `features`5 - Defined on `features`4, this property is used to specify the name of the property that will be saved on the content node where the HTML value of the text component will be persisted after inline-editing.

The corresponding property for dialog mode is `features`7.

Enable RTE functionalities by activating plug-ins enable-rte-functionalities-by-activating-plug-ins

RTE functionalities are made available via a series of plug-ins, each with features property. You can configure the features property to enable or disable the various features of each plug-in.

For detailed configurations of the RTE plug-ins, see how to activate and configure the RTE plug-ins.

Sample: Download this sample configuration that illustrates how to configure RTE. In this package all the features are enabled.

The Core Components text component allows template editors to configure many RTE plugins in a GUI as content policies, eliminating the need for technical configuration. Content policies can work with RTE UI configurations as described in this document.

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

• `features`8
• `features`9

To create your own text component, copy the above component instead of editing these components.

AEM lets you configure the interface for the Rich Text Editor differently for the different editing modes. The default settings are provided below. You can override these defaults based on your requirements. You customize only the toolbar features that you want to provide to your authors. You do not need to specify all the toolbar configurations.

To configure the toolbar for dialogFullScreen, use the following sample configuration.

<uiSettings jcr:primaryType="nt:unstructured">
  <cui jcr:primaryType="nt:unstructured">
    <inline
      jcr:primaryType="nt:unstructured"
      toolbar="[format
# bold,format
# italic,format
# underline,
# justify,
# lists,links
# modifylink,links
# unlink,
# paraformat]">
      <popovers jcr:primaryType="nt:unstructured">
        <justify
          jcr:primaryType="nt:unstructured"
          items="[justify
# justifyleft,justify
# justifycenter,justify
# justifyright,justify
# justifyjustify]"
          ref="justify"/>
        <lists
          jcr:primaryType="nt:unstructured"
          items="[lists
# unordered,lists
# ordered,lists
# outdent,lists
# indent]"
          ref="lists"/>
        <paraformat
          jcr:primaryType="nt:unstructured"
          items="paraformat:getFormats:paraformat-pulldown"
          ref="paraformat"/>
      </popovers>
    </inline>
    <dialogFullScreen
      jcr:primaryType="nt:unstructured"
      toolbar="[format
# bold,format
# italic,format
# underline,justify
# justifyleft,justify
# justifycenter,justify
# justifyright,justify
# justifyjustify,lists
# unordered,lists
# ordered,lists
# outdent,lists
# indent,links
# modifylink,links
# unlink,table
# createoredit,
# paraformat,image
# imageProps]">
      <popovers jcr:primaryType="nt:unstructured">
        <paraformat
          jcr:primaryType="nt:unstructured"
          items="paraformat:getFormats:paraformat-pulldown"
          ref="paraformat"/>
      </popovers>
    </dialogFullScreen>
    <tableEditOptions
      jcr:primaryType="nt:unstructured"
      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,-]">
    </tableEditOptions>
  </cui>
</uiSettings>

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 (for example, `features`1), it is specified as `features`2 (for example, `features`3).

If the button is a popover (containing some features of a plug-in), it is specified as `features`4 (for example, `features`5).

Separators (`features`6) between a group of buttons can be specified with `features`7.

The pop-up node under inline or full-screen mode contains a list of the popovers being used. Each child node under the ‘popovers’ node is named after the plug-in (for example, format). It has a property ‘items’ containing a list of features of the plug-in (for example, format

bold).

RTE user interface settings and content policies rtecontentpolicies

Administrators can control the RTE options using content policies, say instead of doing the configuration as described above. Content policies define the design properties of a component when used as part of an editable template. For example, if a text component that uses the RTE is used with an editable template, the content policy can define that the bold option be available and a few paragraph formatting options be available. Content policies are reusable and can be applied across multiple templates.

The available options in the RTE flow downstream from the user interface configurations to the content policies.

• User interface configuration settings define which options are available to the content policies.
• If the user interface configuration of the RTE removed or does not enable an item, the content policy cannot configure it.
• An author has access to only such functionality as is made available by the user interface configurations and the content policies.

As an example, you can see the Text Core Component documentation.

You can customize the mapping between Coral icons displayed on the RTE toolbar and the available commands. You cannot use any other icons besides Coral icons.

1. Create a node named `features`8 under `features`9.
2. Create nodes for individual icons under it.
3. On each of the individual icon nodes, specify a Coral icon and a command to map to the icon.

Below is a sample snippet to map the command Bold to the Coral icon named `<p>`0.

<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format jcr:primaryType="nt:unstructured" features="bold,italic"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline jcr:primaryType="nt:unstructured"
                toolbar="[format
# bold,format
# italic,format
# underline,links
# modifylink,links
# unlink]">
            </inline>
            <icons jcr:primaryType="nt:unstructured">
                <bold jcr:primaryType="nt:unstructured"
                    command="format
# bold"
                    icon="textItalic"/>
            </icons>
        </cui>
    </uiSettings>
</text>

Switch to CoralUI 2 Rich Text Editor switch-to-coralui-rich-text-editor

On a page, you can either include CoralUI 2 RTE clientlib or the CoralUI 3 RTE clientlib. By default, Rich Text Editor includes the CoralUI 3 RTE clientlib. To switch to CoralUI 2 RTE, perform the following steps.

Adobe does not recommend it as a best practice. Switch to CoralUI 2 RTE as a last resort. Custom plugins for CoralUI 2 RTE work with CoralUI 3 RTE if the plugins do not depend on RTE internals, such as classes.

If you are using custom plugins for CoralUI3 RTE, use `<p>`1 library.

1. Overlay the node <p>`2 under <p>`3, and do the following:
   • Replace <p>`1 with <p>`5 for the dependencies property.
   • Replace <p>`6 with <p>`7 for the embed property.
   • Replace <p>`8 with <p>`9 for the embed property.
2. Overlay the nodes <h1>`0 and <h1>1 under <p>3. Remove category <h1>3 from <h1>4 and add it to <h1>`5.
3. Change any other dependency that is getting included on the page from <p>`1 to <p>5. For example, after overlaying the node <h1>8 under <p>3, change any dependency on it from <p>1 to <p>`5.
4. Overlay the node <h2>`2 under <p>3. Replace the dependency <h2>4 at the node <h2>5 with <h2>`6.

CoralUI 2 RTE uses handlebars templates for plug-in dialogs. Therefore, the CoralUI 2 RTE clientlib had a dependency on the handlebars clientlib. CoralUI 3 RTE does not use handlebars templates and does not have any associated dependency. If your custom plug-ins use handlebars templates, include the handlebars clientlib in your web page.

Further Information further-information

For more information about configuring the RTE, see the AEM Widget API reference.

In particular, to see the plug-ins and related options available:

• The CQ.form.RichText component provides a form field for editing styled text information (rich text). To know all the parameters available for the rich text form, see the Config Options.
• The RichText component provides a wide range of functionality using plug-ins listed under CQ.form.rte.plugins.Plugin. For each plug-in:
  • 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 plug-in
• More information about HTML Rules for links is also available.

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 `<h2>`7.

Known limitations known-limitations

AEM RTE capability has the following limitations:

• RTE capabilities are supported only in AEM component dialogs. RTE is not supported on wizards or Foundation-forms like Page Properties and Scaffolding on Touch-enabled UI.
• AEM does not work on Hybrid devices.
• Do not name the RTE configuration node

  <text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">

  <rtePlugins jcr:primaryType="nt:unstructured">  
      <format jcr:primaryType="nt:unstructured" features="bold,italic"/>  
  </rtePlugins>  
  <uiSettings jcr:primaryType="nt:unstructured">  
      <cui jcr:primaryType="nt:unstructured">  
          <inline jcr:primaryType="nt:unstructured"  
              toolbar="[format
  

  # bold,format

  italic,format

  underline,links

  modifylink,links

  unlink]">

          </inline>  
          <icons jcr:primaryType="nt:unstructured">  
              <bold jcr:primaryType="nt:unstructured"  
                  command="format
  

  # bold"

                  icon="textItalic"/>  
          </icons>  
      </cui>  
  </uiSettings>  
  

  </text>

  5. Otherwise, the RTE configuration takes effect for only the administrators and not for the users in the group `features`0.
• RTE does not support inline frame or iframe to embed content.

Best practices and tips best-practices-and-tips

• Enable only the plug-ins without pop-up for a floating dialog. Plug-ins without pop-up are smaller in size and are most suitable for a floating dialog.
• Enable the plug-ins with larger pop-up, such as the `<h3>`0 plug-in, only in the full-screen dialog mode or in full-screen mode. Plug-ins with large pop-up need more screen real-estate to provide a good authoring experience.
• If you are using custom plugins for CoralUI3 RTE, use `<p>`1 library.

Troubleshoot frequent issues with RTE troubleshoot-issues-with-aem-rich-text-editor

How to select multiple table cells?

To select multiple cells in a table, press <h3>`2 or <h3>`3 key and then click the table cells one-by-one.

Now perform operation on the selection, say set the properties of the selected cells.

Hyperlinks are lost when editing a component using Configure button

Add a hyperlink in a text component by editing it using the Configure button. You may lose the hyperlink when editing it again and validating the hyperlink for the second time.

A workaround is to click in the text component when the edit dialog is displayed the second time and then run the link validation.

This issue is resolved in AEM 6.3 and later.

HTML content added in source-edit mode is lost

Do not add a XSS-prone HTML. AEM, and not RTE, may remove some HTML content to adhere to the XSS antisamy rules.

To verify that the pasted HTML is saved, check the saved content in CRXDE (in the content node).

If not saved, the HTML must have been removed by RTE as it did not adhere to the RTE’s rules.

If saved in CRXDE but not rendered on the Page (to check rendering, see page’s preview, it is removed by AEM XSS rules.

Multifield component is not working as expected

To create multifield component, use CoralUI 3 exclusively. Do not use CoralUI 2 component dialogs.

Also, verify that your multifield implementation code and node structure are correct.

Configuration available to administrators are not available to authors

If the interface configurations updates are reflected for administrators but not for author accounts, ensure that the configuration node is not named

<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format jcr:primaryType="nt:unstructured" features="bold,italic"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline jcr:primaryType="nt:unstructured"
                toolbar="[format
# bold,format
# italic,format
# underline,links
# modifylink,links
# unlink]">
            </inline>
            <icons jcr:primaryType="nt:unstructured">
                <bold jcr:primaryType="nt:unstructured"
                    command="format
# bold"
                    icon="textItalic"/>
            </icons>
        </cui>
    </uiSettings>
</text>

5. Use the

<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format jcr:primaryType="nt:unstructured" features="bold,italic"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline jcr:primaryType="nt:unstructured"
                toolbar="[format
# bold,format
# italic,format
# underline,links
# modifylink,links
# unlink]">
            </inline>
            <icons jcr:primaryType="nt:unstructured">
                <bold jcr:primaryType="nt:unstructured"
                    command="format
# bold"
                    icon="textItalic"/>
            </icons>
        </cui>
    </uiSettings>
</text>

7 property.

How do I customize my WYSIWYG editor?

With just a few clicks you will have your custom WYSIWYG editor ready in no time..

Step 1: Editor type. Choose the editor type that you want to use as a base. ... .

Step 2: Editor plugins. Choose the rich text editor plugins you want to include. ... .

Step 3: Editor toolbar. ... .

Step 4: Editor language. ... .

Step 5: Download!.

What is the difference between WYSIWYG editor and text editor?

Text editors don't show you what it immediately looks like on the page as opposed to a WYSIWYG editor. In other words, you see exactly what your document or website will look like once it is published. Web designers commonly use a WYSIWYG editor for creating and editing HTML and CSS code.

What is the Froala editor?

Froala Editor is a front-end html editor for enabling rich text editing capabilities for web and mobile applications. Customers use Froala Editor in a variety of applications such as blogging platforms, chat apps, comment apps, form builders, doc processors and thousand of others.

What is the meaning of wiziwig?

In computing, WYSIWYG (/ˈwɪziwɪɡ/ WIZ-ee-wig), an acronym for What You See Is What You Get, refers to software which allows content to be edited in a form that resembles its appearance when printed or displayed as a finished product, such as a printed document, web page, or slide presentation.