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-context-menu上方？

Answer 1

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

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

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

您不应该执行您正在执行的操作（处理单击并检查单击了哪个按钮），因为还有其他方法可以显示上下文菜单。在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);

}

Extjs5 - 使用Ext.form.field.HtmlEditor

问题描述

到目前为止我做了什么：

编辑:(取得进展）

1 个答案: