Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Second styles plugin for RTE Touch UI AEM 6.3

Avatar

Level 4

Currently we've OOTB styles plugin configured for RTE in AEM 6.3, we need to add second styles plugin(duplicate styles plugin with name "sizes").

I tried to use the same script from styles which i found under the path

/libs/clientlibs/granite/coralui2/optional/rte/js/components/rte/plugins/StylesPlugin.js

but not working fine. Tried to use the same functions from StylesPluginImpl.js too.

TFS

1 Accepted Solution

Avatar

Correct answer by
Level 4

Yep, you need to override CuiToolbarBuilder and CUI.rte.ui.cui.Toolkit.

1. Please use CUI.rte.ui.cui.Toolkit to invoke the customized

createToolbarBuilder: function (hint) {

  return new CUI.rte.ui.cui.CuiToolbarBuilderExt(); // customized toobar

},

2. In CuiToolbarBuilderExt add your new plug-in's in toolbar and popovers

Eg: ICONS (if required), inline and fullscreen in CUI.rte.ui.cui.DEFAULT_UI_SETTINGS

3. Update or add your new template for the popover in /libs/clientlibs/granite/richtext/js/Coral.templates.js ( here its hard coded with styles id you might need to add your new plug in name.) 

Note: you dont have to override this class or plugin, its a method so you can define it any other classes.  I added in the bottom of the CuiToolbarBuilder.

Eg:

window["Coral"]["templates"]["RichTextEditor"]["styles_pulldown"] = (function anonymous(data_0

/**/) {

  var frag = document.createDocumentFragment();

  var data = data_0;

  var el0 = document.createElement("coral-buttonlist");

  el0.className += " rte-toolbar-list";

  var el1 = document.createTextNode("\r\n");

  el0.appendChild(el1);

  var iterated_1 = data_0;

  for (var i1 = 0, ni1 = iterated_1.length; i1 < ni1; i1++) {

   var data_1 = data = iterated_1[i1];

   var el3 = document.createTextNode("\r\n  ");

  el0.appendChild(el3);

   var el4 = document.createElement("button","coral-buttonlist-item");

  el4.setAttribute("is", "coral-buttonlist-item");

  el4.setAttribute("data-action", "styles#"+data_1["cssName"]);

  el4.textContent = data_1["text"];

  el0.appendChild(el4);

   var el5 = document.createTextNode("\r\n");

  el0.appendChild(el5);

  }

  var el6 = document.createTextNode("\r\n");

  el0.appendChild(el6);

  frag.appendChild(el0);

  var el7 = document.createTextNode("\r\n");

  frag.appendChild(el7);

  return frag;

});

Thanks!

View solution in original post

29 Replies

Avatar

Level 2

Hi ,

I tried using the package for second style plugin. The styles are applied first time but i Can't see checkmark in dropdown as to which style is applied.

Also if I select another style, the previous style doesn't get reset. I see empty span class markups for all styles in source code. It seems that that _resetSelection and _select functions are not working from StyleSelectorImpl.js.

Any help will be really appreciated.

Thanks

Hina

Avatar

Level 4

I too don't see the check mark

Regarding the styles they act toggle so we need to uncheck the existing one before we apply a new style if you don't want to see the old style in source code

Avatar

Community Advisor

GaneshM​ Could you please share the rich text with custom style plugin added? I tried adding following files AEM/RTE/jcr_root/apps/customRTE/plugins/touch-ui-styles/clientlib at master · ganeshmurthi/AEM · Git... but it doesn't seem to work in AEM 6.3. May be I'm missing something here.....

Best regards,
Himanshu Singhal

Avatar

Level 4

Hi Himanshu,

Are you getting any error? are you able to see the plugin RTE? Would you please elaborate whats not working?

Thanks! 

Avatar

Community Advisor

Hi,

After adding the clientlib, I’m not seeing any plugik. Not sure what's missing. Could you please share any rich text component package which contains custom style plugin?

Best regards,

Himanshu Singhal

Avatar

Level 4

Hi Himanshu,

The one attached is fully functional, not sure what you missed. Are you saying you dont see any plugin? or only custom style plugin?

if you dont see only custom plugin, please check plug-in setting (uiSettings) and make sure you added the custom plug-in.

if you dont see any any plugin, its broken due to some error, you might need to check console to find the error.

Let me know what are you seeing or share the screen shot.

Thanks!

Avatar

Level 1

Hi,

 

I am trying to build this custom style plugin in AEM 6.5 but I am I am not getting the plugin. I am also getting one error Uncaught TypeError: Cannot read properties of undefined (reading 'isAnyFeatureEnabled') from /libs/clientlibs/granite/richtext.min.js

Not sure whether this will work in AEM 6.5

 

I trying to build a style plugin that can change the class in the same original tag where the text is instead of adding a new span tag

Avatar

Level 2

@CT1012 @user-97 @GaneshM @Himanshu_Singhal @Hina29 @arunk @arunpatidar 

 

Hello Guys,

 

Could some one please share functional package compatible to AEM 6.5 ?  It will be highly appreciated.