@opentiny/fluent-editor
Version:
A rich text editor based on Quill 2.0, which extends rich modules and formats on the basis of Quill. It's powerful and out-of-the-box.
210 lines (209 loc) • 7.76 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Quill = require("quill");
const editor_config = require("../config/editor.config.cjs.js");
const editor_utils = require("../config/editor.utils.cjs.js");
const Uploader = Quill.imports["modules/uploader"];
const Delta = Quill.import("delta");
class CustomUploader extends Uploader {
constructor() {
super(...arguments);
this.isAllowedFileSize = (maxSize, file) => {
if (editor_utils.isNullOrUndefined(maxSize)) {
return true;
}
return file.size <= maxSize;
};
this.isAllowedFileType = (accept, file) => {
if (accept) {
const baseMimeType = file.type.replace(/\/.*$/, "");
const acceptArr = typeof accept === "string" ? accept.split(",") : accept;
return acceptArr.some((type) => {
const validType = type.trim();
if (validType.startsWith(".")) {
return file.name.toLowerCase().includes(validType.toLowerCase(), file.name.toLowerCase().length - validType.toLowerCase().length);
} else if (/\/\*$/.test(validType)) {
return baseMimeType === validType.replace(/\/.*$/, "");
}
return file.type === validType;
});
}
return true;
};
}
upload(range, files, isFile) {
const uploads = [];
const fileFlags = [];
const rejectFlags = {
file: false,
image: false
};
const uploadOption = this.quill.options.uploadOption;
const acceptObj = uploadOption && {
image: uploadOption.imageAccept,
file: uploadOption.fileAccept
} || {};
Array.from(files).forEach((file) => {
var _a, _b;
if (file) {
const fileFlag = typeof isFile === "boolean" ? isFile : !/^image\/[-\w.]+$/.test(file.type);
const fileType = fileFlag ? "file" : "image";
const accept = acceptObj[fileType] || this.options[fileType];
if (this.isAllowedFileType(accept, file) && this.isAllowedFileSize(uploadOption == null ? void 0 : uploadOption.maxSize, file)) {
uploads.push(file);
fileFlags.push(fileFlag);
(_a = uploadOption == null ? void 0 : uploadOption.success) == null ? void 0 : _a.call(uploadOption, file);
} else {
rejectFlags[fileType] = true;
(_b = uploadOption == null ? void 0 : uploadOption.fail) == null ? void 0 : _b.call(uploadOption, file);
}
}
});
this.options.handler.call(this, range, uploads, fileFlags, rejectFlags);
}
// 处理上传文件
handleUploadFile(range, files, _hasRejectedFile) {
var _a;
if ((_a = this.quill.options.uploadOption) == null ? void 0 : _a.fileUpload) {
const initialRange = range;
files.forEach((file) => {
var _a2;
const result = {
file,
callback: (res) => {
if (!res) {
return;
}
this.insertFileToEditor(initialRange, file, {
code: 0,
data: {
title: file.name,
size: file.size,
src: res.fileUrl
}
});
initialRange.index += 1;
},
editor: this.quill
};
(_a2 = this.quill.options.uploadOption) == null ? void 0 : _a2.fileUpload(result);
});
} else {
files.forEach((file) => {
const fileUrl = URL.createObjectURL(file);
const initialRange = range;
this.insertFileToEditor(initialRange, file, {
code: 0,
data: {
title: file.name,
size: file.size,
src: file.src ?? fileUrl
}
});
initialRange.index += 1;
});
}
}
// 将文件插入编辑器
insertFileToEditor(range, file, { code, message, data }) {
if (code === 0) {
const oldContent = new Delta().retain(range.index).delete(range.length);
const videoFlag = this.uploadOption && this.uploadOption.isVideoPlay && /^video\/[-\w.]+$/.test(file.type);
const insertObj = videoFlag ? { video: data } : { file: data };
const currentContent = new Delta([{ insert: insertObj }]);
const newContent = oldContent.concat(currentContent);
this.quill.updateContents(newContent, Quill.sources.USER);
this.quill.setSelection(range.index + 1);
} else {
console.error("error message:", message);
}
}
// 将图片插入编辑器
insertImageToEditor(range, { code, message, data }) {
if (code === 0) {
const { imageId, imageUrl } = data;
const oldContent = new Delta().retain(range.index).delete(range.length);
const currentContent = new Delta([
{
insert: { image: imageUrl },
attributes: { "image-id": imageId }
}
]);
const newContent = oldContent.concat(currentContent);
this.quill.updateContents(newContent, Quill.sources.USER);
this.quill.setSelection(range.index + 1);
} else {
console.error("error message:", message);
}
}
// 处理上传图片
handleUploadImage(range, { file, files }, hasRejectedImage) {
var _a, _b;
if ((_a = this.quill.options.uploadOption) == null ? void 0 : _a.imageUpload) {
const imageEnableMultiUpload = this.quill.uploader.options.enableMultiUpload === true || ((_b = this.quill.uploader.options.enableMultiUpload) == null ? void 0 : _b.image);
files.forEach((file2) => {
var _a2;
const initialRange = range;
const result = {
file: file2,
data: { files: [file2] },
hasRejectedImage,
callback: (res) => {
if (!res) {
return;
}
if (imageEnableMultiUpload && Array.isArray(res)) {
res.forEach((value) => {
this.insertImageToEditor(initialRange, value);
initialRange.index += 1;
});
} else {
this.insertImageToEditor(initialRange, res);
initialRange.index += 1;
}
},
editor: this.quill
};
if (imageEnableMultiUpload) {
result.data = { files };
}
(_a2 = this.quill.options.uploadOption) == null ? void 0 : _a2.imageUpload(result);
});
} else {
const promises = files.map((fileItem) => {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = (e) => {
resolve(e.target.result);
};
reader.readAsDataURL(fileItem);
});
});
Promise.all(promises).then((images) => {
const update = images.reduce((delta, image) => {
return delta.insert({ image });
}, new Delta().retain(range.index).delete(range.length));
this.quill.updateContents(update, Quill.sources.USER);
this.quill.setSelection(range.index + images.length, Quill.sources.SILENT);
});
}
}
}
CustomUploader.DEFAULTS = {
file: editor_config.FILE_UPLOADER_MIME_TYPES,
image: editor_config.IMAGE_UPLOADER_MIME_TYPES,
enableMultiUpload: false,
handler(range, files, fileFlags, rejectFlags) {
const fileArr = [];
const imgArr = [];
files.forEach((file, index) => fileFlags[index] ? fileArr.push(file) : imgArr.push(file));
if (this.quill.options.modules.file && (fileArr.length || rejectFlags.file)) {
this.handleUploadFile(range, fileArr, rejectFlags.file);
}
if (imgArr.length || rejectFlags.image) {
this.handleUploadImage(range, { file: imgArr[0], files: imgArr }, rejectFlags.image);
}
}
};
exports.default = CustomUploader;
//# sourceMappingURL=custom-uploader.cjs.js.map