Color picker 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 the 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 under clientlibs.

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 = *