You can use the belowJS for sample validator plugin for Rich text editor-
CUI.rte.plugins.ValidatorPlugin = new Class({
toString: "ValidatorPlugin",
extend: CUI.rte.plugins.Plugin,
/**
* RTE plugin for maximun length check. If maxlength is set to 0 the validation will not happen. Set a number
* greater than 0 for maxlength property.
*/
/**
* @private
*/
alertShown: false,
errorEl: null,
/**
* @private
*/
_init: function(editorKernel) {
this.inherited(arguments);
editorKernel.addPluginListener("beforekeydown", this.handleKeyDown, this, this,
false);
editorKernel.addPluginListener("keyup", this.handleKeyUp, this, this,
false);
editorKernel.addPluginListener("paste", this.handlePaste, this, this.editContext,
false);
},
handlePaste: function(e, ctx) {
var k = e.nativeEvent;
var newtext, existingText, isIE;
var clp = (k.originalEvent || k).clipboardData;
var ek = this.editorKernel;
existingText = $(e.editContext.root).context.textContent;
if (clp === undefined || clp === null) {
newtext = window.clipboardData.getData('Text');
isIE = true;
} else {
newtext = clp.getData('text/plain');
isIE = false;
}
var fulltext = existingText + newtext;
//console.log("hi");
//console.log("Existing: " + existingText);
console.log("value: " + fulltext);
var len = fulltext.length;
if (len > this.config.maxlength && this.config.maxlength != 0) {
this.showError(ek, "Maximum character limit: '" + this.config.maxlength + "' reached!");
$(e.editContext.root).context.textContent = fulltext.substr(0, this.config.maxlength);
k.preventDefault();
}
},
/**
* Handles key strokes.
* @param {Object} e The plugin event
* @private
*/
handleKeyDown: function(e, k) {
//Don't handle delete, backspace and arrow clicks
if (e.isBackSpace() || e.isDelete() || e.isShift() || e.ctrlKeyPressed ||
(e.charCode > 32 && e.charCode < 41)) {
return;
}
var context = e.editContext;
var dpr = CUI.rte.DomProcessor;
var sel = CUI.rte.Selection;
var com = CUI.rte.Common;
var lut = CUI.rte.ListUtils;
var ek = this.editorKernel;
/* if(e.charCode==13)
{
debugger;
}*/
if (!this.isValidMaxLength(e, context)) {
this.showError(ek, "Maximum character limit: '" + this.config.maxlength + "' reached!");
e.preventDefault();
return;
}
},
showError: function(ek, message) {
if (!this.alertShown) {
ek.getDialogManager().alert(
CUI.rte.Utils.i18n("Error"),
CUI.rte.Utils.i18n(message),
CUI.rte.Utils.scope(this.focus, this));
this.alertShown = true;
} else {}
},
/**
* Handles post-processing required for all browsers. The method is called whenever a
* key has been pressed.
* @param {Object} e The plugin event
* @private
*/
handleKeyUp: function(e) {},
isValidMaxLength: function(e, context) {
if (this.config.maxlength == 0) {
return true;
}
var length = context.root.textContent.length;
var $contentEditable = $('#ContentFrame').contents().find('[contenteditable="true"]').length ? $('#ContentFrame').contents().find('[contenteditable="true"] p>br') : $('[contenteditable="true"] p>br');
length += $contentEditable.length;
if (length >= this.config.maxlength) {
return false;
}
return true;
},
notifyPluginConfig: function(pluginConfig) {
pluginConfig = pluginConfig || {};
CUI.rte.Utils.applyDefaults(pluginConfig, {
"maxlength": 0,
});
this.config = pluginConfig;
}
});
//register plugin
CUI.rte.plugins.PluginRegistry.register("customvalidate", CUI.rte.plugins.ValidatorPlugin);
CUI.rte.plugins.ValidatorPlugin = new Class({
toString: "ValidatorPlugin",
extend: CUI.rte.plugins.Plugin,
/**
* RTE plugin for maximun length check. If maxlength is set to 0 the validation will not happen. Set a number
* greater than 0 for maxlength property.
*/
/**
* @private
*/
alertShown: false,
errorEl: null,
/**
* @private
*/
_init: function(editorKernel) {
this.inherited(arguments);
editorKernel.addPluginListener("beforekeydown", this.handleKeyDown, this, this,
false);
editorKernel.addPluginListener("keyup", this.handleKeyUp, this, this,
false);
editorKernel.addPluginListener("paste", this.handlePaste, this, this.editContext,
false);
},
handlePaste: function(e, ctx) {
var k = e.nativeEvent;
var newtext, existingText, isIE;
var clp = (k.originalEvent || k).clipboardData;
var ek = this.editorKernel;
existingText = $(e.editContext.root).context.textContent;
if (clp === undefined || clp === null) {
newtext = window.clipboardData.getData('Text');
isIE = true;
} else {
newtext = clp.getData('text/plain');
isIE = false;
}
var fulltext = existingText + newtext;
//console.log("hi");
//console.log("Existing: " + existingText);
console.log("value: " + fulltext);
var len = fulltext.length;
if (len > this.config.maxlength && this.config.maxlength != 0) {
this.showError(ek, "Maximum character limit: '" + this.config.maxlength + "' reached!");
$(e.editContext.root).context.textContent = fulltext.substr(0, this.config.maxlength);
k.preventDefault();
}
},
/**
* Handles key strokes.
* @param {Object} e The plugin event
* @private
*/
handleKeyDown: function(e, k) {
//Don't handle delete, backspace and arrow clicks
if (e.isBackSpace() || e.isDelete() || e.isShift() || e.ctrlKeyPressed ||
(e.charCode > 32 && e.charCode < 41)) {
return;
}
var context = e.editContext;
var dpr = CUI.rte.DomProcessor;
var sel = CUI.rte.Selection;
var com = CUI.rte.Common;
var lut = CUI.rte.ListUtils;
var ek = this.editorKernel;
/* if(e.charCode==13)
{
debugger;
}*/
if (!this.isValidMaxLength(e, context)) {
this.showError(ek, "Maximum character limit: '" + this.config.maxlength + "' reached!");
e.preventDefault();
return;
}
},
showError: function(ek, message) {
if (!this.alertShown) {
ek.getDialogManager().alert(
CUI.rte.Utils.i18n("Error"),
CUI.rte.Utils.i18n(message),
CUI.rte.Utils.scope(this.focus, this));
this.alertShown = true;
} else {}
},
/**
* Handles post-processing required for all browsers. The method is called whenever a
* key has been pressed.
* @param {Object} e The plugin event
* @private
*/
handleKeyUp: function(e) {},
isValidMaxLength: function(e, context) {
if (this.config.maxlength == 0) {
return true;
}
var length = context.root.textContent.length;
var $contentEditable = $('#ContentFrame').contents().find('[contenteditable="true"]').length ? $('#ContentFrame').contents().find('[contenteditable="true"] p>br') : $('[contenteditable="true"] p>br');
length += $contentEditable.length;
if (length >= this.config.maxlength) {
return false;
}
return true;
},
notifyPluginConfig: function(pluginConfig) {
pluginConfig = pluginConfig || {};
CUI.rte.Utils.applyDefaults(pluginConfig, {
"maxlength": 0,
});
this.config = pluginConfig;
}
});
//register plugin
CUI.rte.plugins.PluginRegistry.register("customvalidate", CUI.rte.plugins.ValidatorPlugin);
No comments :
Post a Comment