最近折腾了Websocket，准备开发一个聊天室应用来练习。在应用开发过程中，我发现这个可以插入表情符号和粘贴图片的富文本输入框其实包含了很多有趣的知识，所以打算记录下来分享给大家。富文本输入框传统的输入框是使用制作的，优点是非常简单，但是最大的缺陷是不能显示图片。为了让输入框能够显示图片（富文本），我们可以使用带有属性contenteditable="true"的<div>来实现里面的功能。只需创建一个index.html文件并写入以下内容：<divclass="editor"contenteditable="true"><imgsrc="https://static.easyicon.net/preview/121/1214124.gif"alt=""></div>打开浏览器，默认可以看到一个带图片的输入框：光标可以在图片中来回移动，还可以输入内容，甚至可以通过退格键删除图片——换句话说，图片也是可编辑内容的一部分，这也意味着输入框的富文本得到了体现。接下来的任务就是想着怎么通过control+v直接粘贴图片。处理paste事件任何通过“copy”或者control+c复制的内容（包括截图）都会存入剪贴板，可以在onpaste中监听粘贴时输入框的事件。<divclass="editor"contenteditable="true"><imgsrc="https://static.easyicon.net/preview/121/1214124.gif"alt=""></div>剪贴板的内容是It保存在DataTransferItemList对象中，可以通过e.clipboardData.items访问：细心的读者会发现，如果在控制台直接点击DataTransferItemList前面的小箭头，会发现该对象的length属性为0。剪贴板的内容呢？其实这是Chrome调试的一个小坑。在开发者工具中，console.log出来的对象是一个引用，会随着原始数据的变化而变化。由于剪贴板数据已经被“粘贴”到输入框中，所以展开小箭头后看到的DataTransferItemList就变成了空的。为此，我们可以使用console.table来显示实时结果。了解剪贴板数据的存储位置后，您可以编写代码来处理它们。由于我们的富文本输入框比较简单，所以只需要处理两类数据，一类是普通文本类型的数据，包括emoji表情；另一个是图像类型数据。新建一个paste.js文件：constonPaste=(e)=>{//如果剪贴板没有数据，直接返回if(!(e.clipboardData&&e.clipboardData.items)){return}//用Promise封装为以后使用returnnewPromise((resolve,reject)=>{//复制的内容在剪贴板中的位置不确定，所以通过遍历for(leti=0,len=e.clipboardData.items来保证数据准确.length;i<len;i++){constitem=e.clipboardData.items[i]//文本格式内容处理if(item.kind==='string'){item.getAsString((str)=>{resolve(str)})//图片格式内容处理}elseif(item.kind==='file'){constpasteFile=item.getAsFile()//处理pasteFile//TODO(pasteFile)}else{reject(newError('Notallowtopastethistype!'))}}})}exportdefaultonPaste然后可以直接在onPaste事件中使用：document.querySelector('.editor').addEventListener('paste',async(e)=>{constresult=awaitonPaste(e)console.log(result)})以上代码支持text格式，接下来就是imag的处理e格式。玩过<inputtype="file">的同学就会知道，包括图片在内的所有文件格式内容都会存储在File对象中，在剪贴板中也是一样的。所以我们可以写一组通用的函数来读取File对象中的图片内容，并转换成base64字符串。粘贴图片为了更好的在输入框中显示图片，必须限制图片的大小，所以这个图片处理函数不仅可以读取File对象中的图片，还可以对其进行压缩。新建一个chooseImg.js文件：/***预览函数**@param{*}dataUrlbase64字符串*@param{*}cb回调函数*/functiontoPreviewer(dataUrl,cb){cb&&cb(dataUrl)}/***图片压缩函数**@param{*}imgimageobject*@param{*}fileTypeimagetype*@param{*}maxWidthimage***width*@returnsbase64string*/functioncompress(img,fileType,maxWidth){letcanvas=document.createElement('canvas')letctx=canvas.getContext('2d')constproportion=img.width/img.heightconstwidth=maxWidthconstheight=maxWidth/proportioncanvas.width=widthcanvas.height=heightctx.fillStyle='#fff'ctx.fillRect(0,0,canvas.width,canvas.height)ctx.drawImage(img,0,0,width,height)constbase64data=canvas.toDataURL(fileType,0.75)canvas=ctx=nullreturnbase64data}/***选择图片函数**@param{*}einput.onchange事件对象*@param{*}cb回调函数*@param{number}[maxsize=200*1024]image***volume*/functionchooseImg(e,cb,maxsize=200*1024){constfile=e.target.files[0]if(!file||!/\/(?:jpeg|jpg|png)/i.test(file.type)){return}constreader=newFileReader()reader.onload=function(){constreult=this.resultlettimg=newImage()if(result.length<=maxsize){toPreviewer(result,cb)return}img.onload=function(){constcompresscompressedDataUrl=compress(img,file.type,maxsize/1024)toPreviewer(compressedDataUrl,cb)img=null}img。src=result}reader.readAsDataURL(file)}exportdefaultchooseImg关于使用canvas压缩图片和使用FileReader读取文件，这里不再赘述。有兴趣的读者可以自行参考上一步中的paste.js函数。TODO()可以重写为chooseImg():constimgEvent={target:{files:[pasteFile]}}chooseImg(imgEvent,(url)=>{resolve(url)})返回到浏览器，如果我们复制一张图片，粘贴到输入框，就可以看到控制台打印出data:image/png;base64开头的图片地址。在输入框中插入内容经过前面两步，我们终于可以读取到剪贴板中的文本内容和图片内容了，接下来就是将它们正确插入到输入框的光标位置。对于插入内容，我们可以直接通过document.execCommand方法来完成。这个方法的详细用法可以在MDN文档中找到，这里我们只需要使用insertText和insertImage即可。document.querySelector('.editor').addEventListener('paste',async(e)=>{constresult=awaitonPaste(e)constimgRegx=/^data:image\/png;base64,/constcommand=imgRegx.test(结果)?'insertImage':'insertText'document.execCommand(command,false,result)})但是在某些版本的Chrome浏览器下，insertImage方法可能无效。这时候可以使用另一种方法，使用Selection来实现。而选择和插入表情符号的操作后面也会用到，先来看看吧。当我们在代码中调用window.getSelection()时，我们会得到一个Selection对象。如果你在页面上选择了一些文本，然后在控制台执行window.getSelection().toString()，你会看到输出的是你选择的那部分文本。对应这部分区域文本的是一个范围对象，可以使用window.getSelection().getRangeAt(0)来访问。range不仅包含选中区域的文本内容，还包含该区域的startOffset和endOffset。我们也可以通过document.createRange()手动创建一个range，将内容写入其中，显示在输入框中。插入图片，首先从window.getSelection()中获取范围，然后将图片插入其中。document.querySelector('.editor').addEventListener('paste',async(e)=>{//读取剪贴板内容constresult=awaitonPaste(e)constimgRegx=/^data:image\/png;base64,///如果是图片格式（base64），通过构造range将<img>标签插入到正确位置//如果是文本格式，通过document.execCommand('insertText')方法插入文本如果（imgRegx.test（结果））{constsel=window.getSelection（）if（sel&&sel.rangeCount===1&&sel.isCollapsed）{constrange=sel.getRangeAt（0）constimg=newImage（）img.src=resultrange.insertNode(img)range.collapse(false)sel.removeAllRanges()sel.addRange(range)}}else{document.execCommand('insertText',false,result)}})这个方法也可以很好的完成粘贴图片的功能，而且通用性会更好。接下来，我们将使用Selection来完成emoji的插入。无论插入表情符号是粘贴文字还是图片，我们的输入框始终处于焦点状态。而当我们从表情面板中选择emoji表情时，输入框会先失焦（模糊），然后再重新聚焦。由于document.execCommand方法必须在输入框获得焦点时触发，因此不能用于处理表情符号插入。上一节讲到，Selection可以让我们获取到选中文本在聚焦状态下的起始位置startOffset和结束位置endOffset。如果没有选中文本，只是处于聚焦状态，这两个位置的值是相等的（相当于选中文本为空），也就是光标所在的位置。只要我们能够在失去焦点之前记录下这个位置，那么我们就可以通过范围将表情符号插入到正确的位置。先写两个实用方法。新建cursorPosition.js文件：/***获取光标位置*@param{DOMElement}元素输入框dom节点*@return{Number}光标位置*/exportconstgetCursorPosition=(element)=>{letcaretOffset=0constdoc=element.ownerDocument||element.documentconstwin=doc.defaultView||doc.parentWindowconstsel=win.getSelection()if(sel.rangeCount>0){constrange=win.getSelection().getRangeAt(0)constpreCaretRange=range.cloneRange()preCaretRange.selectNodeContents(element)preCaretRange.setEnd(range.endContainer,range.endOffset)caretOffset=preCaretRange.toString().length}returncaretOffset}/***设置光标位置*@param{DOMElement}element输入框dom节点*@param{Number}cursorPosition光标位置值*/exportconstsetCursorPosition=(element,cursorPosition)=>{constrange=document.createRange()range.setStart(element.firstChild,cursorPosition)range.setEnd(element.firstChild,cursorPosition)constsel=window.getSelection()sel.removeAllRanges()sel.addRange(range)}有了这两个方法，就可以在编辑器节点中使用了。首先在节点的keyup和click事件中记录光标位置：letcursorPosition=0consteditor=document.querySelector('.editor')editor.addEventListener('click',async(e)=>{cursorPosition=getCursorPosition(editor)})editor.addEventListener('keyup',async(e)=>{cursorPosition=getCursorPosition(editor)})记录光标位置后，调用insertEmoji()方法即可插入emoji字符。insertEmoji(emoji){consttext=editor.innerHTML//插入emojieditor.innerHTML=text.slice(0,cursorPosition)+emoji+text.slice(cursorPosition,text.length)//在光标位置后移动一个位置保证SetCursorPosition(editor,this.cursorPosition+1)afterthenewinsertedemoji//更新本地保存的光标位置变量（注意emoji占两个字节，所以加1）cursorPosition=getCursorPosition(editor)+1//emoji中涉及的代码完结文章已上传至仓库。为了简单起见，在不影响阅读的情况下，用VueJS做了处理。***我想说的是，这个Demo只完成了输入框最基本的部分，关于复制粘贴还有很多细节需要处理（比如从其他地方复制内联样式等等），所以我不会在这里一一列出。已经展开了，有兴趣的读者可以自己研究，欢迎给我留言~</p> </div> </div> <div class="zuowen_sxy"> <div class="prev">上一篇：<a title="除 Windows 11 外，微软刚发布的 KB5013942 也同样会导致 Windows 10 出错" href="/kejiguancha/134683.html">除 Windows 11 外，微软刚发布的 KB5013942 也同样会导致 Windows 10 出错</a> </div> <div class="prev">下一篇：<a title="模块化数据中心展示其灵活性" href="/kejiguancha/134685.html">模块化数据中心展示其灵活性</a> </div> </div> <div class="related_about"> <div class="related_about_t"><code>网络聊天工具的富文本输入框相关文章</code></div> <ul> <li><a href="/kejifunen/371168.html" target="_blank" title="比尔盖茨！没想到你可以用智能手表来管理你的牛群">比尔盖茨！没想到你可以用智能手表来管理你的牛群</a></li> <li><a href="/kejifunen/371163.html" target="_blank" title="奥克斯实行“使用60天不满意包退”的四大理由">奥克斯实行“使用60天不满意包退”的四大理由</a></li> <li><a href="/kejifunen/371159.html" target="_blank" title="解析可穿戴设备大数据突破硬件限制的三大关键因素">解析可穿戴设备大数据突破硬件限制的三大关键因素</a></li> <li><a href="/kejifunen/371157.html" target="_blank" title="暑假惊喜不仅是录取通知书，还有天房带来的贴心实惠的智能锁！ ">暑假惊喜不仅是录取通知书，还有天房带来的贴心实惠的智能锁！ </a></li> <li><a href="/kejifunen/371155.html" target="_blank" title="红领队是索尼OLED电视A1的粉丝，你呢？ ">红领队是索尼OLED电视A1的粉丝，你呢？ </a></li> <li><a href="/kejifunen/371149.html" target="_blank" title="可穿戴设备的天花板很低，取代手机是伪命题">可穿戴设备的天花板很低，取代手机是伪命题</a></li> <li><a href="/kejifunen/371141.html" target="_blank" title="韩国学者推出可完全替代智能手机的概念智能眼镜">韩国学者推出可完全替代智能手机的概念智能眼镜</a></li> <li><a href="/kejifunen/371140.html" target="_blank" title="从本次MWC上海看国民VR时代的六大武器">从本次MWC上海看国民VR时代的六大武器</a></li> <li><a href="/kejifunen/371136.html" target="_blank" title="风暴之镜4评测！这款让我们又爱又恨的产品">风暴之镜4评测！这款让我们又爱又恨的产品</a></li> <li><a href="/kejifunen/371135.html" target="_blank" title="颠覆传统的智能三星Gear S2外观详细解读">颠覆传统的智能三星Gear S2外观详细解读</a></li> <li><a href="/kejifunen/371131.html" target="_blank" title="Android P强力优化蓝牙耳机！自动记住多个设备的音量">Android P强力优化蓝牙耳机！自动记住多个设备的音量</a></li> <li><a href="/kejifunen/371129.html" target="_blank" title="难得一见的清华深度学习课程！我们“偷”了全套干货">难得一见的清华深度学习课程！我们“偷”了全套干货</a></li> <li><a href="/kejifunen/371124.html" target="_blank" title="神奇的智能裤，穿上它就告别轮椅！ ">神奇的智能裤，穿上它就告别轮椅！ </a></li> <li><a href="/kejifunen/371121.html" target="_blank" title="苹果的祝福！ JDI将全力进击智能手表市场">苹果的祝福！ JDI将全力进击智能手表市场</a></li> <li><a href="/kejifunen/371118.html" target="_blank" title="三星曝20个新漏洞！黑客可以控制你家的摄像头和门锁">三星曝20个新漏洞！黑客可以控制你家的摄像头和门锁</a></li> <li><a href="/kejifunen/371116.html" target="_blank" title="了解一下BOSE新款耳塞，内置10种不同的自然白噪音帮助睡眠">了解一下BOSE新款耳塞，内置10种不同的自然白噪音帮助睡眠</a></li> <li><a href="/kejifunen/371115.html" target="_blank" title="马斯克承认特斯拉自研芯片其实是被逼的！ ">马斯克承认特斯拉自研芯片其实是被逼的！ </a></li> <li><a href="/kejifunen/371113.html" target="_blank" title="智能硬件可能会侵犯人类隐私，目前的政策基本上是白费力气">智能硬件可能会侵犯人类隐私，目前的政策基本上是白费力气</a></li> <li><a href="/kejifunen/371106.html" target="_blank" title="VR体验中心火爆，从密室逃脱到VR的“转变”你了解多少">VR体验中心火爆，从密室逃脱到VR的“转变”你了解多少</a></li> <li><a href="/kejifunen/371101.html" target="_blank" title="智能手表Ticwatch！两会记者最喜欢的高科技设备">智能手表Ticwatch！两会记者最喜欢的高科技设备</a></li> </ul> </div> </div> <div class="main-right"> <div class="right_fix"> <div class="r_con"> <div class="r_title">最新推荐</div> <ul> <li><em>1</em><a href="/kejifunen/371280.html" title="魅族MX4搭配的inWatch π智能手表详解" target="_blank">魅族MX4搭配的inWatch π智能手表详解</a></li> <li><em>2</em><a href="/kejifunen/371279.html" title="这才是真正的黑科技！最强国筹Bet365下周五正式发布！ " target="_blank">这才是真正的黑科技！最强国筹Bet365下周五正式发布！ </a></li> <li><em>3</em><a href="/kejifunen/371278.html" title="速冷、舒适、节能堪称“全能”，美的极爽空调特价促销" target="_blank">速冷、舒适、节能堪称“全能”，美的极爽空调特价促销</a></li> <li><em>4</em><a href="/kejifunen/371277.html" title="日薪5000元的苏宁空调安装体验官有何经历？ " target="_blank">日薪5000元的苏宁空调安装体验官有何经历？ </a></li> <li><em>5</em><a href="/kejifunen/371276.html" title="黑科技！专业运动员的智能手环刷新了可穿戴设备的未来" target="_blank">黑科技！专业运动员的智能手环刷新了可穿戴设备的未来</a></li> <li><em>6</em><a href="/kejifunen/371268.html" title="石墨烯可以将普通纸张变成用于柔性显示器和可穿戴设备的新材料" target="_blank">石墨烯可以将普通纸张变成用于柔性显示器和可穿戴设备的新材料</a></li> <li><em>7</em><a href="/kejifunen/371266.html" title="小米手环3体验！也许它可以取代你的智能手表" target="_blank">小米手环3体验！也许它可以取代你的智能手表</a></li> <li><em>8</em><a href="/kejifunen/371265.html" title="有人想众筹开发一款监测屁的健康可穿戴设备" target="_blank">有人想众筹开发一款监测屁的健康可穿戴设备</a></li> <li><em>9</em><a href="/kejifunen/371262.html" title="苹果新款Apple Watch开箱！您对它的外观满意吗？ " target="_blank">苹果新款Apple Watch开箱！您对它的外观满意吗？ </a></li> <li><em>10</em><a href="/kejifunen/371260.html" title="可穿戴挑战赛的20万美元大奖就是这款手环" target="_blank">可穿戴挑战赛的20万美元大奖就是这款手环</a></li> </ul> </div> <div class="r_con"> <div class="r_title">猜你喜欢</div> <ul class="you_like"> <li><em>1</em><a href="/kejifunen/371257.html" title="独家的！逃跑时老板的公章被抢走了！这个明星机器人深陷破产困境" target="_blank">独家的！逃跑时老板的公章被抢走了！这个明星机器人深陷破产困境</a></li> <li><em>2</em><a href="/kejifunen/371256.html" title="VR“断断续续”的流行还存在这些问题" target="_blank">VR“断断续续”的流行还存在这些问题</a></li> <li><em>3</em><a href="/kejifunen/371253.html" title="这种可以骑乘并自动跟随人的移动机器人在海外收获了无数粉丝" target="_blank">这种可以骑乘并自动跟随人的移动机器人在海外收获了无数粉丝</a></li> <li><em>4</em><a href="/kejifunen/371251.html" title="董明珠对美的的犀利点评！根本不是对手，算是长辈" target="_blank">董明珠对美的的犀利点评！根本不是对手，算是长辈</a></li> <li><em>5</em><a href="/kejifunen/371249.html" title="诺基亚用时尚诠释智能手表的未来" target="_blank">诺基亚用时尚诠释智能手表的未来</a></li> <li><em>6</em><a href="/kejifunen/371246.html" title="智能手环的准确性受到质疑，厂商盲目跟风，忽视软实力" target="_blank">智能手环的准确性受到质疑，厂商盲目跟风，忽视软实力</a></li> <li><em>7</em><a href="/kejifunen/371242.html" title="可穿戴设备！你有自己的信息" target="_blank">可穿戴设备！你有自己的信息</a></li> <li><em>8</em><a href="/kejifunen/371230.html" title="LV高管！瑞士奢侈手表行业将受益于智能手表的繁荣" target="_blank">LV高管！瑞士奢侈手表行业将受益于智能手表的繁荣</a></li> <li><em>9</em><a href="/kejifunen/371227.html" title="致力于可穿戴设备的续航能力，下一代电池会取代锂电池吗？ " target="_blank">致力于可穿戴设备的续航能力，下一代电池会取代锂电池吗？ </a></li> <li><em>10</em><a href="/kejifunen/371224.html" title="雷军透露，小米手环2的图片已于5月10日发布" target="_blank">雷军透露，小米手环2的图片已于5月10日发布</a></li> <li><em>11</em><a href="/kejifunen/371219.html" title="iPhone XS上市不温不火的背后，国产高性价比手机备受追" target="_blank">iPhone XS上市不温不火的背后，国产高性价比手机备受追</a></li> <li><em>12</em><a href="/kejifunen/371218.html" title="手机照片盲评：哪张照片最适合你的选择？ " target="_blank">手机照片盲评：哪张照片最适合你的选择？ </a></li> <li><em>13</em><a href="/kejifunen/371215.html" title="全面评测399元华为荣耀手环零！你不知道的偏执" target="_blank">全面评测399元华为荣耀手环零！你不知道的偏执</a></li> <li><em>14</em><a href="/kejifunen/371211.html" title="被小猪佩奇祝福的社会人都out了，据说这群新社会人比较受欢迎" target="_blank">被小猪佩奇祝福的社会人都out了，据说这群新社会人比较受欢迎</a></li> <li><em>15</em><a href="/kejifunen/371210.html" title="除了小龙虾，世界杯还有这些值得关注的技术" target="_blank">除了小龙虾，世界杯还有这些值得关注的技术</a></li> <li><em>16</em><a href="/kejifunen/371200.html" title="谷歌的硬件一直广受好评，但并不受欢迎，推出两款智能手表的底气" target="_blank">谷歌的硬件一直广受好评，但并不受欢迎，推出两款智能手表的底气</a></li> <li><em>17</em><a href="/kejifunen/371192.html" title="什么能让你摆脱“随机无蛋”的可穿戴产品？ " target="_blank">什么能让你摆脱“随机无蛋”的可穿戴产品？ </a></li> <li><em>18</em><a href="/kejifunen/371182.html" title="林林的爆料！可穿戴设备的实用性还不够" target="_blank">林林的爆料！可穿戴设备的实用性还不够</a></li> <li><em>19</em><a href="/kejifunen/371172.html" title="微软HoloLens眼镜！打破虚拟与现实的界限" target="_blank">微软HoloLens眼镜！打破虚拟与现实的界限</a></li> <li><em>20</em><a href="/kejifunen/371171.html" title="高通推出Snapdragon Wear 2500，增加在可穿" target="_blank">高通推出Snapdragon Wear 2500，增加在可穿</a></li> </ul> </div> </div> </div> </div> <div class="related_article"></div> <div class="footer"> <p>Copyright © 2012-2022 程序源 版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p> <p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p> </div> <!-- 应用插件标签 start --> <!-- 应用插件标签 end --> </body> </html>
