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

Posted gerry2019

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了富文本粘贴文本去除默认格式相关的知识,希望对你有一定的参考价值。

  在我们开发过程中,经常用到的文本输入框,常用的是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     })
 
  参考资料:
  
 

以上是关于富文本粘贴文本去除默认格式的主要内容,如果未能解决你的问题,请参考以下文章

kindeditor富文本编辑器支持从word复制粘贴保留格式和图片的插件

百度富文本编辑器支持从word复制粘贴保留格式和图片的插件

拦截粘贴到(丰富的)编辑控件

富文本编辑器xheditor支持从word复制粘贴保留格式和图片的插件

让富文本编辑器支持复制doc中多张图片直接粘贴上传

js处理富文本编辑器转义去除转义去除HTML标签