Colorpicker RTE plugin for Richtext

1.  Create a clientlibs node (nodeTypecq:ClientLibraryFolder) under the root node of the project.
e.g. /apps/training
Assign the following properties to the newly created clientlibs node 
the property that identifies the category these custom Widgets will be referenced by

Name  = categories
Type  =  String []
Value  =  colorpicker.widgets
the property that defines JS library dependencies

Name  =  dependencies
Type  =  String[]
Value  =  cq.jquery#cq.foundaion-main

2.  Create a css folder under the newly created clientlibs node.
3.  Create a js folder under the newly created clientlibs node.
4.  Create a css.txt file under the newly created clientlibs node.
5.  Create a js.txt file under the newly created clientlibs node.
6.  Create colorpickerplugin.Js and colorpickerdialog.js in js folder under  clientlibs

colorpickerplugin.Js

 /**
 * @class CQ.form.rte.plugins.HtmlColorPickerPlugin
 * @extends CQ.form.rte.plugins.Plugin
 * <p>This class builds a Colorpicker pop up as a plugin.</p>
 * <p>The plugin ID is "<b>Colorpicker</b>".</p>
 * <p><b>Features</b></p>
 * <ul>
 *   <li><b>colorpicker</b> - pops up Colorpicker dialog</li>
 * </ul>
 */
CQ.form.rte.plugins.HtmlColorPickerPlugin = CQ.Ext.extend(CQ.form.rte.plugins.Plugin, {

/**
 * @private
 */
htmlColorPickerDialog: null,
/**
 * @private
 */
colorPickerText: null,
   /**
 * @private
 */
envEditContext:null,

constructor: function(editorKernel) {
CQ.form.rte.plugins.HtmlColorPickerPlugin.superclass.constructor.call(this,
editorKernel);
},
callDialog: function(context) {

if (CQ.Ext.isIE) {
this.savedRange = context.doc.selection.createRange();
}
var editorKernel = this.editorKernel;

var configdialog = {
"editContext": context,
"title": CQ.I18n.getMessage("Color Picker"),
"colorPickerText": this.colorPickerText,
"insertContentIntoRTE": this.insertContentIntoRTE.createDelegate(this),
"cancelFn": this.execCancel.createDelegate(this),
"listeners": {
"show": function() {
editorKernel.fireUIEvent("dialogshow");
},
"hide": function() {
editorKernel.fireUIEvent("dialoghide");
}
}
};
this.htmlColorPickerDialog =
                                        new CQ.form.rte.plugins.HtmlColorPickerDialog(configdialog);
this.htmlColorPickerDialog.setPosition(
                                                   this.editorKernel.calculateWindowPosition("left"));

this.htmlColorPickerDialog.show();
window.setTimeout(function() {
this.htmlColorPickerDialog.toFront();
this.htmlColorPickerDialog.focus();
}.createDelegate(this), 10);
},

getYourData: function(){

 // You might want to do something here and populate a value that needs to go inside your dialog.
this.colorPickerText = "Color Picker RTE Plugin";
this.callDialog(this.envEditContext);
},

// This gets called when you click OK button from your dialog
insertContentIntoRTE: function(context, options, dialog) {
 var selectionDef = this.editorKernel.analyzeSelection();
 var nodelist = selectionDef["nodeList"];
 var node = nodelist["nodes"][0];
 var nodeDom = node["dom"];
 var nodeText = nodeDom["nodeValue"];
 var selectedText=nodeText.substring(node["startPos"], node["startPos"] +
                                                            node["charCnt"]);
 var color;
 for(var opt in options){
if(opt!=undefined && opt!="" && opt!='remove' && opt!='indexOf'){
                                              //for IE alone indexOf comes as a function
color = options[opt].value;
}
}
var style="style=color:#"+color;
var htmlCode = '<span '+style+'>' + selectedText + '</span>';

this.editorKernel.execCmd("inserthtml", htmlCode);
dialog.hide();
},

// This gets called when you click Cancel button from your dialog
execCancel: function() {

},

getFeatures: function() {
return [ "colorpicker" ];
},

initializeUI: function(tbGenerator) {
var plg = CQ.form.rte.plugins;
var ui = CQ.form.rte.ui;
if (this.isFeatureEnabled("colorpicker")) {
this.checkTextUI = new ui.TbElement("colorpicker", this,
                                                                                       true,this.getTooltip("colorpicker"));
tbGenerator.addElement("htmlColorPicker", plg.Plugin.SORT_LISTS,
                                                                               this.checkTextUI,10);
}

},

notifyPluginConfig: function(pluginConfig) {
pluginConfig = pluginConfig || { };
CQ.Util.applyDefaults(pluginConfig, {
"tooltips": {
"colorpicker": {
"title": CQ.I18n.getMessage("Color Picker"),
"text":  CQ.I18n.getMessage("Color Picker pop-up")
}
}
});
this.config = pluginConfig;
},

execute: function(id, value, env) {
switch (id) {
case "colorpicker":
this.envEditContext = env.editContext;
this.getYourData();               
break;
}

},

updateState: function(selDef) {

// todo implement
}

});


// register plugin
CQ.form.rte.plugins.PluginRegistry.register("htmlColorPicker",
CQ.form.rte.plugins.HtmlColorPickerPlugin);

     

colorpickerdialog.js

/**
 * @class CQ.form.rte.plugins.HtmlColorPickerDialog
 * @extends CQ.Ext.Window
 * @private
 * This class implements the Hello World dialog.
 */
CQ.form.rte.plugins.HtmlColorPickerDialog = CQ.Ext.extend(CQ.Ext.Window, {
editContext: null,
insertContentIntoRTE: null,
constructor: function(config) {
var dialogRef = this;
var dialogItems = [ ];
var buttonItems = [ ];
var defaults = {
"title": "Html Color Picker"
};
CQ.Util.applyDefaults(config, defaults);
CQ.Ext.apply(this, config);
dialogItems.push({
"itemId": "colorPickerField",
"name": "colorPickerField",
"xtype": "colorfield",           
"fieldLabel": "colorPickerField",
"colors":['000000', '993300', '333300', '003300', '003366', '000080', '333399',
                                                    '333333','800000', 'FF6600', '808000', '008000', '008080', '0000FF',
                                                   '666699', '808080','FF0000', 'FF9900', '99CC00', '339966', '33CCCC',
                                                   '3366FF', '800080', '969696','FF00FF', 'FFCC00', 'FFFF00', '00FF00',
                                                   '00FFFF', '00CCFF', '993366', 'C0C0C0','FF99CC', 'FFCC99',
                                                    'FFFF99', 'CCFFCC', 'CCFFFF', '99CCFF', 'CC99FF', 'FFFFFF' ]
  });
// Buttons
buttonItems.push({
"itemId": "ok",
"name": "ok",
"text": "OK",
"handler": function() {
this.applyDialog(this.insertContentIntoRTE, null);
},
"scope": this
});
buttonItems.push({
"text": "Cancel",
"handler": function() {
if (this.cancelFn) {
this.cancelFn();
}
this.hide();
},
"scope": this
});
CQ.form.rte.plugins.HtmlColorPickerDialog.superclass.constructor.call(this, {
"renderTo": CQ.Util.ROOT_ID,
"title": this.title,
"stateful": false,
"minWidth": 400,
"minHeight": 170,
"width": 400,
"height": 310,
"plain": true,
"layout": "fit",
"items": [ {
"xtype": "panel",
"layout": "fit",
"stateful": false,
"items": [ {
"border": false,
"xtype": "form",
"itemId": "ColorPickerForm",
"name": "ColorPickerForm",
"stateful": false,
"autoHeight": true,
"items": dialogItems,
"bodyStyle": "overflow: auto;",
"afterRender": function() {
CQ.Ext.Panel.prototype.afterRender.call(this);
dialogRef.findItems = this.items;
this.body.addClass("cq-rte-helloworlddialog");
}
}
]
}
],
"buttons": buttonItems,
"modal": true
});
},
applyDialog: function(fn, options) {
options = options || [];
if (fn) {
var colorPickerTextValue = this.findItems.get("colorPickerField").getValue();
options.push({value: colorPickerTextValue, name: 'colorPickerTextValue'});
fn(this.editContext, options, this);
}
},
cancelFn: function(){

//Implement here
}
});


7.  List colorpickerplugin.js and  colorpickerdialog.js in js.txt file.
8.  Create cloorpicker.css in css folder under  clientlibs.

cloorpicker.css 

@CHARSET "UTF-8";
#CQ .x-html-editor-tb .x-edit-colorpicker{
  background: url(/libs/cq/ui/widgets/themes/default/icons/16x16/colorpicker.jpg)
                           center no-repeat;
}

9.  List cloorpicker.css in css.txt file underclientlibs.

10. Create a htmlColorPicker node (nodeType nt:unstructured) under the Training Complex Component's Dialog tab 1 widget collection.

e.g./apps/<project>/components/content/Complex/dialog/items/items/tab1/items/text/rtePlugins
 Assign the following properties to the newly created htmlColorPicker node:

 the property that will define where the content is stored

Name  =  features
Type  =  String
Value  =  *