forked from Gitlink/forgeplus-react
55 lines
1.2 KiB
JavaScript
55 lines
1.2 KiB
JavaScript
/*
|
||
* @Description: 重写图片
|
||
* @Author: tangjiang
|
||
* @Github:
|
||
* @Date: 2019-12-16 15:50:45
|
||
* @LastEditors : tangjiang
|
||
* @LastEditTime : 2019-12-31 13:59:02
|
||
*/
|
||
import Quill from "quill";
|
||
import mediator from "../mediator";
|
||
|
||
const BlockEmbed = Quill.import('blots/block/embed');
|
||
//stringify 序列化，其中的onclick函数会丢失。
|
||
export default class ImageBlot extends BlockEmbed {
|
||
|
||
static create(value) {
|
||
|
||
const node = super.create()
|
||
const { alt, url, width, height, id } = value
|
||
|
||
node.setAttribute('alt', alt)
|
||
node.setAttribute('src', url)
|
||
|
||
if (value.id) {
|
||
node.setAttribute('id', value.id);
|
||
}
|
||
|
||
node.setAttribute('style', 'max-width: 100%, cursor:pointer');
|
||
node.onload = function () {
|
||
node.setAttribute('width', width ? width : this.width)
|
||
node.setAttribute('height', height ? height : this.height)
|
||
}
|
||
|
||
node.addEventListener('click', () => {
|
||
mediator.publish('on-preview-image', value.url)
|
||
})
|
||
return node;
|
||
}
|
||
|
||
// 获取节点值
|
||
static value(node) {
|
||
|
||
return {
|
||
alt: node.getAttribute('alt'),
|
||
url: node.getAttribute('src'),
|
||
width: node.width,
|
||
height: node.height,
|
||
id: node.id,
|
||
};
|
||
}
|
||
}
|
||
|
||
ImageBlot.blotName = 'image';
|
||
ImageBlot.tagName = 'img';
|