Rte custom color picker in Touch Ui | Community
Skip to main content
Himanshu_Singhal
Community Advisor
Himanshu_SinghalCommunity Advisor
Community Advisor
June 9, 2016

Rte custom color picker in Touch Ui

  • June 9, 2016
  • 3 replies
  • 7786 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

smacdonald2008
smacdonald2008
Level 10
June 9, 2016

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
Community Advisor
Himanshu_SinghalCommunity AdvisorAuthor
Community Advisor
June 9, 2016

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

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
June 10, 2016

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

Kautuk Sahni
smacdonald2008
smacdonald2008
Level 10
June 9, 2016

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

A
Anonymous
October 17, 2016

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

K
kishorec5702717
February 27, 2017

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

Terms & ConditionsAccessibility statement

Loading footer...