在 extjs 的面板中获取选定文本的热键

如何解决在 extjs 的面板中获取选定文本的热键

如何在 extjs 的面板中获取选定的文本？ 面板 html 属性包含一些格式化的 html 文本，但我只想获取纯文本，而不是格式化的 html 文本。那么，如果用户选择了一些文本，如何获得选择？

Ext.application({
    name: 'fiddle',launch: function () {
        Ext.create('Ext.Container',{
            renderTo: Ext.getBody(),items: [{
                xtype: 'panel',title: 'my Panel',html: "Some text. Let's say for the sake of this question: <i>Lorem ipsum dolor sit amet,...</i>",width: 350
                },{
                xtype: 'button',text: 'my Button',listeners:{
                    click: function(){
                        var selectedText=''; //THIS IS WHERE THE QUESTION IS
                        alert(selectedText);
                    }
                }
            }]
        });
    }
});

解决方法

您可以使用 window.getSelection().toString() 和 document.selection.createRange().text

Ext.application({
    name: 'Fiddle',launch: function () {
        Ext.create('Ext.panel.Panel',{
            renderTo: Ext.getBody(),layout: {
                type: 'hbox',align: 'stretch'
            },defaults: {
                height: 200,flex: 1
            },items: [{
                xtype: 'panel',itemId: 'panelOne',title: 'Panel One',html: "Some <b>text</b>. Let's say for the sake of this question: <i>Lorem ipsum dolor sit amet,...</i>"
            },{
                xtype: 'panel',itemId: 'panelTwo',title: 'Panel Two',...</i>"
            }],buttons: [{
                xtype: 'button',text: 'my Button',listeners: {
                    click: function () {
                        var selection = window.getSelection();
                        const panelItemIds = ['panelOne','panelTwo'];
                        panelItemIds.forEach(panelItemId => {
                            var panelComponent = this.up('panel').getComponent(panelItemId);
                            var node = selection.baseNode;
                            if (panelComponent) {
                                var panelComponentDom = panelComponent.getEl().dom;
                                while (node !== null) {
                                    if (node == panelComponentDom) {
                                        console.log(`Found selection "${selection.toString()}" in panel "${panelComponent.getTitle()}"`)
                                    }
                                    node = node.parentNode;
                                }
                            }
                        });
                    }
                }
            }]
        });
    }
});