quill自定义清除格式功能，选中内容清除格式

quill自定义清除格式功能，选中内容清除格式

除了图片和换行符合其他都需要清除

找了很久都没有找到合适的，最后研究了一下文档，结合GitHub上面贴了很多复制粘贴清除自定义格式进行改编

直接附上代码

这是注意代码块

首先自定义一个方法

数据引入

点击触发事件，进行格式自定义清除

在此模块中有几种形式是需要特殊处理的

原因：

1、图片模式是自定义对象

2、链接模式也是自由定义对象

3、分割线也比较特殊

数据格式

下面为主要代码模块

解析：

1、delta2为当前选中区域内容

let range = quill.getSelection(true);

let delta2 = quill.getContents(range.index, range.length);

3、在选取区域的最尾部range.index+range.length位置插入new Delta().retain(range.index+range.length)

let delta = new Delta().retain(range.index+range.length);

4、处理选中区域内容，只保留图片、文字、换行

 delta2.ops = delta2.ops.map(op => {
        if(typeof op.insert ==  'object'){
            if(Object.keys(op.insert) == 'LinkBlot'){
              return {
                insert: op.insert.LinkBlot.text
              }
            }else if(Object.keys(op.insert) == 'image'){
              op.insert.image.alt ='';
              return {
                insert: op.insert
              }
            }else if(Object.keys(op.insert) =='divider'){
              op.insert=''
              return {
                insert: op.insert
              }
            }
          }else{
            return {
              insert: op.insert
            }
          }
         })

 

5、新数据拼接处理完的数据

delta = delta.concat(delta2);

6、更新数据updateContents

quill.updateContents(delta, Quill.sources.USER);

7、删除选中区域的旧数据quill.deleteText

quill.deleteText(range.index, range.length);

//主要代码
 let range = quill.getSelection(true);
      let delta2 = quill.getContents(range.index, range.length);
      console.log(delta2)
      let delta = new Delta().retain(range.index+range.length);
      delta2.ops = delta2.ops.map(op => {
        if(typeof op.insert ==  'object'){
            if(Object.keys(op.insert) == 'LinkBlot'){
              return {
                insert: op.insert.LinkBlot.text
              }
            }else if(Object.keys(op.insert) == 'image'){
              op.insert.image.alt ='';
              return {
                insert: op.insert
              }
            }else if(Object.keys(op.insert) =='divider'){
              op.insert=''
              return {
                insert: op.insert
              }
            }
          }else{
            return {
              insert: op.insert
            }
          }
         })
     delta = delta.concat(delta2);
     quill.updateContents(delta, Quill.sources.USER);
     quill.deleteText(range.index, range.length);

注意：主要使用到的方法

getSelection

getContents

retain

updateContents

deleteText