Rte custom color picker in Touch Ui

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