Bootstrap

vue2、vue3之富文本编辑器quillEditor的一些问题(使用、字体字号不生效、内容保留样式和去掉样式)

文章参考:

https://blog.csdn.net/benlalagang/article/details/127783044

按照教程使用

1、字体字号等自定义的样式不生效,一直是同样的

可以试一下写在scoped外或者加上v-deep使用
我用了后者,使用这个注意看一下类名是否匹配,我写的时候要减少一层外侧类名才生效:
即比如原来是:
.父级 .子级 .再子级 {
}
可能要写成
.子级 .再子级 {
}

2、页面如果要根据编辑器生成的返回值渲染格式的话

如果用vue的话可以使用v-html
编辑器生成值:content = ‘

编辑器生成的html格式的字符串

就可以按照html标签渲染到页面上了

**

3、如果只想保留换行格式的编辑器返回值

编辑器提供的change事件的回调函数的第三个参数是只保留了换行格式的文本,返回格式是:“内容\n”,我在页面使用的时候就直接把\n替换成<br>

**4 如果想去掉全部格式,只保留文本内容的话

可以使用正则表达式直接将返回值里面的标签删除
正则表达式:
content.replace(/<[^>]*>/g, “”).trim().replace(‘">’, “”)
文章参考:https://blog.csdn.net/qq_47888106/article/details/133771594
**
缺点:对于一些特殊符号,在获取内容的时候会变成html的编码格式,所以统计字数会比看到的多
更好的推荐:vue-quill本身有提供一个getText方法用于统计内容字数,可以直接用这个
例如:编辑器实例.getText.(0, 10)
文章参考:

https://quilljs.com/docs/api#gettext
**注意:**为空时默认保留一个空行,每一行都会算作一个字符,所以默认空的时候长度计算为1,可以通过trim()方法得到正确的长度,此时空格也会算一个字,如果想去掉空格,可以使用.replace(/\s/g, ‘’)正则替换掉,再计算长度即可

5、对图片的处理(这里是vue3的写法),base64传到后端服务器得到新地址再使用

function convertBase64UrlToFile(base64: string, fileName = '图片'): File {
   
  // 将base64按照 , 进行分割 将前缀  与后续内容分隔开
  let data = base64.split(',');
  // 利用正则表达式 从前缀中获取图片的类型信息(image/png、image/jpeg、image/webp等)
  let type = data[0].match(/:(.*?);/)?.[1];
  // 从图片的类型信息中 获取具体的文件格式后缀(png、jpeg、webp)
  let suffix = type?.split('/')[1];
  // 使用atob()对base64数据进行解码  结果是一个文件数据流 以字符串的格式输出
  const bstr = window.atob(data[1]);
  // 获取解码结果字符串的长度
  let n = bstr.length;
  // 根据解码结果字符串的长度创建一个等长的整形数字数组
  // 但在创建时 所有元素初始值都为 0
  const u8arr = new Uint8Array(n);
  // 将整形数组的每个元素填充为解码结果字符串对应位置字符的UTF-16 编码单元
  while (n--) {
   
    // charCodeAt():获取给定索引处字符对应的 UTF-16 代码单元
    u8arr[n] = bstr.charCodeAt(n);
  }
  const file = new File([u8arr], `${
     fileName}.${
     suffix}`, {
   
    type: type,
  });
  // 将File文件对象返回给方法的调用者
  return file;
}

// 有图片的时候要上传图片 content:富文本编辑器的内容

const handleImgFormat = () => {
   
  // 拿出所有的img
  const imgTags = content.value.match(/<img[^>]*>/g) || [];
  // 匹配base64的图片,上下两个其实也可以用一个通用正则匹配就好
  let imgReg = RegExp(/data:image\/.*;base64,/);
  // 拿到图片里还是base64格式的图片
  const base64Imgs = imgTags.filter((i) => imgReg.test(i));
  if (base64Imgs.length) {
   
    const promises = imgTags.map((item) => {
   
      return new Promise((resolve, reject) => {
   
        const base64Data = item.match(/src="([^"]+)"/)?.[1];
        if (base64Data) {
   
        // base64格式转File(这里是我需要用File格式转到后端接口)
          const fileData = convertBase64UrlToFile(base64Data);
          //
          const data =把图片传到后端接口得到新地址的接口调用.then((url) => {
   
          // 替换原来的地址为拿到的新地址
            content.value = content.value.replace(base64Data, url || '');
            return url;
          });
          resolve(data);
        }
      });
    });
    return Promise.all(promises);
  } else {
   
    return new Promise((resolve, reject) => {
   
      resolve('');
;