Picklist for touch UI rich text editor

[viruh15818023]

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

[vipins5188]

You can refer this color picker example for touch ui RTE

Experiencing Adobe Experience Manager - Day CQ: AEM 63 - Touch UI RTE (Rich Text Editor) Color Picke...

[viruh15818023]

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

[GaneshM]

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!

[viruh15818023]

Ganesh,

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

We are using AEM 6.2

Thanks,

Viru

[GaneshM]

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!

[viruh15818023]

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

[GaneshM]

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!

[GaneshM · Accepted solution]

Viru,

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

FYI,

Thanks!

[viruh15818023]

GaneshM

Thank you for your help! it works