@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.
131 lines (130 loc) • 5.04 kB
JavaScript
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
import { isInside } from "../../../config/editor.utils.es.js";
import "../preview/index.es.js";
import { ImageSpec } from "./image-spec.es.js";
import { getImagePreviewModal } from "../preview/preview-modal.es.js";
class CustomImageSpec extends ImageSpec {
constructor(formatter) {
super(formatter);
__publicField(this, "editorElem");
__publicField(this, "observer");
__publicField(this, "oldRootScrollTop");
__publicField(this, "imageMouseout", (event) => {
if (event.target.nodeName === "IMG" || event.target.classList.contains("blot-formatter__overlay")) {
const imgDom = event.target;
if (!isInside(event, imgDom)) {
this.removeImagePreviewOverlay();
}
}
});
__publicField(this, "onClick", (event) => {
var _a;
const el = event.target;
const isReadonly = this.formatter.quill.options.readOnly;
if (!(el instanceof HTMLElement) || el.tagName !== "IMG" || isReadonly) {
return;
}
this.img = el;
this.oldRootScrollTop = this.formatter.quill.root.scrollTop;
this.resetOverlayMarginTop();
this.formatter.show(this);
const imageDom = (_a = this.formatter.currentSpec) == null ? void 0 : _a.getTargetElement();
if (imageDom) {
imageDom.classList.add("current-select-img");
const quill = this.formatter.quill;
const imgBlot = quill.scroll.find(this.img);
const index = quill.getIndex(imgBlot);
const len = imgBlot.length();
quill.setSelection(index, len);
}
});
/**
* 处理图片双击事件 - 显示预览
*/
__publicField(this, "onImageDoubleClick", (event) => {
const target = event.target;
const imageSrc = target.getAttribute("src") || target.getAttribute("data-image");
if (imageSrc) {
const modal = getImagePreviewModal();
modal.show(imageSrc);
}
});
this.formatter = formatter;
this.oldRootScrollTop = this.formatter.quill.root.scrollTop;
this.editorElem = this.formatter.quill.container;
this.formatter.quill.root.addEventListener("scroll", this.handleQuillRootScroll.bind(this));
}
handleQuillRootScroll() {
if (this.formatter.overlay) {
this.formatter.overlay.style.marginTop = `${this.oldRootScrollTop - this.formatter.quill.root.scrollTop}px`;
}
}
init() {
this.editorElem.addEventListener("mouseover", this.imageMouseOver.bind(this));
this.editorElem.addEventListener("mouseout", this.imageMouseout);
this.editorElem.addEventListener("dblclick", this.onImageDoubleClick.bind(this));
super.init();
}
imageMouseOver(event) {
var _a;
const target = event.target;
const isBlotFormatter = (_a = target == null ? void 0 : target.classList) == null ? void 0 : _a.contains("blot-formatter__overlay");
if (target.nodeName === "IMG" || isBlotFormatter) {
}
}
addImagePreviewOverlay(event) {
const target = event.target;
const {
left: imgLeft,
width: imgWidth
} = target.getBoundingClientRect();
const imgTop = target.getBoundingClientRect().top + this.formatter.quill.container.scrollTop;
const {
left: editorLeft,
top: editorTop
} = event.currentTarget.getBoundingClientRect();
const imgRelativeLeft = imgLeft - editorLeft;
const imgRelativeTop = imgTop - editorTop;
const maxmizeWidth = 24;
const maxmizePadding = 15;
const previewLeft = imgRelativeLeft + imgWidth - maxmizeWidth - maxmizePadding;
const previewTop = imgRelativeTop + maxmizePadding;
const previewStyle = `
left: ${previewLeft}px;
top: ${previewTop}px;
width: ${maxmizeWidth}px;
`;
const imageSrc = target.src || target.getAttribute("data-image");
const imageId = target.getAttribute("data-image-id");
const previewDom = event.currentTarget.querySelector(".image-preview__overlay");
if (!previewDom) {
event.currentTarget.insertAdjacentHTML("beforeend", `
<div class="image-preview__overlay" style="${previewStyle}">
<i class="icon-maxmize" id="btn-image-preview" data-image-id="${imageId}"
data-image="${imageSrc}"></i>
</div>
`);
}
}
removeImagePreviewOverlay() {
const previewDom = this.editorElem.querySelector(".image-preview__overlay");
if (previewDom) {
previewDom.parentNode.removeChild(previewDom);
}
}
onHide() {
this.removeImagePreviewOverlay();
super.onHide();
}
resetOverlayMarginTop() {
if (this.formatter.overlay) {
this.formatter.overlay.style.marginTop = "0px";
}
}
}
export {
CustomImageSpec
};
//# sourceMappingURL=custom-image-spec.es.js.map