从剪贴板粘贴图片2

最新推荐文章于 2024-11-07 12:01:14 发布

原创最新推荐文章于 2024-11-07 12:01:14 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

私人笔记专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一个针对HTML编辑器的功能扩展，该功能允许用户直接将PNG格式的图像从剪贴板粘贴到编辑器中，并自动转换为内联图片标签。此特性通过监听编辑器的粘贴事件并解析剪贴板数据来实现。

function doPaste(tar, event, win) {
	if (event) {
		var theClipboardData = event.clipboardData || win.clipboardData;
		if (theClipboardData) {
			var items = theClipboardData.items;
			for (var i = 0; i < items.length; ++i) {
				var item = theClipboardData.items[i];
				if (items[i].kind == 'file' && items[i].type == 'image/png') {
					var fileReader = new FileReader();
					fileReader.onloadend = function () {
						var d = this.result.substr( this.result.indexOf(',')+1);
						tar.innerHTML += ("<img src='data:image/png;base64," + d + "' />");
					};
					fileReader.readAsDataURL(item.getAsFile());
					break;
				}
			}
		}
	}
}

Ext.define('PasteAble.HtmlEditor', { 
	extend: 'Ext.form.field.HtmlEditor', 
	alias: ['widget.pahtmleditor'], 
	getDocMarkup: function() {
	    var me = this,
	        h = me.iframeEl.getHeight() - me.iframePad * 2;
	    return Ext.String.format('<html><head><style type="text/css">body{border:0;margin:0;padding:{0}px;height:{1}px;box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;cursor:text}</style><script type="text/javascript">function iframePaste(tar, e) {e = e || window.event; window.parent.doPaste(tar, e, window);}</script></head><body onpaste="iframePaste(this);"></body></html>', me.iframePad, h);
	}
});