在Javascript编辑器中仅编辑选择

时间:2017-06-06 13:11:01

标签: javascript dom range selection

我正在研究一位非常专业的编辑。简而言之,我起草了一个在firefox中运行的代码示例(如下)。 iText功能将填写示例内容。

用户应该选择示例内容的一部分来命中“Letters”,然后iLetter函数应该只采用句子的选定部分,并且只在选择中将大写字母反转为小写字母和小写字母或大写字母(反转本身不是问题)。

我搜索了几个小时如何在显示的文本/字符串中获取选择的位置或如何获得开始和结束位置。如果我可以提取选择,将其修改为字符串(我管理它)并用修改后的字符串替换选择(我失败了),那将是很好的。有可能吗?任何提示或建议都非常受欢迎。

<html>
<head>
<script>
function iFrameOn(){
	richTextField.document.designMode = 'On';
}

function iText(){
	window.frames['richTextField'].document.body.innerHTML = "Hello World ready for simple text trial?";
}

function iLetters(){
    var range = window.frames['richTextField'].getSelection();
	range.deleteFromDocument();
}
</script>
</head>
<body onLoad="iFrameOn();">
<h2>Edit Test</h2>
<form action="parse_file.php" name="form" id="form" method="post">
<p>
<div id="wysiwyg_cp" style="padding:8px; width:700px;">
  <input type="button" onClick="iText()" value="Text">
  <input type="button" onClick="iLetters()" value="Letters">
</div>
<textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea>
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe>
<!-- End replacing your normal textarea -->
</p>
</form>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

我想通了......一个很大的帮助是: replace selected text in contenteditable div

该函数仅将其设置为小写,但这是一个简单的修改,以保持示例紧凑。

&#13;
&#13;
<html>
<head>
<script>
function iFrameOn(){
	richTextField.document.designMode = 'On';
}

function iText(){
	window.frames['richTextField'].document.body.innerHTML = "HELLO WORLD READY FOR A SIMPLE TEXT TRIAL?";
}

function iLetters(){
    var sel, range;
    if (window.frames['richTextField'].getSelection) {
        sel = window.frames['richTextField'].getSelection();
		var theSelection = sel.toString();
		var replacementText = theSelection.toLowerCase();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode(window.frames['richTextField'].document.createTextNode(replacementText));
        }
    }
}
</script>
</head>
<body onLoad="iFrameOn();">
<h2>Edit Test</h2>
<form action="parse_file.php" name="form" id="form" method="post">
<p>
<div id="wysiwyg_cp" style="padding:8px; width:700px;">
  <input type="button" onClick="iText()" value="Text">
  <input type="button" onClick="iLetters()" value="Letters">
</div>
<textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea>
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe>
<!-- End replacing your normal textarea -->
</p>
</form>
</body>
</html>
&#13;
&#13;
&#13;