资源管理模块设计

对于文件上传类的组件和功能, 我们统一采用资源管理器(来源于 entry 工程)来实现. 也就是在编辑器中涉及到上传文件时, 会统一打开资源管理器弹窗, 来进行资源上传以及与编辑器通信.

编辑器中我们设计了一套通信机制, 可以和 entry 的 资源管理页面 进行通信, 代码如下:

const prefixKey = "dooring-msg:" //消息前缀
const eventBus:IEventBus = {
	data: {},
	watch(key: string) {
		let _this = this;
		targetWindow.onmessage = function (e) {
			const data = e.data || {}
			//非此次监听的事件, 直接返回
			if (prefixKey + key !== data.key) {
				return
			}
			_this.data[key] = data.value;
		}
	},
	get(key: string) {
		return this.data[key]
	}
}

export {
	eventBus
}

资源管理器在编辑器中以 iframe 的形式存在, 内部会通过 postmessage 的方式和父页面通信.

资源管理模块设计 ​

资源管理模块设计