Second styles plugin for RTE Touch UI AEM 6.3

Avatar

Avatar

CT1012

Avatar

CT1012

CT1012

26-08-2018

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

GaneshM

Avatar

GaneshM

GaneshM

29-08-2018

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!

Answers (26)

Answers (26)

Avatar

Avatar

GaneshM

Avatar

GaneshM

GaneshM

11-09-2018

Hi,

Seems you did give me push access, you can download from here

GitHub - ganeshmurthi/AEM: AEM Code Snippets

Thanks!

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

04-09-2018

Hi,

For icon you can add your in css like existing with different class.

http://localhost:4502/etc.clientlibs/clientlibs/granite/coralui2.css

.coral-Icon--textStyle:before {

  content: "\f367";

}

Avatar

Avatar

GaneshM

Avatar

GaneshM

GaneshM

28-08-2018

Hi,

I'm wondering whether the new style plug-in appears in RTE? I had similar requirement where I need to add new styles for RTL languages.

For me the customized plug-in didnt appear in the RTE at all and found CuiToolbarBuilder.js (/libs/clientlibs/granite/coralui2/optional/rte/js/components/rte/ui/CuiToolbarBuilder.js) has defined the in-line and fullscreen plugin configs. I overridden the  CuiToolbarBuilder.js  and CUI.rte.ui.cui.DEFAULT_UI_SETTINGS ( added my custom plugin). It started appearing and worked for me.

'fullscreen': {

  'toolbar': [

   'format#bold',

   'format#italic',

   'format#underline',

   'subsuperscript#subscript',

   'subsuperscript#superscript',

   'edit#cut',

   'edit#copy',

   'edit#paste-default',

   'edit#paste-plaintext',

   'edit#paste-wordhtml',

   'links#modifylink',

   'links#unlink',

   'links#anchor',

   'findreplace#find',

   'findreplace#replace',

   'undo#undo']}

If you are facing different issue, would you please provide some more info.

Thanks!

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

28-08-2018

Hi,

It is not working with AEM 6.3 , becuase AEM 6.3 uses rte.coralui3 instead of rte.coralui2. After adding this all the plugins are gone. There might be a different way to create plugins in AEM 6.3. I am about to share same reference which Scott shared for reference. I'll try and let you know.

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

28-08-2018

Also - see this Blog from our Touch UI expert. When you get into customizing the plug-ins - you typically are dealing with JQuery code.

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

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

28-08-2018

Checking with internal team for this use case.

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

26-08-2018

Avatar

Avatar

GaneshM

Avatar

GaneshM

GaneshM

18-06-2019

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

Avatar

Himanshu_Singhal

MVP

Avatar

Himanshu_Singhal

MVP

Himanshu_Singhal
MVP

17-06-2019

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

Avatar

GaneshM

Avatar

GaneshM

GaneshM

17-06-2019

Hi Himanshu,

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

Thanks! 

Avatar

Avatar

Himanshu_Singhal

MVP

Avatar

Himanshu_Singhal

MVP

Himanshu_Singhal
MVP

17-06-2019

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

Avatar

judehwoo

Avatar

judehwoo

judehwoo

17-01-2019

Have you got to make the check mark work?

Avatar

Avatar

CT1012

Avatar

CT1012

CT1012

15-10-2018

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

Avatar

Hina29

Avatar

Hina29

Hina29

13-10-2018

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

Avatar

CT1012

Avatar

CT1012

CT1012

12-09-2018

Thanks for the package, appreciate your quick response.

Avatar

Avatar

GaneshM

Avatar

GaneshM

GaneshM

11-09-2018

Hi,

I think you need to update the CSS class with proper selector. The RTE has its own classes ex:

<div class=" rte-fullscreen-richtextContainer">

<div class="rte-ui is-desktop">

</div>

</div>

try adding the CSS class with RTE selector like .rte-fullscreen-richtextContainer .customclass { }

Just a thought not sure whether work or not.

However I will share the package.

Thanks!

Avatar

Avatar

CT1012

Avatar

CT1012

CT1012

10-09-2018

It is working for me, i'm able to add span tags now. Somehow it is not displaying the check mark beside the selected class of the drop-down. When we open the plugin we're unable to determine the selected class instead we have to view in source code.

Please share you package if you can,.. Thank you

Avatar

Avatar

GaneshM

Avatar

GaneshM

GaneshM

07-09-2018

Hi,

Seems you were integrated  ACT example with your customization, on selection of styles its passing "actstyles" command, we don't have implementation for actstyles.

I request you to replace the below methods in fontStyle plugin

1. initializeUI Method

initializeUI: function(tbGenerator, options) {

        var plg = CUI.rte.plugins;

        if (this.isFeatureEnabled(ACT.rte.FEATURE.FONT_STYLE.NAME)) {

            this.stylesUI = new tbGenerator.createStyleSelector(ACT.rte.FEATURE.FONT_STYLE.NAME, this, null, this.getStyles());

            tbGenerator.addElement(ACT.rte.FEATURE.FONT_STYLE.NAME, plg.Plugin.SORT_STYLES, this.stylesUI, 700);

        }

    }

2. execute Method

execute: function (cmdId, styleDef) {

      if (!this.stylesUI) {

        return;

      }

      var cmd = null;

      var tagName;

      var className;

      switch (cmdId.toLowerCase()) {

      case 'applystyle':

        cmd = 'style';

        tagName = 'span';

        className = ((styleDef !== null && styleDef !== undefined) ? styleDef

          : this.stylesUI.getSelectedStyle());

        break;

      }

     if (cmd && tagName && className) {

this.editorKernel.relayCmd(cmd, {

          'tag': tagName,

          'attributes': {

            'class': className

          }

        });

      }

    }

with above changes you plug-in works for me, I can see span tag with styling applied.

Let me know if you face any challenges, i will share the package in git.

Thanks!

Avatar

Avatar

CT1012

Avatar

CT1012

CT1012

07-09-2018

H

Looks like it is not going into execute method, i don't see any logs.

I'm getting null at this  "styleableObject" in update state function

Avatar

Avatar

CT1012

Avatar

CT1012

CT1012

05-09-2018

Hi if you're asking for FontStylePlugin.js in the plugin folder

One i've added in content.xml

                                                <fontstyles

                                                    jcr:primaryType="nt:unstructured"

                                                    items="fontstyles:getStyles:fontstyles-pulldown"

                                                    ref="fontstyles"/>

Avatar

Avatar

CT1012

Avatar

CT1012

CT1012

05-09-2018

I found this Documentation | CoralUI where we can see attributes for  OOTB icons, i used one of them

Thank you

Avatar

Avatar

GaneshM

Avatar

GaneshM

GaneshM

05-09-2018

Hi,

The builder code looks fine and seems you haven't attached the "fontstyles" plug-in. The style execution happens in plug-in or command.

Please add some log in execute method in "fontstyles" and see whether the request reaches or not.

If possible, please share the plug-in.

Thanks!

Avatar

Avatar

CT1012

Avatar

CT1012

CT1012

04-09-2018

I'm able to display the drop down now, thanks for your input it worked!

Somehow selection of classes under dropdown is not working, it is not throwing any errors too

Can you please take a look at the new RTE package I've customized for secondary styles plugin  CT1012/secondary-styles-RTE.zip at master · CT1012/CT1012 · GitHub

- Please suggest me for change of ICON too, we need to distinguish two toolbar style icons

Currently I've given the same one as OOTB styles

'#styles': 'textStyle',

'#fontstyles': 'textStyle',

TIA

Avatar

Avatar

CT1012

Avatar

CT1012

CT1012

29-08-2018

Hi

I'm using the above implementation shared AEM | RTE – Custom Styles Plugin – Touch UI – Need is the mother of invention …

He extended an CuiToolbarBuilder to add new plugins in the above shared link but it is not working in AEM 6.3

Do you want me to override "/libs/clientlibs/granite/coralui2/optional/rte/js/components/rte/ui/CuiToolbarBuilder.js" with toobar and popovers for the new plugin to appear in RTE?? Do i need to change it at any other place?

Avatar

Avatar

CT1012

Avatar

CT1012

CT1012

28-08-2018

It is breaking the RTE and i'm seeing the below error in browser

richtext.js:42258 Uncaught TypeError: Cannot read property 'isAnyFeatureEnabled' of undefined

    at featureEnabled (richtext.js:42258)

    at popoverAvailable (richtext.js:42274)

    at instanceGenerator._buildToolbar (richtext.js:42321)

    at instanceGenerator.createToolbar (richtext.js:42478)

    at instanceGenerator.createToolbar (richtext.js:4906)

    at instanceGenerator.initializeEditorKernel (richtext.js:47715)

    at instanceGenerator.startEditing (richtext.js:48082)

    at instanceGenerator.start (richtext.js:48112)

    at processConfig (richtext.js:38740)

    at Object.success (richtext.js:38769)

dialogFullScreen popovers I've added under _cq_dialog

#fontstyles in toolbar

&

<fontstyles

     jcr:primaryType="nt:unstructured"

     items="fontstyles:getStyles:styles-pulldown"

     ref="fontstyles"/>

Avatar

Avatar

CT1012

Avatar

CT1012

CT1012

28-08-2018

This isn't working for AEM 6.3, what do i need to add in RTE content.xml?