selectText в html-редакторе extjs 4.2.1

Question

Я создал скрипку сенча, которая объясняет мое требование.Ниже приведена ссылка на скрипку: https://fiddle.sencha.com/#view/editor&fiddle/2m3c

Мне нужно выбрать определенный текст (??) в редакторе HTML extjs, когда я нажимаю «Редактор F2»Кнопка на панели инструментов.Мне удалось добиться этого с помощью textarea, когда я нажал кнопку «F2 textarea» .Я хочу то же самое в HTML-редакторе.Я знаю, что метод "selectText (start, end)" не доступен в документах extjs редактора HTML.Есть ли другой способ добиться этого, используя jquery или любой другой фрагмент кода.

Вы можете отредактировать мою скрипку, иначе создайте новую скрипту, чтобы помочь мне достичь этого.

Answer 1

HTML-редактор в ExtJS создает элемент iframe.Вы можете найти элемент body iframe и выделить текст внутри него, используя собственные события, доступные в окне.

Вот как вы можете добиться выделения внутри 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