Javascript 使用Ext.form.field.HtmlEditor右键单击上下文菜单问题描述_Javascript_Extjs_Event Handling_Dom Events_Extjs5

Javascript 使用Ext.form.field.HtmlEditor右键单击上下文菜单问题描述

javascript extjs

Javascript 使用Ext.form.field.HtmlEditor右键单击上下文菜单问题描述,javascript,extjs,event-handling,dom-events,extjs5,Javascript,Extjs,Event Handling,Dom Events,Extjs5,我准备了这个index.html，它创建了一个简单的Ext.form.field.HtmlEditor。我希望有一个右键单击上下文菜单，它能够对用户标记的单词进行操作： <!DOCTYPE html> <html> <head> <script type="text/javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script> <lin

我准备了这个index.html，它创建了一个简单的Ext.form.field.HtmlEditor。我希望有一个右键单击上下文菜单，它能够对用户标记的单词进行操作：

<!DOCTYPE html>
<html>
<head>        
    <script type="text/javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>

    <link id="theme1" rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
    <script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>

    <script type ="text/javascript">
    Ext.onReady( function(){

        var html_editor = Ext.create('Ext.form.HtmlEditor', {
                renderTo: Ext.getBody()
            });
        });


    </script>
</head>
<body></body>


Ext.onReady（函数（）{
var html_editor=Ext.create（'Ext.form.HtmlEditor'{
renderTo:Ext.getBody（）
});
});

到目前为止我所做的：我尝试实现侦听器和上下文菜单，但右键单击时它不会显示菜单，因此在一天结束时，我的index.html看起来像：

<!DOCTYPE html>
<html>
<head>        
    <script type="text/javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>

    <link id="theme1" rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
    <script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>

    <script type ="text/javascript">
    Ext.onReady( function(){

        var html_editor_right_click_menu_action_1 = Ext.create('Ext.Action', {
            text: 'html_editor_right_click_menu_action_1',
            handler: function(widget, event) {
                console.log("html_editor_right_click_menu_action_1 clicked!");
            }
        });
        var html_editor_right_click_menu = Ext.create('Ext.menu.Menu', {
            items: [html_editor_right_click_menu_action_1]
        });


        var html_editor = Ext.create('Ext.form.HtmlEditor', {
                renderTo: Ext.getBody(),
                viewConfig: {
                    listeners: {
                        containercontextmenu: function(view, e, eOpts) {
                            console.log("containercontextmenu listener");
                        }
                    }
                }
            });
        });


    </script>
</head>
<body></body>


Ext.onReady（函数（）{
变量html编辑器右键单击菜单操作1=Ext.create（'Ext.action'{
文本：“html编辑器右键单击菜单操作1”，
处理程序：函数（小部件、事件）{
log（“html_编辑器_右键单击_菜单_操作_1单击！”）；
}
});
var html\u编辑器\u右键单击\u menu=Ext.create（'Ext.menu.menu'{
项目：[html\u编辑器\u右键单击\u菜单\u操作\u 1]
});
var html_editor=Ext.create（'Ext.form.HtmlEditor'{
renderTo:Ext.getBody（），
视图配置：{
听众：{
ContainerContext菜单：功能（视图、e、eOpts）{
log（“containercontextmenu侦听器”）；
}
}
}
});
});

不幸的是，无论是用于右键单击的控制台.log（），还是右键单击菜单都没有显示出来。 有人能给我指出正确的方向吗？

编辑：（取得的进展）我在index.html中使用此代码创建了一个上下文菜单（index.html本身可以运行，如果有人想复制和粘贴它），但我无法摆脱浏览器上下文菜单，该菜单在html编辑器中显示：

<!DOCTYPE html>
<html>
<head>        
    <script type="text/javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>

    <link id="theme1" rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
    <script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>

    <script type ="text/javascript">
    Ext.onReady( function(){

        var html_editor_right_click_menu_action_1 = Ext.create('Ext.Action', {
            text: 'html_editor_right_click_menu_action_1',
            handler: function(widget, event) {
                console.log("html_editor_right_click_menu_action_1 clicked!");
            }
        });
        var html_editor_right_click_menu = Ext.create('Ext.menu.Menu', {
            items: [html_editor_right_click_menu_action_1]
        });


        var html_editor = Ext.create('Ext.form.HtmlEditor', {
                renderTo: Ext.getBody()                 
            });

        html_editor.getEl().addListener('click', 
                                    html_editor_click_handler, 
                                    html_editor);
        function html_editor_click_handler(btn, e, eOpts){
            var clicked_button = btn.button;
            var click_x_pos = btn.pageX;
            var click_y_pos = btn.pageY;
            console.log(clicked_button + " " + click_x_pos + " " + click_y_pos);
            if(clicked_button == 2){
                html_editor_right_click_menu.showAt(click_x_pos,click_y_pos);
            }
        }

        });
    </script>
</head>
<body></body>


Ext.onReady（函数（）{
变量html编辑器右键单击菜单操作1=Ext.create（'Ext.action'{
文本：“html编辑器右键单击菜单操作1”，
处理程序：函数（小部件、事件）{
log（“html_编辑器_右键单击_菜单_操作_1单击！”）；
}
});
var html\u编辑器\u右键单击\u menu=Ext.create（'Ext.menu.menu'{
项目：[html\u编辑器\u右键单击\u菜单\u操作\u 1]
});
var html_editor=Ext.create（'Ext.form.HtmlEditor'{
renderTo:Ext.getBody（）
});
html_editor.getEl（）.addListener（'单击'，
html\u编辑器\u单击\u处理程序，
html（U编辑器）；
函数html\u编辑器\u单击\u处理程序（btn、e、eOpts）{
var单击按钮=btn.button；
var click_x_pos=btn.pageX；
var单击“y”\U pos=btn.pageY；
console.log（单击按钮+“”+单击位置+“”+单击位置）；
如果（单击按钮==2）{
html编辑器右键单击菜单。显示（单击x位置，单击y位置）；
}
}
});

如何阻止浏览器上下文菜单出现在extjs5上下文菜单上方？

要阻止默认上下文菜单出现，请调用

事件.preventDefault（）

然而，在这种情况下，有一个额外的皱纹。

HTMLEditor

创建用于进行编辑的iframe

加载iframe后，必须在iframe主体上设置一个

contextmenu

侦听器。看

您不应该执行您正在执行的操作（处理单击并检查单击了哪个按钮），因为还有其他方式显示上下文菜单。在Mac上，您可以按住ctrl键并单击，在Windows上，您可以使用键盘上的上下文菜单键

var html_editor_right_click_menu_action_1 = Ext.create('Ext.Action', {
    text: 'html_editor_right_click_menu_action_1',
    handler: function(widget, event) {
        console.log("html_editor_right_click_menu_action_1 clicked!");
    }
});

var html_editor_right_click_menu = Ext.create('Ext.menu.Menu', {
    items: [html_editor_right_click_menu_action_1]
});

var html_editor = Ext.create('Ext.form.HtmlEditor', {
    renderTo: Ext.getBody()
});

// Find the iframe and wait until it's loaded
var iframe = html_editor.getEl().down('iframe', true);
iframe.addEventListener('load', function() {
    // It's loaded, now set the context menu listener
    var body = iframe.contentWindow.document.body;
    body.addEventListener('contextmenu', html_editor_click_handler);
});

function html_editor_click_handler(e, iframe) {
    // Prevents the default context menu
    e.preventDefault();
    var click_x_pos = e.pageX;
    var click_y_pos = e.pageY;
    console.log("Context click " + click_x_pos + " " + click_y_pos);
    html_editor_right_click_menu.showAt(click_x_pos, click_y_pos);

}

这真的帮了我很大的忙。不过还有另一个问题：当文本在html_editor-text字段中很长时，就会出现一个滚动条。向下滚动后，e.pageX和e.pageY位置指向html_编辑器文本字段内的位置，并且上下文菜单未显示在右键单击的正确位置下。为了得到正确的位置，我尝试了：e.screenX-e.screenY，e.mozMovementX-e.mozMovementY，e.clientX-e.clientY。不要将上下文菜单放置在右键单击的位置下。您对此有什么建议吗？另一个遗留问题：右键单击打开上下文菜单，单击某些条目，再次右键单击打开上下文菜单-->单击的条目仍然高亮显示。如何删除突出显示？我尝试调用：html\u editor\u right\u click\u menu\u action\u 1.setDisabled（true）；html\u编辑器\u右键单击\u菜单\u操作\u 1.设置禁用（false）；但亮点依然存在。如果你愿意，我可以打开一篇新文章。@kiltek尝试调用

menu.focus（）显示itI后，我将menu.focus（）
放在几个地方，但不起作用。把它放在哪里？@kiltek请创建一个新问题，以便对其他人有所帮助。如果你有一个像我为你制作的小提琴一样简单的例子，它会让你更容易得到帮助。