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

Question

问题描述

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

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

Answer 1

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

但是，在这种情况下还有一个额外的问题。 HTMLEditor 创建一个用于编辑的 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);

}

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

Right click context menu with Ext.form.field.HtmlEditor

javascript

extjs

event-handling

dom-events

extjs5

问题描述

到目前为止我做了什么：

编辑：（取得进展）