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

Show previous replies
arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
September 4, 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";

}

Arun Patidar
    GaneshM
    GaneshM
    Level 3
    September 5, 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!

    CT1012
    CT1012Author
    Level 4
    September 5, 2018

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

    Thank you

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

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

    GaneshM
    GaneshM
    Level 3
    September 7, 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!

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

    GaneshM
    GaneshM
    Level 3
    September 11, 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!

    GaneshM
    GaneshM
    Level 3
    September 11, 2018

    Hi,

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

    GitHub - ganeshmurthi/AEM: AEM Code Snippets

    Thanks!

      CT1012
      CT1012Author
      Level 4
      September 12, 2018

      Thanks for the package, appreciate your quick response.

      Show more replies
      Terms & ConditionsAccessibility statement

      Loading footer...