个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
33
4
我正在使用带有 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 返回不正确的选定文本开始和结束位置？
最佳答案
没必要把它弄复杂。如果您支持 IE8 及更高版本的任何浏览器，则可以使用 execCommand功能。更新后的代码如下:
var bold = document.getElementById("bold");
var wysiwyg = document.getElementById("wysiwyg");
bold.addEventListener("click", function(){
document.execCommand('bold');
});
添加到答案中，如果您还没有弄清楚为什么您的代码不起作用。
首先，来自 MDN 的 focusOffset 或 anchorOffset 的定义(两者相似):
“Selection.focusOffset:Selection.focusOffset 只读属性返回选择的焦点在 Selection.focusNode 中偏移的字符数。”
让我们以文本为例:“将文本设为粗体”，我们每次都选择“粗体”。
第一次，它正确地计算了位置并将元素加粗。所以新文本看起来像“Make text <b>bold</b>”。
第二次，它从<b>开始计算位置标签。因此，它的 0-3 和文本将是“<b>Make<b/> text bold ”。
第三次，从</b>开始统计位置标签。因此，它的 6-9 和结果文本将是“Make t<b>ext </b>bold”。
第四次，从</b>开始统计位置标签。所以，又是0-3。因此，0-3 和 6-9 模式将一次又一次地重复。
关于javascript - window.getSelection() 返回意外值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35296102/
33
4
0
为什么我可以在控制台 window.window.window.window 中执行此操作并无限追加 .window 并返回 DOM 窗口？ 最佳答案 因为 window 对象有一个指向它自身的 wi
Windows管理员用户和系统用户之间有什么权限区别吗？ 有些时候，我必须将 cmd 窗口提升到系统权限才能删除一些文件。这可能是因为系统用户锁定了文件，或者系统用户可能具有更高的访问权限，我希望找出
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
Windows 服务和 Windows 进程之间的区别是什么？ 最佳答案 服务是真正的 Windows 进程，没有区别。服务的唯一特殊之处在于它由操作系统启动并在单独的 session 中运行。一个独
我有一个 Windows 网络 (peer-2-peer) 以及 Active Directory，我需要记录向服务器发送任何类型打印的用户的名称。我想编写一个程序来记录他们的用户名和/或他们各自的
当我让一个 Windows 服务尝试安装另一个 Windows 服务时遇到问题。 具体来说，我有一个 TeamCity 代理在 Windows 2008 AWS 实例上为我运行测试。这些测试是用 Ja
我创建了一个应用程序来接收广播的 Windows 消息，效果很好。当我把它变成一个服务、安装它并启动服务时，该服务没有收到消息。 最佳答案 服务可能必须被授予访问桌面的权限。从服务属性、“登录”选项卡
我正在使用 Delphi 2010 编写应用程序。我希望在 Windows 启动时启动我的应用程序。我需要它在最新版本的 Windows XP、7.0 和最新的服务器中工作。 将其存储在以下关键工作下
我想开发一个适用于所有三个版本的 Windows XP、Vista 和 7 的应用程序。该应用程序允许人们选择要打开的文件，并允许他们在某些操作后保存文件。三个版本的 Windows 中的每一个都有不
对于\Windows\中的文件类型与\Windows\System32 中的文件类型是否有标准约定？ 我正在开发一个 SDK，其中包含各种 DLL、帮助程序 exe 和 Windows 服务 exe。
要求是，必须在 WINDOWS7 机器上配置自动登录，但是这个自动登录应该等待(即延迟)直到另一个 Windows 服务发出继续自动登录的信号。 我使用了自定义凭据提供程序，它在其中等待另一个 Win
很抱歉，这不是一个大问题，而是更多的帮助人们解决这些特定问题的方法。我正在解决的问题要求使用串行I/O，但主要在Windows CE 6.0下运行。但是，最近有人问我是否也可以在Windows下运行该
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎不是关于 a specific programming problem, a softwar
不幸的是 SC 命令在 W2000 上还不可用，所以我不能使用它。 我正在尝试检查服务是否在 W2000 服务器上运行，如果它没有运行，脚本应该能够启动该服务。 如何在 Windows 2000 上执
如何在登录到 Windows 之前启动 Windows 窗体应用程序？是否可以在登录到 Windows 之前启动 Windows 窗体应用程序？如果不是，我是否有机会在登录前启动 Windows 服务
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎不是关于 a specific programming problem, a softwar
我想在 XML 文件中区分 Windows XP 和 Windows 7。我想我会在 XML 中为它使用一个环境变量。 但是我找不到在 Windows 中定义的任何系统环境变量来提供此信息。 我看到了
有谁知道我可以在注册表中的哪个位置检查机器上是否安装了这些应用程序: Windows 通讯录 Windows 联系人 最佳答案 来自 Microsoft:我知道它说的是 win 95，但 reg 是一
我正在尝试从我的 Windows 服务器调用放置在远程 Windows 服务器上的批处理文件。我在远程服务器上安装了 freeSSHd。我尝试使用 putty/plink 但没有结果。 我使用的命令语
( 大家好。我是 Windows 编程的新手，所以如果已经有人问过我，我提前道歉，我只是不知道要搜索什么，但这个问题一直让我发疯，我知道有人可能真的很容易回答这个问题。) 我的公司有一个在 Windo
我是一名优秀的程序员,十分优秀！