内嵌框架更改选择

iframe change selection

本文关键字：选择 框架      更新时间：2023-09-26

我正在创建一个非常简单的 rte，这是我的问题，我可以在 iframe（designmode=true） 中获取选定的文本，但我无法更改它。

.html

<a onclick="change();">change</a>
<iframe id="textEditor"></iframe>

脚本文件

function $(Str1){return document.getElementById(Str1);}
rte()
{
    var texteditor=$('texteditor');
    textEditor.document.designMode="on";
    textEditor.document.body.contentEditable="True";
    textEditor.document.open();
    textEditor.document.close();
    textEditor.focus();
}
function change()
{
    var userSelection,range;
    if (window.frames['textEditor'].getSelection)
    {
        userSelection=window.frames['textEditor'].getSelection();
    }
    else if(document.frames['textEditor'].selection)
    {
        userSelection=document.frames['textEditor'].selection.createRange();
    }
    if(userSelection.getRangeAt)
    {
        range=userSelection.getRangeAt(0);
    }
    else
    {
        range=document.frames['textEditor'].createRange();
        range.setStart(userSelection.anchorNode,userSelection.anchorOffset);
        range.setEnd(userSelection.focusNode,userSelection.focusOffset);
    }
    range="<div style='color:#f00;'>" + range + "</div>";
}
window.onload = rte();

可能是rte()函数的第一行引用了"texteditor"而不是"textEditor"？

我找到了一种方法来解决这个问题，更改函数应该是这样的

function change()
    if(document.selection)
    {
        sText=textEditor.document.selection.createRange();
        sText.execCommand("createlink","","");
        temp=sText.parentElement().innerHTML;
        newNode=textEditor.document.createElement("h1");
        replacement=sText.parentElement().replaceNode(newNode);
        newNode.innerHTML=temp;
    }
    else if(document.getSelection)
    {
        sText=textEditor.window.getSelection();
        myTag=textEditor.document.createElement("div");
        myTag.setAttribute("class","bold");
        sText.getRangeAt(0).surroundContents(myTag);
    }
}
相关文章：