我正在创建一个非常简单的 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);
}
}