Question

我使用带有contenteditable的div来制作文本编辑器。我觉得我在第一个障碍中失败了。

<html>
<head></head>
<body>
<input type="button" id="bold" value="B" />
<div id="wysiwyg" contenteditable="true" style="border:solid;width:500px;height:300px;"></div>

<script>
var bold = document.getElementById("bold");
var wysiwyg = document.getElementById("wysiwyg");

bold.addEventListener("click", function(){
    update("<b>", "</b>");
});    

function update(startTag, endTag){

//find the selected text
 var selected_text = "";
   if (window.getSelection) {
        selected_text = window.getSelection();
   } else if (document.getSelection) {
        selected_text = document.getSelection();
   } else if (document.selection) {
        selected_text = document.selection.createRange().text; 
   }

   //user could have selected in reverse, so we need to make sure the values are in correct order
var startPos = selected_text.anchorOffset >= selected_text.focusOffset ? selected_text.focusOffset : selected_text.anchorOffset;
var endPos = selected_text.focusOffset <= selected_text.anchorOffset ? selected_text.anchorOffset : selected_text.focusOffset;

if (startPos == endPos) //There is no selection
    return;

var startText = wysiwyg.innerText.substr(0, startPos);
var textToWrap = wysiwyg.innerText.substr(startPos, endPos- startPos);
var endText = wysiwyg.innerText.substr(endPos);
wysiwyg.innerHTML = startText + startTag + textToWrap + endTag + endText;

}

</script>
</body>
</html>

如果您要执行此代码并在div中键入3个单词，请选择中间单词（用鼠标突出显示）然后单击屏幕上的B按钮（在HTML中），您需要记下程序根据需要执行，因为它会使您突出显示的单词变为粗体。

如果您现在选择您输入的3的最后一个单词，并尝试将其设为粗体，则您会注意到第一个单词变为粗体。

看一下代码，我可以看到问题是selected_text.anchorOffset最初会返回正确的值，但是在后续请求中，它会出错（或者至少提供一个我不理解的值）。

此JSFIDDLE将证明此问题！

为什么window.getSelection会返回选择文本的开始和结束位置？

Answer 1

无需复杂化。如果您支持IE8及更高版本的任何浏览器，则可以使用execCommand功能。更新后的代码如下：

var bold = document.getElementById("bold");
var wysiwyg = document.getElementById("wysiwyg");

bold.addEventListener("click", function(){
    document.execCommand('bold');
});

要添加答案，如果您还没弄清楚为什么您的代码无效。

首先，MDN对focusOffset或anchorOffset的定义（两者都相似）：

＆＃34; Selection.focusOffset：Selection.focusOffset只读属性返回选择的焦点在 Selection.focusNode 中偏移的字符数。＆＃34 ;

让我们举一个文字示例：＆＃34;文字粗体＆＃34;我们正在选择＆＃34; bold＆＃34;每一次。

第一次，它正确计算位置并使元素变粗。因此，新文字看起来像＆＃34; Make text bold＆＃34;。

第二次，它会计算标记的位置。因此，它的0-3和文本将是＆＃34; Make text bold＆＃34;。

第三次，它会计算标记的位置。因此，它的6-9和结果文本将是＆＃34; Make text bold＆＃34;。

第四次，它会计算标记的位置。所以，它的0-3再次。因此，0-3和6-9模式将一次又一次地重复。

window.getSelection（）返回意外值

1 个答案: