富文本粘贴文本去除默认格式

2019/11/07 18:18
阅读数 30

  在我们开发过程中,经常用到的文本输入框,常用的是input/textarea。然而在有些情况下,input/textarea可能满足不了我们的业务需求,textarea/input大部分是处理纯文本,不能附加一些自定义样式,文本域内业务操作空间也不怎么大,但是富文本,即可以编辑的HTML,可以针对输入内容做任意自定义处理,因此,在特定业务需求下,富文本编辑更符合我们的实际业务要求。

  富文本基本使用:只需要给HTML标签添加一个contenteditable=‘true’即可完成普通HTML与富文本的转换,效果如下:

<section>
    <h3>富文本编辑器</h3>
    <div style="height: 300px;width: 300px;background: #eee;" contenteditable="true"></div>
  </section>

  

 

   当我们输入的时候,是输入普通的文本,具体样式以我们设置的css为准。当我们复制文本的时候,默认会把所有的样式复制进去,如下所示:

  

 

   这一点有时候也是比较繁琐的,可能我们并不需要这些默认样式,我们只想要复制的文本,按照我们的要求进行转换,此时可能就要用到强大的Selection和Range对象了,可以解决我们开发中很多常见的问题。下面就简介下Selection 和 Range对象:

  借用MDN上的解释:Selection对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。要获取用户检查或修改的Selection对象,请调用window.getSelection()。

  Range则是每个具体的选区,对于富文本的复制文本格式过滤,我们主要就是借助Range对象中某些具体的属性和方法,从而来操作选区内容,具体实现代码如下:

 1 document.addEventListener('paste', e => {
 2       // 阻止默认的复制事件
 3       e.preventDefault()
 4       let txt = ''
 5       let range = null
 6       // 获取复制的文本
 7       txt = e.clipboardData.getData('text/plain')
 8       // 获取页面文本选区
 9       range = window.getSelection().getRangeAt(0)
10       // 删除默认选中文本
11       range.deleteContents()
12       // 创建一个文本节点,用于替换选区文本
13       let pasteTxt = document.createTextNode(txt)
14       // 插入文本节点
15       range.insertNode(pasteTxt)
16       // 将焦点移动到复制文本结尾
17       range.collapse(false)
18     })
 
  参考资料:
  
 
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部