Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
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!