Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

RTE Color Picker Not working

Avatar

Level 2

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

vivianseba_1-1601474221525.png

 

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

 

1 Accepted Solution

Avatar

Correct answer by
Employee

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

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

View solution in original post

18 Replies

Avatar

Level 2

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....
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-...
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.

vivianseba_0-1601552417100.png

 

Avatar

Correct answer by
Employee

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

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

Avatar

Level 2

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

 

Avatar

Employee

Is there any console error you are getting ? Can you cross check if popover dialog url is correct in color-picker.js Check this constant value PICKER_URL.

Avatar

Level 2

Yes i am getting the below console error and PICKER_URL path is correctly configured.

vivianseba_0-1601547786048.png


After adding your below code snippet above mentioned error was fixed 

if (document.location.pathname.indexOf("/editor.html/") > -1) {
        addDialogTemplate();
    }
But now i am getting some other error in console now
 
vivianseba_0-1601555199737.pngvivianseba_1-1601555269073.png

Could you help me with the fix for this issue ?

 

 

Avatar

Community Advisor

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-c...

 



Arun Patidar

Avatar

Level 2

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

vivianseba_0-1601874380333.png

 

 

 
 
 

 

Avatar

Level 2

Thank you Arun for sharing the link and I have implemented RTE color picker as suggested,Then
I have checked the color picker by clicking the icon and the i am getting the empty dialog screen with the below mentioned console error.
AEM version:6.4.8.2

vivianseba_0-1602058837214.png

vivianseba_1-1602058953825.png

Could you please help me to fix this issue ?

 

 

Avatar

Community Advisor
It could be issue with AEM version, can you try in other version of AEM may be in 6.5?


Arun Patidar

Avatar

Level 1

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.

Avatar

Administrator
@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

Avatar

Level 6

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

 

Arunkumarreddy127_0-1648804251624.png


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

 

Avatar

Level 2

Arunkumarreddy127_1-1648804434387.png

 


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

Avatar

Level 1

 

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.