Ajax工具包文本编辑器子控件

Ajax tool kit text editor sub controls

本文关键字：控件 编辑器 文本编辑 工具包 文本 Ajax      更新时间：2023-09-26

我使用的是Microsoft ajax工具包提供的文本编辑器
它在浏览器上渲染iframe。我已经在编辑器中添加了一个下拉列表，我希望当用户更改下拉索引时，该值应该添加到编辑器当前的光标位置。

<iframe id="myIframe"></iframe>
  <select id="myOptions">
   <option value="myValue1">My Value 1</option>
   <option value="myValue2">My Value 2</option>
   <option value="myValue3">My Value 3</option>
   <option value="myValue4">My Value 4</option>
   <option value="myValue5">My Value 5</option>
</select>

和javascript

$.fn.extend({
insertAtCaret: function (myValue) {
    var doc = this[0].ownerDocument;
    var win = doc.defaultView || doc.parentWindow;
    if (win.getSelection) {
        var selObj = win.getSelection();            
        var myRange  = selObj.getRangeAt(0);
        selObj.deleteFromDocument();
        myRange.insertNode(doc.createTextNode(myValue));
        selObj.addRange(myRange);
        selObj.collapseToEnd();
        this.focus();
    }
    else if (doc.selection) {
        this.focus();
        sel = doc.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.innerHTML = this.innerHTML.substring(0, startPos) + myValue + this.innerHTML.substring(endPos, this.innerHTML.length);
        this.focus();
        this.selectionStart = startPos + myValue.length;
        this.selectionEnd = startPos + myValue.length;
        this.scrollTop = scrollTop;
     }
   }
});
$("#myIframe").contents().find("body").attr("contenteditable", "true");
$("#myOptions").on("change", function() {
    $("#myIframe").contents().find("body").insertAtCaret($(this).val());
});

它工作得很好小提琴

但当我将其更改为ul和li时，它不起作用。

<iframe id="myIframe"></iframe>
<ul id="myOptions">
    <li value="myValue1">My Value 1</li>
    <li value="myValue2">My Value 2</li>
    <li value="myValue3">My Value 3</li>
    <li value="myValue4">My Value 4</li>
    <li value="myValue5">My Value 5</li>
</ul>

脚本

$("#myIframe").contents().find("body").attr("contenteditable", "true");
$("#myOptions").on("change", function() {
    $("#myIframe").contents().find("body").insertAtCaret($(this).val());
});

Fiddle

编辑：-在Mozila中工作，但不在IE 中工作

使用非表单元素时，只需将.val()更改为.text()即可：

$("#myIframe").contents().find("body").insertAtCaret( $(this).text() );

http://jsfiddle.net/mblase75/5Pc55/46/

相关文章：