RTE Color Picker Not working | Community
Skip to main content
V
vivianseba
Level 2
September 30, 2020
Solved

RTE Color Picker Not working

  • September 30, 2020
  • 7 replies
  • 10599 views

Hi,

I have upgraded application from AEM 6.4.2 to AEM 6.4.8.2 SP and after the upgrade In the RTE color picker feature is not working and getting the dialog like below

 

I have referred this blog - http://experience-aem.blogspot.com/2018/05/aem-64-touch-ui-rte-rich-text-editor-color-picker-plugin.html  and implemented the RTE color picker feature in aem 6.4.2.
Could you please suggest with solution for this issue ?

 

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 Vishalverma

@vivianseba Try adding below check before calling function addDialogTemplate() in color-picker.js;

if (document.location.pathname.indexOf("/editor.html/") > -1) {
        addDialogTemplate();
    }

7 replies

vanegi
Adobe Employee
vanegiAdobe Employee
Adobe Employee
September 30, 2020

Can you check this http://experience-aem.blogspot.com/2017/06/aem-63-touch-ui-rte-rich-text-editor-color-picker-plugin-inplace-dialog-edit.html and implement the color plugin as described on this blog?

    V
    viviansebaAuthor
    Level 2
    October 1, 2020

    Hi Vanegi,
    I have implemented the RTE color picker with this aem 6.4 link --> http://experience-aem.blogspot.com/2018/05/aem-64-touch-ui-rte-rich-text-editor-color-picker-plugin.html
    Should i need to implement like your mentioned link --> http://experience-aem.blogspot.com/2017/06/aem-63-touch-ui-rte-rich-text-editor-color-picker-plugin-inplace-dialog-edit.html
    Please suggest?
    After the migration from 6.4.2 to 6.4.8.2 SP i am getting the below error message in the console while selecting the color picker.

     

      V
      Adobe Employee
      VishalvermaAdobe EmployeeAccepted solution
      Adobe Employee
      September 30, 2020

      @vivianseba Try adding below check before calling function addDialogTemplate() in color-picker.js;

      if (document.location.pathname.indexOf("/editor.html/") > -1) {
              addDialogTemplate();
          }
        V
        viviansebaAuthor
        Level 2
        October 1, 2020

        Hi,
        I have added the above mentioned code in color-picker.js file and it's not working.

         

          N
          Nnani
          December 9, 2024

          yes for me also its not working

           

          arunpatidar
          Community Advisor
          arunpatidarCommunity Advisor
          Community Advisor
          October 1, 2020

          Can you check if underscore js is loading or not? mentioned as a dependency for RTE color picker

          https://github.com/schoudry/eaem-extensions/blob/master/eaem-64-extensions/eaem-touchui-dialog-rte-color-picker/jcr_root/apps/eaem-touchui-dialog-rte-color-picker/clientlib/.content.xml

           

          Arun Patidar
            V
            viviansebaAuthor
            Level 2
            October 5, 2020

            Hi Arun,
            I have checked and underscore.js is loading fine.

             

             

             
             
             

             

              P
              pkrish61
              February 26, 2021

              If you are still facing the issue, 

               

              Create underscore.js and handlebars.js files in color picker component's client libs and add them to js.txt before component.js name. It appears aem 6.4.8.2 is not loading the required dependencies so we had to add them into component client libs.

                kautuk_sahni
                Community Manager
                kautuk_sahniCommunity Manager
                Community Manager
                March 2, 2021
                @pkrish61 Thank you for sharing the answer with community. Please keep this wonderful community work Going. AEM community needs SMEs like you. Thank you.
                Kautuk Sahni
                S
                Community Advisor
                salamswapnilCommunity Advisor
                Community Advisor
                October 5, 2021

                We too faced this same issue with SP 6.5.10. It was working with SP 6.5.8. To fix it permanently we did below changes.

                1. Removed underscore dependency
                2. Removed all occurrences of _. from color-picker.js
                3. Added below functions in color-picker.js
                isEmpty = function(item) {
        console.log('item = ',item);
        if(!item) { 
            return true; 
        }
        var len;
        if(item.length || item.length === 0){
        	len = item.length;
        } else {
        	if(typeof item === 'object') {
        		len = Object.keys(item).length;
        	}
        }
        return len === 0;
	}

    isUndefined = function(item) {
    	if(item === undefined) {
    		return true;
    	} else {
    		return false;
    	}
    }

    defer = function(item) {
    	setTimeout(() => {item()})
    }

                Reference: Please check comment from HonorSpren on this blog from @arunpatidar

                https://aemlab.blogspot.com/2019/07/aem-rte-custom-plugins-1.html

                 

                  A
                  Arunkumarreddy127
                  Level 2
                  April 1, 2022


                  Try changing dependency from underscore to lodash.underscore. This worked for me.

                   

                    A
                    Arunkumarreddy127
                    Level 2
                    April 1, 2022

                     


                    Try changing dependency from underscore to lodash.underscore. This worked for me.

                      R
                      rabisingh
                      May 21, 2024

                       

                      I face the same issue (RTE color picker feature is not working) when we upgrade the service pack 6.5.20.

                      Solution:- Below are the steps to resolve the RTE color picker issue.

                      1. Navigate to: /apps/project/rte-plugins/dialog-rte-color-picker/clientlib

                      2. Select the "dependencies" properties.

                      3. Replace lodash.underscore with cq.underscore.
                        After the above changes it's working fine.

                      Terms & ConditionsAccessibility statement

                      Loading footer...