在光標位置處插入圖片

madthumb 發布于2019-08-20 18:52 / 517人閱讀

摘要：在光標位置處插入圖片問題來源需要在圖中所示的文本區域內在光標處插入一張圖片需要了解的前置知識可以略過對象表示用戶選擇的文本范圍或插入符號的當前位置。在的起始位置插入節點。

在光標位置處插入圖片 問題來源

需要在圖中所示的文本區域內在光標處插入一張圖片

需要了解的前置知識(可以略過)

Selection

Selection對象表示用戶選擇的文本范圍或插入符號的當前位置。它代表頁面中的文本選區，可能橫跨多個元素。文本選區由用戶拖拽鼠標經過文字而產生。要獲取用于檢查或修改的Selection對象，請調用 window.getSelection()。

window.getSelection()

返回一個 Selection 對象，表示用戶選擇的文本范圍或插入符號的當前位置。

Range

Range表示包含節點和部分文本節點的文檔片段。

Range可以用 Document 對象的 createRange方法創建，也可以用Selection對象的getRangeAt方法取得。另外，可以通過構造函數 Range() 來獲得一個 Range

Selection.getRangeAt()

返回一個包含當前選區內容的區域對象。

Range.createContextualFragment()

該方法通過調用HTML片段解析算法或XML片段解析算法返回一個文檔片段 DocumentFragment 。

Range.insertNode()

在Range的起始位置插入節點。

解決方案

  // 返回插入符號當前位置的selection對象
  var selection = window.getSelection()

  // 獲取包含當前節點的文檔片段
  var range = selection.getRangeAt(0)

  // 創建需追加到光標處節點的文檔片段
  var fragment = range.createContextualFragment("")

  // 將創建的文檔片段插入到光標處
  range.insertNode(fragment.lastChild)

由于本人學識有限，有很多需要提升的地方，望大家多多指教。

GPU云服務器云服務器光標處 java的光標位置插入圖片 ppt插入圖片

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84807.html

編輯器之神-VIM

摘要：在這天地間，流傳這兩大神器的故事據說是神的編輯器，而是編輯器之神。正所謂，工欲善其事必先利其器。今天就和大家分享一下關于編輯器之神的傳說。主要用于用來編寫和查看文本文件。在這天地間，流傳這兩大神器的故事：據說Emacs是神的編輯器，而Vim是編輯器之神。正所謂，工欲善其事,必先利其器。今天就和大家分享一下關于編輯器之神Vim的傳說。一、Vim的歷史 1.下圖是關于幾款主流編輯器...

imingyu 2019-06-28 10:14 評論0 收藏0
在Windows上使用Vim

摘要：幾年前使用，在此記錄下的命令以及配置文件保存退出命令保存后面加強制執行退出后面加強制執行，不保存保存并退出保存并退出僅在需要時保存保存并退出退出不保存搜索替換命令向下搜索如果搜索出多個匹配，可按鍵到下一個向上搜索替換第一個匹配的替換整行中匹幾年前使用vim，在此記錄下Vim的命令以及_Vimrc配置文件保存&退出命令（Save&Quit Command） :w #保存（后面加！...

woshicixide 2019-06-28 10:14 評論0 收藏0
vim 入門筆記

摘要：學習整理注意后文中帶尖括號的描述表示鍵盤按鍵，比如回車是指回車按鍵。輸入文件名回車即可進入編輯器編輯該文件。按鍵回車進入替換模式可以連續替換多個字符。所有的命令都必須敲回車鍵結束。前言本文的初衷從知道 vim 開始我就有心學習并嘗試過幾次，每次都是暫時的心血來潮，最終全部不了了之，就連最基本的 vimtutor 我都是學個兩三節就半途而廢，所以這次干脆寫篇文章，利用幾次學習把這篇...

Hegel_Gu 2019-06-28 10:36 評論0 收藏0