Question

我正在使用Microsoft ajax-toolkit提供的文本编辑器它在浏览器上呈现iframe。我在该编辑器中添加了一个下拉列表，我希望当用户更改下拉索引时，应在编辑器当前光标位置添加该值。

我在SO上有一个代码，它给出了编辑器当前所选文本如下

function getIframeSelectionText(iframe) {
        var win = iframe.contentWindow;
        var doc = iframe.contentDocument || win.document;

        if (win.getSelection) {
            return win.getSelection().toString();

        } else if (doc.selection && doc.selection.createRange) {
            return doc.selection.createRange().text;
        }
 }

但我想在当前位置添加一些文字。 html呈现如下

<td class="ajax__htmleditor_editor_editpanel"><div id="Editor1_ctl02" style="height:100%;width:100%;">
            <iframe id="Editor1_ctl02_ctl00" name="Editor1_ctl02_ctl00" marginheight="0" marginwidth="0" frameborder="0" style="height:100%;width:100%;display:none;border-width:0px;">

            </iframe><textarea id="Editor1_ctl02_ctl01" class="ajax__htmleditor_htmlpanel_default" style="height:100%;width:100%;display:none;"></textarea><iframe id="Editor1_ctl02_ctl02" name="Editor1_ctl02_ctl02" marginheight="0" marginwidth="0" frameborder="0" style="height:100%;width:100%;display:none;border-width:0px;">

            </iframe>
        </div></td>

我正在尝试如下

$("#imgDropdown").change(function () {
            //var iframeBody =    $(window.Editor1_ctl02_ctl00.document.getElementsByTagName("body")[0]);
            var iframe = document.getElementById("Editor1_ctl02_ctl00");
            $("#Editor1_ctl02_ctl00").find("body").insertAtCaret("value");
            //alert(getIframeSelectionText(iframe));
        });

插入文字的功能无效iframe如下

$.fn.extend({
        insertAtCaret: function (myValue) {
            if (document.selection) {
                this.focus();
                sel = document.selection.createRange();
                sel.text = myValue;
                this.focus();
            }
            else if (this.selectionStart || this.selectionStart == '0') {
                var startPos = this.selectionStart;
                var endPos = this.selectionEnd;
                var scrollTop = this.scrollTop;
                this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos, this.value.length);
                this.focus();
                this.selectionStart = startPos + myValue.length;
                this.selectionEnd = startPos + myValue.length;
                this.scrollTop = scrollTop;
            } else {
                this.value += myValue;
                this.focus();
            }
        }
    })

Answer 1

简单，你只需要使用。

$（ “＃Editor1_ctl02_ctl00”）的内容（）找到（ 'textarea的'）insertAtCaret（ '值'）;。。。

的更新

抱歉，我认为 insertAtCaret 功能对您有用，您只需要在iFrame中工作即可。您可以使用此版本的 insertAtCaret ：

jQuery.fn.extend({ insertAtCaret: function (html) { var winObject = function (el){ var doc = el.ownerDocument; return doc.defaultView || doc.parentWindow }; return this.each(function (i) { var sel, range, w = this; w = winObject(w); if (w.getSelection) { // IE9 and non-IE sel = w.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); // Range.createContextualFragment() would be useful here but is // only relatively recently standardized and is not supported in // some browsers (IE9, for one) var el = w.document.createElement("div"); el.innerHTML = html; var frag = w.document.createDocumentFragment(), node, lastNode; while ((node = el.firstChild)) { lastNode = frag.appendChild(node); } range.insertNode(frag); // Preserve the selection if (lastNode) { range = range.cloneRange(); range.setStartAfter(lastNode); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); } } } else if (w.document.selection && w.document.selection.type != "Control") { // IE < 9 w.document.selection.createRange().pasteHTML(html); } } ) } });

并称之为：

$（ “＃Editor1_ctl02_ctl00”）的内容（）发现（ '主体'）insertAtCaret（$ VAL）;

功能改编自here

快乐的编码！

Answer 2

这里似乎有一些问题。

Microsoft ajax-toolkit编辑器创建了一个iframe，其中designMode属性已打开，这就是为什么它可编辑，没有值，textNodes直接添加到正文，这使得它更难一点。
当您从下拉菜单中选择某些内容时，焦点位于下拉菜单上，并且没有插入位置，因为焦点会从iFrame移开。
我假设下拉菜单位于编辑器的顶部菜单栏或iFrame之外的任何其他位置。

此外，Microsoft ajax-toolkit编辑器有一个推荐的更新HTMLEditorExtender。

您必须捕获插入位置的代码似乎是针对常规输入/ textarea，并且您必须调整该代码以使用在designMode中的iframe内的任何Node，并使用它自己的窗口和文档等

鉴于上述考虑因素，我就是这样做的

var frameID  = 'Editor1_ctl02_ctl00',
    selectID = 'imgDropdown',
    iframe   = document.getElementById(frameID),
    iWin     = iframe.contentWindow ? iframe.contentWindow : window.frames[frameID];

$(iWin).on('blur', function() {
    $(iframe).data('range', getRange(iWin));
});

$('#' + selectID).on('change', function() {
    var range = $(iframe).data('range');
    addText(iWin, range, this.value);
});


function getRange(win) {
    var sel, range, html;
    if (win.getSelection) {
        sel = win.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
        }
    } else if (win.document.selection && win.document.selection.createRange) {
        range = win.document.selection.createRange();
    }
    return range;
}

function addText(win, range, text) {
    if (win.getSelection) {
       range.insertNode(win.document.createTextNode(text));
    } else if (win.document.selection && win.document.selection.createRange) {
        range.text = text;
    }
}

FIDDLE

在iframe内部更改的下拉列表中的当前光标位置插入文本

2 个答案:

的更新