这种元素操作是如何实现的？答案

【问题标题】：How is this element manipulation implemented?这种元素操作是如何实现的？
【发布时间】：2013-04-13 03:29:05
【问题描述】：

在 Google Chrome 中，您可以使用 contenteditable='true' 元素的快捷方式：

CTRL + B ：例如将高亮文本设置为粗体

幕后发生的事情是，<b> 标记被附加或删除到标记的短语，不管是什么字。

这是怎么做到的？ “他们”从哪里知道，元素是否已经设置为粗体，以及主要问题，它位于哪里？

我问这个是因为我无法摆脱今天早些时候提到的这个问题：

编辑：

我尝试了以下

但首先，它不会正确加载，但这应该是我自己的失败造成的。其次，出于学习目的，我想实现我自己的缩小版。

因为我真的在使用 JavaScript，所以我无法弄清楚这是如何完成的。

【问题讨论】：

要回答您的第一组问题，它是在 WebKit 中本地完成的。有一些公开的 API（选择和范围）可以让您模拟 contentEditable 在客户端 JS 中所做的事情，但我认为它与您在本机代码中可以做的事情不匹配。我们在一个项目中使用 WebKit 作为渲染引擎，我们不得不对 contentEditable 进行许多原生更改，尤其是在表格中进行选择时。

【解决方案1】：

document.getSelection() / window.getSelection() 应该适用于您想对所选内容执行的任何操作。元素样式被继承。如何跟踪这取决于 CSS 实现。看看 the source code of Chrome 可能会有很大帮助。

【讨论】：