HTMLEditor + Context Menu - Software Download: Dynamic Html Editor - hzgn.com

HZGN.COM
welcome to my space

HOME

Homepage

Add to favorites

HOME

HTMLEditor + Context Menu

Published by: cfz 2009-01-08

Hello

Currently I am using a component named htmlEditor, but I have been having some issues to get the contextmenu event into the HTML Editor component, What I would like to do with this event is when mouse right click it displays a context menu with some options.

Software Download: Dynamic Html Editor::
Software Listing: Dynamic Html Editor . After installed, you can access html to image functionality from the context menu of IE by clicking the right
http://www.sharewareconnection.com/titles/dynamic-html-editor19.htmHOME

Does anybody know how to do that and can help me?

You are rigth! ;)

i did a solution but for IE is diferent...8-

this is my code

contextMenuEditor.js

var htmlE;
Ext.onReady(function(){

if (Ext.isIE) {
///////////////IE///////////////////////////////
htmlE = Editor.container.dom.childNodes[0].lastChild.contentWindow.document;
htmlE.attachEvent('oncontextmenu', onContextMenu, false);
//in IE event name is on+event name
//here you should write attachEvent
} else {
/////Mozilla////////////////////////////////////////////////////////
htmlE = Editor.container.dom.childNodes[0].lastChild.contentDocument;

AnswerTool email response management software increases your ::
Added: Cut, Copy, Paste commands to the HTML editor context menu. Changes for v2 .1 final (2002-05-28). Update: Fix handling of European special characters.
http://www.answertool.com/product-releasenotes.html?VN=954161HOME

htmlE.addEventListener('contextmenu', onContextMenu, true);
//here you should write addEventListener
}

function onContextMenu(e) {
//alert(e);
var position = new Array();
position[0] = e.clientX+document.body.scrollLeft;
position[1] = e.clientY+document.body.scrollTop;
if (typeof(cmenuEditor)=='undefined') {
cmenuEditor = new Ext.Component(); //Create a component
}
if(typeof(cmenuEditor)!='undefined'){ // create context menu on first right click
cmenuEditor = new Ext.menu.Menu([ //Set all options

Infragistics - Web HTML Editor::
Each of the buttons, menus and dialogs for the HtmlEditor can be the editor also provides a right-click context menu which can be used to Cut,
http://www.infragistics.com/dotnet/netadvantage/aspnet/webhtmleditorgallery.aspxHOME

{
text: 'Cut',
handler : function(){
alert(this.text);
}
},{
text: 'Copy',
handler : function(){
}
},{
text: 'Paste',
handler : function(){
}
},{
text: 'Bold',
handler : function(){
}
},{
text: 'Italic',
handler : function(){
}
},{
text: 'Underline',
handler : function(){
}
},{
text: 'getText()',
handler : function(){
alert(htmlE.selection.createRange().text)
}
}]);
cmenuEditor.showAt(position); //show menu at position
}
if (Ext.isIE) {
////IE
e.returnValue = false; //two lines to prevent the default context menu
e.cancelBubble = true;
} else {
////Mozilla
e.preventDefault(); //quit default context menu
}
};
});

Editor.js

/////////////////Editor
var Editor;
Ext.QuickTips.init();

Ext.onReady(function(){
Editor = new Ext.form.HtmlEditor({
name: 'ehtml',
renderTo: 'hmtleditor'
});
});

index.html

BCI - Author

HtmlEditor doesn't fire contextmenu event but you can install an event handler on underlying element (HtmlEditor.getEl()) or on a containing element.

Ext.Element fires the contextmenu event.

hi,

i did you solution and doesn�t works

Bugzilla trows me this:

//"ext-comp-1018" => htmlEditor ID
Ext.get("ext-comp-1018").dom.contentDocument has no properties

i tried it in IE6 and Mozilla 2.0.0.9 and it's the same error

this is my code:

Ext.get("ext-comp-1018").dom.contentDocument.body.addEventListener('conte xtmenu', function() { alert('test context menu'); }, true);

I continue getting the normal mozilla context menu

Would you like to send us the whole code? please..

Regards...

http://i249.photobucket.com/albums/gg201/jloch/er2.jpg

http://i249.photobucket.com/albums/gg201/jloch/er1.jpg

jsakalos, thanks for your replay but the code (HtmlEditor.getEl()) you shared with us we already implemented it and it doesn't work on our side. I got other post from other user and he told me that he did the same with no succeed, take a look at http://extjs.com/forum/showthread.php?t=21318

We consider this as a bug, but If you already implemented this functionality what do you suggest us, do you have more code or an example to share with us.

Thanks jsakalos, we really appreciate your help on this.

Inkiev

It's not the HtmlEditor element, it's the IFRAME element within it. Use that ID, and try again.
I have not tested the code in IE, by the way... so try it in FF.

As Saki pointed out, the HtmlEditor is an iframe. Rendering a menu in the top most frame and making it work in another frame is something that will require a bit of work and knowledge. It's not something Ext supports out of the box.

Hmmm, the subject is more intricate as I originally thought. HtmlEditor is indeed enclosed in an iframe that most likely swallows all events.

I was trying to get the window and document contained in that iframe and install some event handlers on them to no avail.

I have one idea, not followed up though, and that would be to look how is the HtmlEditor's toolbar handling events and contained text.

Sorry, but cannot help more at the moment...

I just tried doing this in FireBug to a HtmlEditor component (ext-gen1951 is the IFRAME element of the HtmlEditor):
Ext.get("ext-gen1951").dom.contentDocument.body.addEventListener('conte xtmenu', function() { alert('test context menu'); }, true);

This will show the alert message... I don't see why it would be hard to have an Ext based menu show on that event.