哪些文字區域彈出案教給我有關瀏覽器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中文網其他相關文章！