5 Replies Latest reply on Jan 22, 2018 7:53 AM by naveeng73207107

    Enable Lowercase alphabets in RTE component in touch ui

    naveeng73207107

      Hello Team ,

       

      How to enable Ordered List of lower case alphabets label in custom RTE component. As of now we have only Unordered,Ordered(number labeled),indent and outdent in RTE component, I need to add Alphabets label list in RTE component.

       

      Capture.PNG

       

      Like above attached snapshot, I need lists in a,b,c.. Can you please anyone guide me to achieve this?

       

      Thanks,

      Naveen

        • 1. Re: Enable Lowercase alphabets in RTE component in touch ui
          smacdonald2008 Adobe Employee

          We are checking internally for this.

          • 5. Re: Enable Lowercase alphabets in RTE component in touch ui
            naveeng73207107 Level 1

            Hi Sree,

             

            Thanks for the post and I tried to use your code for AEM 6.1 and facing an issue like, when I have selected numbered list in touch ui, it takes alphabets list and alphabet list icon is not selected and disabled instead numbered list icon is selected always.

            Below is the code I used :

             

            (function ($) {

                "use strict";

             

                var _ = window._,

                    Class = window.Class,

                    GROUP = "experience-aem",

                    ALPHA_LIST_FEATURE = "alphaList",

                    ORDERED_LIST_CMD = "insertorderedlist",

                    CUI = window.CUI;

             

             

                addPluginToDefaultUISettings();

             

             

                var EAEMAlphaListCmd = new Class({

                    extend: CUI.rte.commands.List,

             

             

                    toString: "EAEMAlphaListCmd",

             

             

                    execute: function(execDef) {

                        this.superClass.execute.call(this, execDef);

             

             

                        var list = this.getDefiningListDom(execDef.editContext, execDef.nodeList);

             

             

                        if(!list){

                            return;

                        }

             

             

                        $(list).attr("type", "a");

                    }

                });

             

             

                CUI.rte.commands.CommandRegistry.register("_list", EAEMAlphaListCmd);

             

             

                var EAEMAlphaListPlugin = new Class({

                    toString: "EAEMAlphaListPlugin",

             

             

                    extend: CUI.rte.plugins.Plugin,

             

             

                    pickerUI: null,

             

             

                    getFeatures: function () {

                        return [ALPHA_LIST_FEATURE];

                    },

             

             

                    initializeUI: function(tbGenerator) {

                        var plg = CUI.rte.plugins;

             

             

                        if (!this.isFeatureEnabled(ALPHA_LIST_FEATURE)) {

                            return;

                        }

             

             

                        this.pickerUI = tbGenerator.createElement(ALPHA_LIST_FEATURE, this, false, this.getTooltip("toggle"));

                        tbGenerator.addElement(GROUP, plg.Plugin.SORT_FORMAT, this.pickerUI, 10);

             

             

                        var groupFeature = GROUP + "#" + ALPHA_LIST_FEATURE;

                        tbGenerator.registerIcon(groupFeature, "coral-Icon coral-Icon--textLetteredLowercase");

                    },

             

             

                    execute: function (id, value, envOptions) {

                        if (!isValidSelection()) {

                            return;

                        }

             

                        this.editorKernel.relayCmd(ORDERED_LIST_CMD);

             

                        function isValidSelection(){

                            var winSel = window.getSelection();

                            return winSel && (winSel.rangeCount == 1) && (winSel.getRangeAt(0).toString().length > 0);

                        }

                    },

             

                    updateState: function(selDef) {

                        var hasUC = this.editorKernel.queryState(ALPHA_LIST_FEATURE, selDef);

             

                        if (this.pickerUI != null) {

                            this.pickerUI.setSelected(hasUC);

                        }

                    }

                });

             

                function addPluginToDefaultUISettings(){

                   var toolbar = CUI.rte.ui.cui.DEFAULT_UI_SETTINGS.inline.toolbar;

                    toolbar.splice(3, 0, GROUP + "#" + ALPHA_LIST_FEATURE);

             

                    toolbar = CUI.rte.ui.cui.DEFAULT_UI_SETTINGS.fullscreen.toolbar;

                    toolbar.splice(3, 0, GROUP + "#" + ALPHA_LIST_FEATURE);

                }

             

                CUI.rte.plugins.PluginRegistry.register(GROUP,EAEMAlphaListPlugin);

            })(jQuery);