哪些文字区域弹出案教给我有关浏览器API的知识

>我最近进入构建Wysiwyg编辑和弹出案的企业对浏览器API产生了一些令人着迷的见解。 产假为深度潜入技术挑战提供了绝佳的机会，而没有截止日期的压力。

>我目前的重点是为“代号鹅”做出贡献，这是一种带有锈后端和基于电子的聊天界面的开源AI代理。我提交了一个拉动请求，以集成Wysiwyg编辑器，选择了对现有软件包的自定义解决方案，以最大程度地减少捆绑包大小。 但是，维护人员建议使用弹出工具栏来解决空间问题。

创建此浮动工具栏被证明具有意外的挑战。我的目标很简单：

>在文本选择时显示弹出工具栏。

• 精确地将其定位在选择上方。
帐户跨多行包裹单词包裹。
在滚动过程中保持准确的定位。
• 文本区域提出了独特的复杂性。与标准的HTML元素不同，内容操纵和精确定位容易获得，文本区域仅展示原始文本和基本选择API。 浏览器内部处理渲染。

要说明，请考虑以下类比：

标准html元素：

您可以重新安排家具，添加物品和尺寸距离的房屋。
• >>文本区域：
进入您无法输入的房间的窗口。您可以看到并修改内容（添加/删除文本），但是直接操作是不可能的。浏览器通过本机OS文本编辑来管理内部工作。
• 弹出挑战以外的文本领域

popover api

现代浏览器提供了一个内置的弹出API，用于创建弹出元素。 这是一个示例：

限制尽管具有跨浏览器的兼容性和易用性，但弹出式API仍有局限性：

它仅由于

属性限制而与按钮元素一起起作用。

至关重要的是，它与文本区域不兼容。 popovertarget 感谢Mark Techson，他通过Una Kravets的会议演讲向我介绍了Popover API：“少了，更多的力量：利用网络平台的力量。”
• 选择api
• >要根据用户文本选择定位弹出案，我需要：>
  • 选定的文本的位置。
  • 事件听众进行选择和取消选择。
  >

  > Colby Fayock的博客文章“如何与选择API共享所选文本”，向我介绍了Selection API>（可通过window.getSelection()访问）。 此API返回aSelection对象详细介绍所选文本。

  getRangeAt(0)

  getRangeAt(0) Selection对象中的方法提供了选择的开始和最终偏移：

  • startOffset：选择的开始索引。
  • endOffset：选择的结尾索引（在最后一个选择的字符之后）。
  例如，在“ Hello，World！欢迎。”中，选择“ World”产生

  = 7和 =12。startOffset endOffset

  注意：

  >访问第一个选择。 诸如Firefox之类的浏览器允许多个选择（CTRL单击），但是单选浏览器中的0次数超过0会导致错误。 getRangeAt(0)

  >

  提供对getBoundingClientRect()>的访问，该>返回带有所选文本的顶部，右，底部，左侧坐标，宽度和高度的边界框。 这允许在选择上方精确的弹出位置，如下所示：

  getRangeAt(0) 但是，这种方法在文本区域内受到限制。 getBoundingClientRect()镜像div

  通过与克劳德（Claude）的讨论发现的“镜像div”技术提供了解决方法。 无形的Div覆盖了文本区域，反映了其内容和样式。 用户互动发生在此DIV内，在保持标准文本区域外观的同时提供了完整的访问。 Jhey Thompkins的博客文章，“如何：文本光标在哪里？”，而
  >文本包装在DIV和文本区域之间可能有所不同。

  >浏览器特定的间距和字体渲染可能会导致位置差异。

  Selection API

  为什么不使用NPM软件包？getComputedStyle()>

  >许多软件包与标准的DOM元素很好地工作，但是由于具有相同的基本限制而与文本区域斗争：受到限制访问内部渲染和定位。

  >

  结论
  • 尽管有丰富的文本互动的进步，但与文本领域的合作仍然令人惊讶地复杂。 探索这些浏览器API是一种有意义的经历。 未来的API可以简化诸如基于选择的弹出案件之类的任务。 如果您遇到了其他解决方案，我将不胜感激。
  >

以上是哪些文字区域弹出案教给我有关浏览器API的知识的详细内容。更多信息请关注PHP中文网其他相关文章！