文章参考:
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('');