Rte custom color picker in Touch Ui

[Himanshu_Singhal]

Hi,

I want to add custom color picker in touch ui. For that, I followed the blog, http://experience-aem.blogspot.in/2015/10/aem-61-touchui-rich-text-editor-color-picker-plugin.html

From here, I downloaded the package and installed it on my crx/de. After that, I created a rte component.

cq:dialog of RTE :

<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="nt:unstructured" jcr:title="Rich Text" sling:resourceType="cq/gui/components/authoring/dialog"> <content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/tabs" type="nav"/> <items jcr:primaryType="nt:unstructured"> <text jcr:primaryType="nt:unstructured" jcr:title="Rich Text" sling:resourceType="granite/ui/components/foundation/container"> <items jcr:primaryType="nt:unstructured"> <fieldset jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/fieldset"> <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/> <items jcr:primaryType="nt:unstructured"> <text jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> <items jcr:primaryType="nt:unstructured"> <richtext jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text"> <richFlag jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/hidden" name="./textIsRich" value="true"/> </richtext> </items> </text> </items> </fieldset> </items> </text> </items> </content> </jcr:root>

cq:editConfig Node configuration for Inline editing:

<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" cq:dialogMode="floating" cq:disableTargeting="{Boolean}true" cq:layout="editbar" jcr:mixinTypes="[cq:ReplicationStatus]" jcr:primaryType="cq:EditConfig"> <cq:listeners jcr:primaryType="cq:EditListenersConfig" afterdelete="REFRESH_PAGE" afteredit="REFRESH_PAGE"/> <cq:inplaceEditing jcr:primaryType="cq:InplaceEditingConfig" active="{Boolean}true" editorType="text"> <config jcr:primaryType="nt:unstructured"> <rtePlugins jcr:primaryType="nt:unstructured"> <links jcr:primaryType="nt:unstructured" features="*"/> <edit jcr:primaryType="nt:unstructured" features="*"/> <findreplace jcr:primaryType="nt:unstructured" features="*"/> <format jcr:primaryType="nt:unstructured" features="*"/> <image jcr:primaryType="nt:unstructured" features="*"/> <keys jcr:primaryType="nt:unstructured" features="*"/> <justify jcr:primaryType="nt:unstructured" features="*"/> <lists jcr:primaryType="nt:unstructured" features="*"/> <misctools jcr:primaryType="nt:unstructured" features="*"/> <paraformat jcr:primaryType="nt:unstructured" features="*"/> <spellcheck jcr:primaryType="nt:unstructured" features="*"/> <subsuperscript jcr:primaryType="nt:unstructured" features="*"/> <table jcr:primaryType="nt:unstructured" features="*"/> <undo jcr:primaryType="nt:unstructured" features="*"/> <touchuicolorpicker jcr:primaryType="nt:unstructured" features="*"/> </rtePlugins> </config> </cq:inplaceEditing> </jcr:root>

Now, I'm getting a icon while I do in-place editing on this component but I'm able to apply color on text as when I select the text portion and click on color picker icon, the selected text automatically gets unselected.

You can have look at the custom code package by downloading from the above link.

Thanks & Regards,

Himanshu

[smacdonald2008]

For a Touch UI COlor Picker - see the HELPX article and sample package: 

How to create an AEM Touch UI Color Picker

Hope this helps

[Himanshu_Singhal]

But, how can we have it included in Touch UI RTE in-place editing fields?

[kautuk_sahni]

himanshusinghal wrote...

But, how can we have it included in Touch UI RTE in-place editing fields?

Hi 

Please have a look at these community articles:- 

Link:- http://experience-aem.blogspot.in/2015/01/aem-6-sp1-touchui-richtext-editor-color-picker-plugin.html

Demo | Package Install

Link:- http://experience-aem.blogspot.in/2015/10/aem-61-touchui-rich-text-editor-color-picker-plugin.html

Demo | Package Install

I hope this would be helpful to you.

Thanks and Regards

Kautuk Sahni

[Himanshu_Singhal]

kautuksahni wrote...

himanshusinghal wrote...

But, how can we have it included in Touch UI RTE in-place editing fields?

Hi 

Please have a look at these community articles:- 

Link:- http://experience-aem.blogspot.in/2015/01/aem-6-sp1-touchui-richtext-editor-color-picker-plugin.html

Demo | Package Install

Link:- http://experience-aem.blogspot.in/2015/10/aem-61-touchui-rich-text-editor-color-picker-plugin.html

Demo | Package Install

I hope this would be helpful to you.

Thanks and Regards

Kautuk Sahni

Followed this link: Link:- http://experience-aem.blogspot.in/2015/01/aem-6-sp1-touchui-richtext-editor-color-picker-plugin.html

Plugin is getting displayed in AEM 6.0 SP3. When I type text on RTE and select it to apply the color, 1st time it works fine. But, next time, when I select text and click on icon, the selected text automatically gets unselected and due to that color doesn't apply.

[kautuk_sahni]

himanshusinghal wrote...

kautuksahni wrote...

himanshusinghal wrote...

But, how can we have it included in Touch UI RTE in-place editing fields?

Hi 

Please have a look at these community articles:- 

Link:- http://experience-aem.blogspot.in/2015/01/aem-6-sp1-touchui-richtext-editor-color-picker-plugin.html

Demo | Package Install

Link:- http://experience-aem.blogspot.in/2015/10/aem-61-touchui-rich-text-editor-color-picker-plugin.html

Demo | Package Install

I hope this would be helpful to you.

Thanks and Regards

Kautuk Sahni

Followed this link: Link:- http://experience-aem.blogspot.in/2015/01/aem-6-sp1-touchui-richtext-editor-color-picker-plugin.html

Plugin is getting displayed in AEM 6.0 SP3. When I type text on RTE and select it to apply the color, 1st time it works fine. But, next time, when I select text and click on icon, the selected text automatically gets unselected and due to that color doesn't apply.

Hi,

Can you please share with us the error on browser or AEM error.log  when second time problem occurs.

Thanks and Regards

Kautuk Sahni

[Himanshu_Singhal]

Nothing I'm getting in error.log file.

What's happening is, when 1st time we open rte in-place editing and type text, then select the text to apply color, it works fine.

But, then again, we type text and select it to apply color, it doesn't work.

Next time, it only works when we close the rte in-place editing window and then open it again. When we open rte in-place editing window again or first time we open and click on icon to apply color, it display no color chosen and then when we choose color then only it works.

After choosing a color, it doesn't work unless we close window then next time click on color icon to choose color(that time,again we comes to it's initial state i.e. no color chosen).

Thanks,

Himanshu

[Farnain]

could you resolve this?

[smacdonald2008]

The article I referenced is about creating a field on the dialog that represents the color picker - not a plug-in.

For your use case - i suppose you need to follow the original article, If you ahve questions on that article - contact the author of the artilce by leaving a comment on his blog: 

http://experience-aem.blogspot.ca/2015/10/aem-61-touchui-rich-text-editor-color-picker-plugin.html

[Former Community Member]

Hi Himanshu,

I have used the below link to implement the RTE Plugin:
http://experience-aem.blogspot.in/2015/10/aem-61-touchui-rich-text-editor-color-picker-plugin.html

The Problem i'm facing is, after trying the same above example from the link. I cannot see anything option like ColorPicker coming in my RTE TouchUI Page. Even I tried using and implementing the same thing from other text(myText) Component rather than Out of Box Component.Still I'm unable to get it in my RTE options.

Please can help me out ASAP.

Regards,

Nisha M.R

[kishorec5702717]

Himanshu,

I have same issue unable to change color unless I refresh the page. Its unselects the text and add color span at the end of selection.I see below error in the browser console

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at Object.restructureAsChild (https://gem-qa-auth.aexp.com/etc/clientlibs/granite/coralui2/optional/rte.js:8670:22)
    at instanceGenerator.surround (https://gem-qa-auth.aexp.com/etc/clientlibs/granite/coralui2/optional/rte.js:11716:37)
    at instanceGenerator.execute (https://gem-qa-auth.aexp.com/apps/gem/components/content/richtext/clientlib-colorpicker.js:276:22)
    at instanceGenerator.execCmd (https://gem-qa-auth.aexp.com/etc/clientlibs/granite/coralui2/optional/rte.js:3157:41)
    at instanceGenerator.<anonymous> (https://gem-qa-auth.aexp.com/etc/clientlibs/granite/coralui2/optional/rte.js:3034:36)
    at callFn (https://gem-qa-auth.aexp.com/etc/clientlibs/granite/coralui2/optional/rte.js:1494:28)
(anonymous) @ rte.js:3065
callFn @ rte.js:1494
rte.js:9200 Uncaught TypeError: Cannot read property 'nodeType' of null
    at Object.joinIdenticalStructures (rte.js:9200)
    at instanceGenerator.surround (rte.js:11748)
    at instanceGenerator.execute (clientlib-colorpicker.js:276)
    at instanceGenerator.execCmd (rte.js:3157)
    at instanceGenerator.<anonymous> (rte.js:3034)
    at callFn (rte.js:1494)

Thanks in advance

Regards

Kishore

[kishorec5702717]

Himanshu,

I have same issue unable to change color unless I refresh the page. Its unselects the text and add color span at the end of selection.I see below error in the browser console

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at Object.restructureAsChild (https://gem-qa-auth.aexp.com/etc/clientlibs/granite/coralui2/optional/rte.js:8670:22)
    at instanceGenerator.surround (https://gem-qa-auth.aexp.com/etc/clientlibs/granite/coralui2/optional/rte.js:11716:37)
    at instanceGenerator.execute (https://gem-qa-auth.aexp.com/apps/gem/components/content/richtext/clientlib-colorpicker.js:276:22)
    at instanceGenerator.execCmd (https://gem-qa-auth.aexp.com/etc/clientlibs/granite/coralui2/optional/rte.js:3157:41)
    at instanceGenerator.<anonymous> (https://gem-qa-auth.aexp.com/etc/clientlibs/granite/coralui2/optional/rte.js:3034:36)
    at callFn (https://gem-qa-auth.aexp.com/etc/clientlibs/granite/coralui2/optional/rte.js:1494:28)
(anonymous) @ rte.js:3065
callFn @ rte.js:1494
rte.js:9200 Uncaught TypeError: Cannot read property 'nodeType' of null
    at Object.joinIdenticalStructures (rte.js:9200)
    at instanceGenerator.surround (rte.js:11748)
    at instanceGenerator.execute (clientlib-colorpicker.js:276)
    at instanceGenerator.execCmd (rte.js:3157)
    at instanceGenerator.<anonymous> (rte.js:3034)
    at callFn (rte.js:1494)

Thanks in advance

Regards

Kishore