extjs html 编辑器 4.2.1 中的 selectText

Question

我创建了一个 sencha fiddle 来解释我的要求。下面是 link 到 fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2m3c

我的要求是 select extjs HTML 编辑器中的特定文本 (??) 当我单击24=] 工具栏中的按钮。当我单击 "F2 textarea" 按钮时，我能够使用 textarea 实现此目的。我想要 html 编辑器中的相同内容。我知道 "selectText(start, end)" 方法在 html 编辑器的 extjs 文档中不可用。有没有其他方法可以使用 jquery 或任何其他代码来实现此目的。

您可以编辑我的 fiddle 或创建一个新的 fiddle 来帮助我实现此目标。

Answer 1

Html ExtJS 中的编辑器创建 iframe 元素。您可以使用 window.

上可用的本机事件找到 iframe 的正文元素和其中的 select 文本

以下是如何使用您的示例在 iframe 中实现 selection：

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();
                }
            }]
        });
    }
});

这是 link 工作 Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2m3l

extjs html 编辑器 4.2.1 中的 selectText

selectText in extjs html editor 4.2.1

javascript

jquery

extjs

extjs4.2

html-editor