PDA

View Full Version : How to unable pasting in the htmlEditor component ?



Pacos
23 May 2012, 7:59 AM
Hi,

I've got a FormPanel, which contains a HtmlEditor. I want to block the possibility of text being pasted in this field.

I've tried various things, first trying to add a listener directly on the HtmlEditor, as following :



xtype:'htmleditor',
id:'bio',
[...]
listeners: {
paste: function() {console.log('test');}
}

Then, as the doc says, I specified the element to add the listener on (I tried with el too) :



xtype:'htmleditor',
id:'bio',
[...]
listeners: {
paste: {
element: 'bodyEl',
fn: function(){console.log('test');}
}
}


And finally, I tried to add an EventListener more directly : I put it in the afterrender listener of the FormPanel, to ensure that the HtmlEditor is already rendered, and DOM is available.



var formComment = new Ext.FormPanel({
[...]
listeners: {
afterrender: function() {
document.getElementById('bio').addEventListener('paste', function(){console.log('test');}, false);
}
}


But nothing worked... I feel like I missed something, and I'm far from being fluent with DOM and related.

A little help would be very appreciated, I'm stuck here !:)

fschaeffer
23 May 2012, 9:21 PM
Hi,

I'm pretty sure, that the htmlEditor has no event called 'paste' [1] so you can't attach a listener to that. You could try to capture the CTRL-V key via Keymap and disallow this combination.

[1] http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.HtmlEditor
(http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.HtmlEditor)

Pacos
23 May 2012, 11:28 PM
I know that HtmlEditor has no 'paste' event, but I was trying to catch the DOM event, which should exist. Isn't that possible ?

scottmartin
24 May 2012, 2:46 PM
There is not much info on this. I did find this post (GWT): http://www.sencha.com/forum/showthread.php?81234
It leads to an ExtJS thread that captures pasting for clipboard. Perhaps you can research that code for info?

Regards,
Scott.

vietits
24 May 2012, 6:58 PM
Try this:


Ext.onReady(function(){
var editor = Ext.create('Ext.form.HtmlEditor', {
width: 580,
height: 250,
renderTo: Ext.getBody(),
listeners: {
initialize: function(){
Ext.create('Ext.util.KeyMap', {
target: this.getEditorBody(),
binding: [{
key: "vV",
ctrl: true,
handler: function(key, e){
e.stopEvent();
}
}]
});
}
}
});
});