Second styles plugin for RTE Touch UI AEM 6.3 | Community
Skip to main content
CT1012
CT1012
Level 4
August 27, 2018
Solved

Second styles plugin for RTE Touch UI AEM 6.3

  • August 27, 2018
  • 27 replies
  • 19493 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by GaneshM

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!

27 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
August 27, 2018

Hi,

Please check below article, if helps

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

Arun Patidar
    CT1012
    CT1012Author
    Level 4
    August 28, 2018

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

    smacdonald2008
    smacdonald2008
    Level 10
    August 28, 2018

    Checking with internal team for this use case.

      smacdonald2008
      smacdonald2008
      Level 10
      August 28, 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 Picker Plugin for InPlace…

        CT1012
        CT1012Author
        Level 4
        August 28, 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"/>

        arunpatidar
        Community Advisor
        arunpatidarCommunity Advisor
        Community Advisor
        August 28, 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.

        Arun Patidar
          GaneshM
          GaneshM
          Level 3
          August 28, 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!

            CT1012
            CT1012Author
            Level 4
            August 29, 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?

            GaneshM
            GaneshMAccepted solution
            Level 3
            August 29, 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!

              CT1012
              CT1012Author
              Level 4
              September 4, 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

              Show more replies
              Terms & ConditionsAccessibility statement

              Loading footer...