Expand my Community achievements bar.

AEM 6.3 sp1 Rich Text Editor support in touch ui workflow dialog

Avatar

Level 2

Can I use RTE cq/gui/components/authoring/dialog/richtext component inside a workflow dialog?

<text jcr:primaryType="nt:unstructured" fieldLabel="Text"

  sling:resourceType="cq/gui/components/authoring/dialog/richtext"

  useFixedInlineToolbar="true" name="./text">

  <rtePlugins jcr:primaryType="nt:unstructured">

  <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>

  <misctools jcr:primaryType="nt:unstructured" features="*" />

  <findreplace jcr:primaryType="nt:unstructured"

  features="*" />

  <format jcr:primaryType="nt:unstructured" features="*" />

  <keys jcr:primaryType="nt:unstructured" features="*" />

  <justify jcr:primaryType="nt:unstructured" features="*" />

  <lists 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" />

  <h1 jcr:primaryType="nt:unstructured" description="Header 1"

  tag="h1" />

  <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" />

  <h5 jcr:primaryType="nt:unstructured" description="Header 5"

  tag="h5" />

  <h6 jcr:primaryType="nt:unstructured" description="Header 6"

  tag="h6" />

  </formats>

  </paraformat>

  <spellcheck jcr:primaryType="nt:unstructured"

  features="*" />

  <styles jcr:primaryType="nt:unstructured" features="*" />

  <subsuperscript jcr:primaryType="nt:unstructured"

  features="*" />

  <table jcr:primaryType="nt:unstructured" features="*" />

  <undo jcr:primaryType="nt:unstructured" features="*" />

  <edit jcr:primaryType="nt:unstructured" features="[paste-plaintext,paste-wordhtml]" />

  </rtePlugins>

  <uiSettings jcr:primaryType="nt:unstructured">

  <cui jcr:primaryType="nt:unstructured">

  <inline jcr:primaryType="nt:unstructured"

  toolbar="[format#bold,format#italic,format#underline,#justify,#lists,subsuperscript#subscript,subsuperscript#superscript,links#modifylink,links#unlink,links#anchor,#image,findreplace#find,findreplace#replace,spellcheck#checktext,misctools#specialchars,misctools#sourceedit,#styles,#paraformat,table#table]">

  <popovers jcr:primaryType="nt:unstructured">

  <justify jcr:primaryType="nt:unstructured"

  items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"

  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" />

  <styles jcr:primaryType="nt:unstructured"

  items="styles:getStyles:styles-pulldown" ref="styles" />

  </popovers>

  </inline>

  </cui>

  </uiSettings>

  </text>

HTML does get generated however it shows up as empty box and rte toolbar does not load when i click inside the box. Am I missing a dependency?

<div  class="coral-Form-fieldwrapper"><label class="coral-Form-fieldlabel">Text</label><div class="richtext-container">

    <input type="hidden"  class="coral-Form-field coral-Textfield" type="text" name="./text" value="" data-useFixedInlineToolbar="true">

    <input type="hidden" class="coral-RichText-isRichTextFlag" name="./textIsRich" value="true">

    <div class="coral-RichText-editable coral-Form-field coral-Textfield coral-Textfield--multiline coral-RichText"

         data-config-path="/etc/workflow/dialogs/testdialog/_cq_dialog/content/items/columns/items/text.infinity.json"

         data-use-fixed-inline-toolbar="true"

         data-custom-start="null"

         data-editor-type="text"

         data-external-style-sheets=""></div>

</div></div>

1 Reply

Avatar

Level 2

Solved it by adding extraClientlibs="[cq.authoring.rte.coralui3,rte.coralui3]" on cq:dialog node