extjs html 编辑器 4.2.1 中的 selectText

Question

我创建了一个 sencha fiddle 来解释我的要求。下面是小提琴的链接：https://fiddle.sencha.com/#view/editor&fiddle/2m3c

我的要求是当我单击工具栏中的 “F2 编辑器” 按钮时，在 extjs HTML 编辑器中选择特定文本 (??)。当我单击 "F2 textarea" 按钮时，我能够使用 textarea 实现此目的。我希望在 html 编辑器中也一样。我知道 html 编辑器的 extjs 文档中没有方法“selectText(start, end)”。有没有其他方法可以使用 jquery 或任何其他代码来实现这一点。

你可以编辑我的小提琴或者创建一个新的小提琴来帮助我实现这一点。

Answer 1

ExtJS 中的 HTML 编辑器创建 iframe 元素。您可以找到 iframe 的 body 元素并使用 window 上可用的原生事件在其中选择文本。

您可以通过以下示例在 iframe 中实现选择：

Ext.application({
    name: 'Fiddle',

    launch: function () {
        $.fn.selectRange = function (start, end) {
            if (end === undefined) {
                end = start;
            }
            return this.each(function () {
                if ('selectionStart' in this) {
                    this.selectionStart = start;
                    this.selectionEnd = end;
                } else if (this.setSelectionRange) {
                    this.setSelectionRange(start, end);
                } else if (this.createTextRange) {
                    var range = this.createTextRange();
                    range.collapse(true);
                    range.moveEnd('character', end);
                    range.moveStart('character', start);
                    range.select();
                }
            });
        };

        Ext.tip.QuickTipManager.init(); // enable tooltips

        Ext.form.HtmlEditor.override({
            frame: true,
            initComponent: function () {
                this.callOverridden();
                this.addEvents('submit');
            },

            initEditor: function () {
                this.callOverridden();

                var me = this;
                var doc = me.getDoc();

                if (Ext.isGecko) {
                    Ext.EventManager.on(doc, 'keypress', me.fireSpecialKey, me);
                }

                if (Ext.isIE || Ext.isWebKit || Ext.isOpera) {
                    Ext.EventManager.on(doc, 'keydown', me.fireSpecialKey, me);
                }
            },

            fireSpecialKey: function (e) {
                if (e.getKey() == e.F2) {
                    var myVal = this.getValue();
                    if (myVal.indexOf('??') != -1) {
                        debugger;
                        //alert('found');
                        //$('#htmlEditorF2-inputCmp-textareaEl').selectRange(myVal.indexOf('??'), (myVal.indexOf('??')+2));
                        //$('#htmlEditorF2-inputCmp-iframeEl').contents().select();
                        this.selectText(myVal.indexOf('??'), (myVal.indexOf('??') + 2))
                    }
                }
            },

            /*
            selectText : function(start, end){
                var me = this,
                    v = me.getValue(),
                    doFocus = true,
                    el = me.inputEl.dom,
                    undef,
                    range;
                debugger;
                if (v.length > 0) {
                    start = start === undef ? 0 : start;
                    end = end === undef ? v.length : end;
                    if (el.setSelectionRange) {
                        el.setSelectionRange(start, end);
                    }
                    else if(el.createTextRange) {
                        range = el.createTextRange();
                        range.moveStart('character', start);
                        range.moveEnd('character', end - v.length);
                        range.select();
                    }
                    doFocus = Ext.isGecko || Ext.isOpera;
                }
                if (doFocus) {
                    me.focus();
                }
            }
            */
        });

        new Ext.panel.Panel({
            title: 'HTML Editor',
            renderTo: Ext.getBody(),
            width: 550,
            height: 500,
            frame: true,
            layout: 'vbox',
            items: [{
                xtype: 'htmleditor',
                id: 'htmlEditorF2',
                enableColors: false,
                enableAlignments: false,
                width: '100%',
                value: 'This patient ??, gender ??, aged ?? has come here for ?? and he has been suggested to take up ?? skin test. Upon testing and verifying his lab results it was found he is allergic to ??.'
            }, {
                xtype: 'textareafield',
                id: 'txtareaF2',
                grow: true,
                width: '100%',
                height: 200,
                name: 'message',
                fieldLabel: 'Message',
                anchor: '100%',
                value: 'This patient ??, gender ??, aged ?? has come here for ?? and he has been suggested to take up ?? skin test. Upon testing and verifying his lab results it was found he is allergic to ??.'
            }],
            tbar: [{
                xtype: 'button',
                text: 'F2 Editor',
                handler: function () {
                    var iframewindow = Ext.getCmp('htmlEditorF2').iframeEl.el.dom.contentWindow;
                    var iframebody = Ext.getCmp('htmlEditorF2').iframeEl.el.dom.contentDocument.querySelector('body');

                    function selectTextRange(obj, start, stop) {
                        var endNode, startNode = endNode = obj.firstChild

                        startNode.nodeValue = startNode.nodeValue.trim();

                        var range = document.createRange();
                        range.setStart(startNode, start);
                        range.setEnd(endNode, stop + 1);

                        var sel = iframewindow.getSelection();
                        sel.removeAllRanges();
                        sel.addRange(range);
                    }

                    var myVal = iframebody.innerText;
                    var start = myVal.indexOf('??');
                    var end = myVal.indexOf('??') + 2;

                    selectTextRange(iframebody, start, end);
                }
            }, '-', {
                xtype: 'button',
                text: 'F2 Textarea',
                handler: function () {
                    debugger;
                    var myVal = Ext.getCmp('txtareaF2').getValue();
                    Ext.getCmp('txtareaF2').selectText(myVal.indexOf('??'), (myVal.indexOf('??') + 2));
                    Ext.getCmp('txtareaF2').focus();
                }
            }]
        });
    }
});

这里是工作小提琴的链接： https://fiddle.sencha.com/#view/editor&fiddle/2m3l