h5 富文本输入框_富文本输入框

本文介绍了如何创建一个支持插入emoji和粘贴图片的富文本输入框。通过设置contenteditable属性,实现了输入框的富文本化,然后通过监听'paste'事件处理粘贴内容,包括文本和图片。通过FileReader和canvas压缩图片并转化为base64,最后利用document.execCommand或Selection API插入内容。文章还提到了处理emoji插入的问题,并提供了相关工具方法。
摘要由CSDN通过智能技术生成

Web聊天工具的富文本输入框

最近折腾 Websocket,打算开发一个聊天室应用练练手。在应用开发的过程中发现可以插入 emoji ,粘贴图片的富文本输入框其实蕴含着许多有趣的知识,于是便打算记录下来和大家分享。

首先来看看 demo 效果:

是不是觉得很神奇?接下来我会一步步讲解这里面的功能都是如何实现的。

输入框富文本化

传统的输入框都是使用 来制作的,它的优势是非常简单,但最大的缺陷却是无法展示图片。为了能够让输入框能够展示图片(富文本化),我们可以采用设置了 contenteditable="true" 属性的

来实现这里面的功能。

简单创建一个 index.html 文件,然后写入如下内容:

打开浏览器,就能看到一个默认已经带了一张图片的输入框:

光标可以在图片前后移动,同时也可以输入内容,甚至通过退格键删除这张图片——换句话说,图片也是可编辑内容的一部分,也意味着输入框的富文本化已经体现出来了。

接下来的任务,就是思考如何直接通过 control + v 把图片粘贴进去了。

处理粘贴事件

任何通过“复制”或者 control + c 所复制的内容(包括屏幕截图)都会储存在剪贴板,在粘贴的时候可以在输入框的 onpaste 事件里面监听到。

document.querySelector('.editor').addEventListener('paste', (e) => {

console.log(e.clipboardData.items)

})

而剪贴板的的内容则存放在 DataTransferItemList 对象中,可以通过 e.clipboardData.items 访问到:

细心的读者会发现,如果直接在控制台点开 DataTransferItemList 前的小箭头,会发现对象的 length 属性为0。说好的剪贴板内容呢?其实这是 Chrome 调试的一个小坑。在开发者工具里面,console.log 出来的对象是一个引用,会随着原始数据的改变而改变。由于剪贴板的数据已经被“粘贴”进输入框了,所以展开小箭头以后看到的 DataTransferItemList 就变成空的了。为此,我们可以改用 console.table 来展示实时的结果。

在明白了剪贴板数据的存放位置以后,就可以编写代码来处理它们了。由于我们的富文本输入框比较简单,所以只需要处理两类数据即可,其一是普通的文本类型数据,包括 emoji 表情;其二则是图片类型数据。

新建 paste.js 文件:

const onPaste = (e) => {

// 如果剪贴板没有数据则直接返回

if (!(e.clipboardData && e.clipboardData.items)) {

return

}

// 用Promise封装便于将来使用

return new Promise((resolve, reject) => {

// 复制的内容在剪贴板里位置不确定,所以通过遍历来保证数据准确

for (let i = 0, len = e.clipboardData.items.length; i < len; i++) {

const item = e.clipboard

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值