AEM 6.1: Enable Rich text editor (RTE) plugins on Touch UI
for classic UI we can easily add the plugins inside rteplugins tag, Adobe built a great example on their Geometrix-Outdoor project:
<summary
jcr:primaryType="cq:Widget"
fieldLabel="Summary"
name="./summary"
xtype="richtext">
<rtePlugins jcr:primaryType="nt:unstructured">
<table
jcr:primaryType="nt:unstructured"
features="*"/>
<format
jcr:primaryType="nt:unstructured"
features="*"/>
<lists
jcr:primaryType="nt:unstructured"
features="*"/>
<justify
jcr:primaryType="nt:unstructured"
features="*"/>
<edit
jcr:primaryType="nt:unstructured"
features="[paste-wordhtml]"/>
<findreplace
jcr:primaryType="nt:unstructured"
features="*"/>
<paraformat
jcr:primaryType="nt:unstructured"
features="*"/>
<subsuperscript
jcr:primaryType="nt:unstructured"
features="*"/>
<misctools
jcr:primaryType="nt:unstructured"
features="*"/>
<links
jcr:primaryType="nt:unstructured"
features="*"/>
<spellcheck
jcr:primaryType="nt:unstructured"
features="*"
invalidStyle="background-color: #ffdddd;"/>
<undo
jcr:primaryType="nt:unstructured"
features="*"/>
<image
jcr:primaryType="nt:unstructured"
features="*"/>
</rtePlugins>
</summary>
However we can't apply the same thing on Touch UI environment, they also did an example on Geometrix-Outdoor, but the plugins do not display fully functional:
<summary
jcr:primaryType="nt:unstructured"
sling:resourceType="cq/gui/components/authoring/dialog/richtext"
fieldLabel="Summary"
name="./summary"
renderReadOnly="{Boolean}true"/>
Is there anyway to make the plugins on TouchUi display as Classic UI ?
Answer
This is a sample dialog.xml (you need both dialog and _cq_dialog for RTE in AEM6.1)
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Dialog"
helpPath="en/cq/current/wcm/default_components.html#Text"
title="Text"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<tab1
jcr:primaryType="cq:Widget"
anchor="100%"
title="Text"
xtype="panel">
<items jcr:primaryType="cq:WidgetCollection">
<text
jcr:primaryType="cq:Widget"
hideLabel="{Boolean}true"
name="./text"
useFixedInlineToolbar="{Boolean}true"
xtype="richtext">
<rtePlugins jcr:primaryType="nt:unstructured">
<subsuperscript
jcr:primaryType="nt:unstructured"
features="*"/>
<paraformat
jcr:primaryType="nt:unstructured"
features="*">
<formats jcr:primaryType="cq:WidgetCollection">
<p
jcr:primaryType="nt:unstructured"
description="Paragraph"
tag="p"/>
<h2
jcr:primaryType="nt:unstructured"
description="Header 2"
tag="h2"/>
<h3
jcr:primaryType="nt:unstructured"
description="Header 3"
tag="h3"/>
<h4
jcr:primaryType="nt:unstructured"
description="Header 4"
tag="h4"/>
</formats>
</paraformat>
<misctools
jcr:primaryType="nt:unstructured"
features="specialchars">
<specialCharsConfig jcr:primaryType="nt:unstructured">
<chars jcr:primaryType="nt:unstructured">
<copyright
jcr:primaryType="nt:unstructured"
entity="©"/>
<trademark
jcr:primaryType="nt:unstructured"
entity="™"/>
<registered
jcr:primaryType="nt:unstructured"
entity="®"/>
<emDash
jcr:primaryType="nt:unstructured"
entity="—"/>
<pound
jcr:primaryType="nt:unstructured"
entity="£"/>
<nbsp
jcr:primaryType="nt:unstructured"
entity=" "/>
</chars>
</specialCharsConfig>
</misctools>
<links jcr:primaryType="nt:unstructured">
<linkDialogConfig
jcr:primaryType="nt:unstructured"
height="{Long}316">
<linkAttributes jcr:primaryType="cq:WidgetCollection">
<linkAdvanced
jcr:primaryType="cq:Widget"
collapsed="{Boolean}true"
collapsible="{Boolean}true"
inputValue="advanced"
name="./linkdialog/cq:adhocLinkTrackingTab"
title="Link tracking"
xtype="dialogfieldset">
<items jcr:primaryType="cq:WidgetCollection">
<enable
jcr:primaryType="nt:unstructured"
attribute="enabletracking"
fieldDescription="override analytics framework settings"
fieldLabel="Custom link tracking"
name="./linkdialog/cq:adhocLinkTrackingEnableTracking"
xtype="checkbox">
<listeners
jcr:primaryType="nt:unstructured"
check="function(component){var dlg=component.findParentByType('rtelinkdialog');dlg.enableSCFields(component.checked);}"/>
</enable>
<events
jcr:primaryType="nt:unstructured"
attribute="adhocevents"
fieldDescription="e.g.: event2, event7"
fieldLabel="Include SiteCatalyst events"
name="./linkdialog/cq:adhocLinkTrackingEvents"
xtype="textfield"/>
<evars
jcr:primaryType="nt:unstructured"
attribute="adhocevars"
fieldDescription="e.g.: eVar1: pagedata.url, prop4: 'const'"
fieldLabel="Include SiteCatalyst variables"
name="./linkdialog/cq:adhocLinkTrackingEvars"
xtype="textfield"/>
</items>
</linkAdvanced>
</linkAttributes>
</linkDialogConfig>
</links>
<edit
jcr:primaryType="nt:unstructured"
defaultPasteMode="plaintext"
features="[cut,copy,paste-plaintext]"
stripHtmlTags="{Boolean}true"/>
<spellcheck
jcr:primaryType="nt:unstructured"
features="*"/>
<findreplace
jcr:primaryType="nt:unstructured"
features="*"/>
<undo
jcr:primaryType="nt:unstructured"
features="*"/>
<format
jcr:primaryType="nt:unstructured"
features="[bold,italic]"/>
<lists
jcr:primaryType="nt:unstructured"
features="*"/>
<justify
jcr:primaryType="nt:unstructured"
features="*"/>
<styles
jcr:primaryType="nt:unstructured"
features="*">
<styles jcr:primaryType="cq:WidgetCollection">
<disclaimer
jcr:primaryType="nt:unstructured"
cssName="wysiwyg--disclaimer"
text="Disclaimer"/>
<quote
jcr:primaryType="nt:unstructured"
cssName="pull-quote component"
text="Quote"/>
</styles>
</styles>
</rtePlugins>
<uiSettings jcr:primaryType="nt:unstructured">
<cui jcr:primaryType="nt:unstructured">
<inline
jcr:primaryType="nt:unstructured"
toolbar="[links#modifylink,links#unlink,format#bold,format#italic,justify#justifyleft,justify#justifycenter,justify#justifyright,lists#unordered,lists#ordered,lists#outdent,lists#indent,fullscreen#start,control#close,control#save]"/>
<fullscreen
jcr:primaryType="nt:unstructured"
toolbar="[links#modifylink,links#unlink,links#anchor,format#bold,format#italic,format#underline,subsuperscript#subscript,subsuperscript#superscript,edit#cut,edit#copy,edit#paste-plaintext,findreplace#find,findreplace#replace,undo#undo,undo#redo,justify#justifyleft,justify#justifycenter,justify#justifyright,lists#unordered,lists#ordered,lists#outdent,lists#indent,spellcheck#checktext,misctools#specialchars,#styles,#paraformat,fullscreen#start,control#close,control#save]">
<popovers jcr:primaryType="nt:unstructured">
<styles
jcr:primaryType="nt:unstructured"
items="styles:getStyles:styles-pulldown"
ref="styles"/>
<paraformat
jcr:primaryType="nt:unstructured"
items="paraformat:getFormats:paraformat-pulldown"
ref="paraformat"/>
</popovers>
</fullscreen>
</cui>
</uiSettings>
</text>
<isRichTextFlag
jcr:primaryType="cq:Widget"
ignoreData="{Boolean}true"
name="./textIsRich"
value="true"
xtype="hidden"/>
</items>
</tab1>
</items>
This is an example of _cq_dialog
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Configure rich text component"
sling:resourceType="cq/gui/components/authoring/dialog"
helpPath="en/cq/current/wcm/default_components.html#Text">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<layout
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
margin="{Boolean}false"
type="nav"/>
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<text
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textarea"
cols="{Long}2"
disabled="{Boolean}true"
fieldLabel="Body text"
name="./text"
rows="{Long}10"/>
</items>
</column>
</items>
</content>
example text.html
<div data-sly-test="${(wcmmode.edit || wcmInit.isTouchAuthoring) && (!properties.text)}">
<div>Please edit this component.</div>
<sub>This text will only appear in Authoring Mode</sub>
</div>
<div data-sly-test="${properties.text}" data-sly-unwrap>
<p data-sly-use.text="text.js" data-sly-unwrap="${text.context == text.CONST.CONTEXT_HTML}" class="${text.cssClass}" data-emptytext="Rich Text">${text.text @ context=text.context}</p>
</div>
and test.js
"use strict";
/**
* Text foundation component JS backing script
*/
use(["/apps/global/components/utils/AuthoringUtils.js"], function (AuthoringUtils) {
var CONST = {
PROP_TEXT: "text",
PROP_RICH_FORMAT: "textIsRich",
CONTEXT_TEXT: "text",
CONTEXT_HTML: "html"
};
var text = {};
// The actual text content
text.text = granite.resource.properties[CONST.PROP_TEXT]
|| "";
// Wether the text contains HTML or not
text.context = granite.resource.properties[CONST.PROP_RICH_FORMAT]
? CONST.CONTEXT_HTML : CONST.CONTEXT_TEXT
// Set up placeholder if empty
if (!text.text) {
text.cssClass = AuthoringUtils.isTouch
? "cq-placeholder"
: "cq-text-placeholder-ipe";
text.context = CONST.CONTEXT_TEXT;
// only dysplay placeholder in edit mode
if (typeof wcmmode != "undefined" && wcmmode.isEdit()) {
text.text = AuthoringUtils.isTouch
? ""
: "Edit text";
} else {
text.text = "";
}
}
// Adding the constants to the exposed API
text.CONST = CONST;
return text;
});
and lastly your editConfig
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:EditConfig">
<cq:inplaceEditing
jcr:primaryType="cq:InplaceEditingConfig"
active="{Boolean}true"
configPath="../../dialog/items/tab1/items/text"
editorType="text"/>
<cq:listeners
jcr:primaryType="cq:EditListenersConfig"
afteredit="REFRESH_PAGE"
afterinsert="REFRESH_PAGE"/>