Web谈天器材的富文本输入框

最近折腾 Websocket，规划开拓一个谈天室应用练练手。在应用开拓的进程中发明可以插入 emoji ，粘贴图片的富文本输入框着实蕴含着很多风趣的常识，于是便规划记录下来和各人分享。

客栈地点：chat-input-box

预览地点：https://codepen.io/jrainlau/p...

起首来看看 demo 结果：

是不是认为很神奇？接下来我会一步步讲授这内里的成果都是怎样实现的。

输入框富文本化

传统的输入框都是行使 <textarea> 来建造的，它的上风长短常简朴，但最大的缺陷却是无法展示图片。为了可以或许让输入框可以或许展示图片（富文本化），我们可以回收配置了 contenteditable="true" 属性的 <div> 来实现这内里的成果。

简朴建设一个 index.html 文件，然后写入如下内容：

<div class="editor" contenteditable="true">  
  <img src="https://static.easyicon.net/preview/121/1214124.gif" alt="">  
</div> 

打开赏识器，就能看到一个默认已经带了一张图片的输入框：

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

接下来的使命，就是思索怎样直接通过 control + v 把图片粘贴进去了。

处理赏罚粘贴变乱

任何通过“复制”可能 control + c 所复制的内容（包罗屏幕截图）城市储存在剪贴板，在粘贴的时辰可以在输入框的 onpaste 变乱内里监听到。

<div class="editor" contenteditable="true">  
  <img src="https://static.easyicon.net/preview/121/1214124.gif" alt="">  
</div> 

而剪贴板的的内容则存放在 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.clipboardData.items[i]  
      // 文本名目内容处理赏罚  
      if (item.kind === 'string') {  
        item.getAsString((str) => {  
          resolve(str)  
        })  
      // 图片名目内容处理赏罚  
      } else if (item.kind === 'file') {  
        const pasteFile = item.getAsFile()  
        // 处理赏罚pasteFile  
        // TODO(pasteFile)  
      } else {  
        reject(new Error('Not allow to paste this type!'))  
      }  
    }  
  })  
}  
export default onPaste 

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!