Js關於游標物件與定位插入圖片
阿新 • • 發佈:2018-11-12
在編輯器裡插入文字、圖片表情等需要用到Js定位游標節點。
常見思路是把游標兩邊資料切開,把圖片或者字元加在中間,然後把三個字串重新拼接起來,這樣要算長度、切割字串、重新拼接起來。很麻煩。
我的Vue專案中:
/* * 選擇表情 插入聊天框 * */ select(e) { // 定義最後游標物件 let lastEditRange; //獲取點選圖片地址 let $myInput = this.$el.querySelector('.my-input') // 編輯框設定焦點 $myInput.focus() // 獲取選定物件 let selection = getSelection() // 判斷是否有最後游標物件存在 if (lastEditRange) { // 存在最後游標物件,選定物件清除所有游標並新增最後游標還原之前的狀態 selection.removeAllRanges() selection.addRange(lastEditRange) } //定義圖片節點--》插入到游標所在位置-----》完成!下面4行是關鍵。直接在游標位置處插入節點。 let range = selection.getRangeAt(0) range.insertNode(e) },
但是點選表情插入成功後,會有個選中的效果,不知怎麼去除,可不可以只獲得焦點而不選中?(如果有什麼方法,歡迎留言評論啊,我要向你們學習)
轉載地址:https://blog.csdn.net/houxingyao/article/details/62887480#commentBox