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
Views
Replies
Total Likes
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
Views
Replies
Total Likes
But, how can we have it included in Touch UI RTE in-place editing fields?
Views
Replies
Total Likes
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
Link:- http://experience-aem.blogspot.in/2015/10/aem-61-touchui-rich-text-editor-color-picker-plugin.html
I hope this would be helpful to you.
Thanks and Regards
Kautuk Sahni
Views
Replies
Total Likes
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
Link:- http://experience-aem.blogspot.in/2015/10/aem-61-touchui-rich-text-editor-color-picker-plugin.html
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.
Views
Replies
Total Likes
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
Link:- http://experience-aem.blogspot.in/2015/10/aem-61-touchui-rich-text-editor-color-picker-plugin.html
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
Views
Replies
Total Likes
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
Views
Replies
Total Likes
could you resolve this?
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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
Views
Replies
Total Likes
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
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies