知識在于積累澜薄，踩坑越多侣滩，你越強??
前言
用多了JQuery，習(xí)慣了使用JQuery的API操作DOM涡真，幾乎忘記了原生JS對DOM操作分俯，今天在項目中遇到了文字和圖片混輸?shù)那闆r，第一個想到的辦法是用textarea實現(xiàn)综膀，結(jié)果發(fā)現(xiàn)實現(xiàn)不了圖片輸入澳迫，然后想著找個富文本編輯器的插件實現(xiàn)，深思熟慮之后剧劝，我的需求好像也沒那么復(fù)雜橄登，不至于引用個插件，看了掘金的發(fā)布沸點功能讥此，然后就模仿了其作法拢锹，于是就有了這篇文章的分享。先給大家展示下最后實現(xiàn)的效果??
image
實現(xiàn)思路
- 利用div的contenteditable屬性,讓div可編輯
- 綁定ref屬性萄喳，用于操作輸入框元素
- 圖片點擊時卒稳，獲取圖片地址，使用require轉(zhuǎn)換圖片地址
- 創(chuàng)建img標簽他巨，賦值轉(zhuǎn)換好的圖片地址
- 從refs對象中獲取到輸入框元素充坑，賦值創(chuàng)建好的img標簽
實現(xiàn)過程
- 聲明div可編輯减江，監(jiān)聽回車鍵事件，關(guān)閉拼寫檢查捻爷，綁定ref方便獲取當前元素
<div class="input-panel" ref="msgInputContainer" @keydown.enter.exact="sendMessage($event)" contenteditable="true" spellcheck="false"></div> - 表情輸入框綁定對應(yīng)的事件
<div class="item-panel" v-for="item in this.emojiList" :key="item.info"> <img :src="require(`../assets/img/emoji/${item.src}`)" :alt="item.info" @mouseover="emojiConversion($event,'over',item.src,item.hover,item.info)" @mouseleave="emojiConversion($event,'leave',item.src,item.hover,item.info)" @click="emojiConversion($event,'click',item.src,item.hover,item.info)"> </div> - 實現(xiàn)表情框圖片點擊事件
emojiConversion: function (event, status, path, hoverPath, info) { if (status === "over") { event.target.src = require(`../assets/img/emoji/${hoverPath}`); } else if (status === "click") { // 表情輸入 const imgSrc = require(`../assets/img/emoji/${hoverPath}`); /** * 不推薦的寫法: * 無法獲取焦點 * 無法在當前焦點的位置插入元素 */ // const imgTag = document.createElement("img"); // imgTag.src = imgSrc; // imgTag.alt = info; // this.$refs.msgInputContainer.appendChild(imgTag); /** * 推薦使用document暴露的execCommand 方法來操作此處 * 可以在當前焦點處插入元素 * 感謝評論區(qū)掘友的建議 */ const imgTag = `<img src="${imgSrc}" width="28" height="28" alt="${info}">`; document.execCommand("insertHTML", false, imgTag); } else { event.target.src = require(`../assets/img/emoji/${path}`); } }
踩坑記錄
- 直接使用append()方法
公司項目一直用JQuery辈灼，類似的需求直接append，以為是js提供的方法也榄，結(jié)果這里直接使用巡莹，答案很明顯，直接將DOM字符串插入了輸入框里??
-
手動實現(xiàn)字符串轉(zhuǎn)dom
自己手動實現(xiàn)甜紫，不知道是不是自己寫錯了降宅，結(jié)果也是行不通，如果有發(fā)現(xiàn)錯誤的朋友囚霸，歡迎評論區(qū)留言腰根。
image
- 正確的實現(xiàn)方法
創(chuàng)建DOM字符串，使用document暴露的execCommand方法來插入創(chuàng)建好的DOM字符串邮辽。使用方法
寫在最后
- 文中如有錯誤唠雕，歡迎在評論區(qū)指正贸营，如果這篇文章幫到了你吨述，歡迎點贊和關(guān)注??
- 本文首發(fā)于掘金，如需轉(zhuǎn)載請注明出處??
