右键单击带有 Ext.form.field.HtmlEditor 的上下文菜单答案

【问题标题】：Right click context menu with Ext.form.field.HtmlEditor右键单击带有 Ext.form.field.HtmlEditor 的上下文菜单
【发布时间】：2019-10-29 00:27:55
【问题描述】：

问题描述

我准备了这个 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>

到目前为止我做了什么：

我尝试实现侦听器和上下文菜单，但右键单击时不显示菜单，所以最终我的 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>

不幸的是，右键单击的 console.log() 和 右键单击菜单 均未显示。 谁能指出我正确的方向？

编辑：（取得进展）

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

<!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>

如何阻止 browser-context-menu 出现在 extjs5-context-menu 上方？

【问题讨论】：

标签： javascript extjs event-handling dom-events extjs5

【解决方案1】：

要防止显示默认上下文菜单，请致电event.preventDefault()

但是，在这种情况下还有一个额外的皱纹。 HTMLEditor 创建一个 iframe，用于进行编辑。

在 iframe 加载后，您必须在 iframe 的主体上设置一个 contextmenu 侦听器。见https://fiddle.sencha.com/#fiddle/ncn

您不应该做您正在做的事情（处理单击并检查单击了哪个按钮），因为还有其他方法可以显示上下文菜单。在 Mac 上，您可以 ctrl+click，在 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-textfield 中的文本很长时，会出现一个滚动条。向下滚动后，e.pageX 和 e.pageY 位置指向 html_editor-textfield 内的位置，并且上下文菜单未出现在正确的位置下，即右键单击的位置。为了获得我尝试过的正确位置：e.screenX - e.screenY，e.mozMovementX - e.mozMovementY，e.clientX - e.clientY。都不要把contextmenu放在右键的位置下。你对此有什么建议吗？
另一个遗留问题：右键打开上下文菜单，点击某个条目，再次右键打开上下文菜单---->点击的条目仍然突出显示。如何去除高光？我试过调用： html_editor_right_click_menu_action_1.setDisabled(true);html_editor_right_click_menu_action_1.setDisabled(false);但亮点依然存在。如果你愿意，我可以开一个新帖子。
@kiltek 显示后尝试调用menu.focus();
我把menu.focus() 放到了几个地方，但是没有用。放在哪里？
@kiltek 请创建一个新问题，以便对其他人有所帮助。如果您有一个像我为您创建的小提琴一样简单的示例，它将更容易提供帮助。