RTE Color Picker Not working

Forum|Forum|5 years ago
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();

}

R

rabisingh

New Participant

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.

Navigate to: /apps/project/rte-plugins/dialog-rte-color-picker/clientlib
Select the "dependencies" properties.
Replace lodash.underscore with cq.underscore.
After the above changes it's working fine.

A

Arunkumarreddy127

New Participant

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

S

salamswapnil

New Participant

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.

Removed underscore dependency
Removed all occurrences of _. from color-picker.js
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

New Participant

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

P

pkrish61

New Participant

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

Employee

@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