Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Picklist for touch UI rich text editor

Avatar

Level 2

I need to implement a pick list plugin for a touch UI rich text editor.  I found this thread but wasn't helpful. the below plugin isn't registered in plugin registry.

When I try to extend this plugin it's undefined.

"/libs/mcm/campaign/components/touch-ui/clientlibs/rte/personalizationplugin/plugin.js".

Re: Using insertvariables RTE plugin in Touch Dialog config question

Did anybody implement the similar feature on touch UI RTE? I would greatly appreciate some examples.

I'm using AEM 6.2.

Thanks in Advance.

Viru

Message was edited by: Viru Hosamath

1 Accepted Solution

Avatar

Correct answer by
Level 4

Viru,

You can archive using Styles Plugin & inserthtml command (this.editorKernel.relayCmd('inserthtml', className);)

FYI,

1633683_pastedImage_3.png

Thanks!

View solution in original post

9 Replies

Avatar

Level 2

Vipin

thank you for your reply.

basically, I would like to implement a drop down list where an author can insert value into the RTE to personalize the content. 

Somethinkg like, a dropdown list contains state names.

Let me give a try.

thanks

viru

Avatar

Level 4

Hi Viru,

Here is the example and code snippet to how to extend the plugin & integrate with toolbar.

Second styles plugin for RTE Touch UI AEM 6.3 

You can get some ideas here.

Thanks!

Avatar

Level 2

Ganesh,

Thank you for your comments. does this work for 6.2?

We are using AEM 6.2

Thanks,

Viru

Avatar

Level 4

I'm not sure Viru, but the approach & steps are common for 6.2 & 6.3. You may need to change coral version like

/libs/clientlibs/granite/coralui2/optional/rte/js/components/rte/ui/CuiToolbarBuilder.js, other than that all the files are same.

Thanks!

Avatar

Level 2

Ganesh,

is this the original blog you were referring too?

AEM | RTE – Custom Styles Plugin – Touch UI – Need is the mother of invention …

I installed the package as is on AEM 6.2 I'm getting following error.

touchui.js:720 Uncaught TypeError: Cannot read property ‘toolbar’ of undefined

at instanceGenerator._getUISettings (touchui.js:720)

at instanceGenerator.createToolbar (rte.js:39244)

at instanceGenerator.createToolbar (rte.js:3720)

I've configured the plugin as follows:

<inline jcr:primaryType="nt:unstructured" toolbar="[fontstyles#fontstyles]">

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

<fontstyles jcr:primaryType="nt:unstructured" items="fontstyles:getStyles:styles-pulldown" ref="fontstyles"/>

</popovers>

</inline

just want to make sure, I'm using the plugin correctly.

Thanks,

Viru

Avatar

Level 4

I afraid not, we had some issue when we follow that blog post.

Can you please try the plug-in from here GitHub - ganeshmurthi/AEM: AEM Code Snippets.

Let me know if you need any clarification.

Thanks!

Avatar

Correct answer by
Level 4

Viru,

You can archive using Styles Plugin & inserthtml command (this.editorKernel.relayCmd('inserthtml', className);)

FYI,

1633683_pastedImage_3.png

Thanks!