html编辑器word粘贴,让编辑器支持word复制黏贴、截屏的js代码

chrome有很多人性化的API，比如拖拽， 比如图片可以转化为base64等；

比如知乎上面的回复中可以直接黏贴图片，  就不需要手动点击图片上传按钮， 选择图片， 确认上传等等； 知乎参考地址：打开

让编辑器支持word的复制黏贴， 其中图片会转化为base64编码， 如果是通过远程打开这个静态页， 黏贴word文档的时候， 图片不会黏贴进来， 因为远程地址无法访问本地磁盘的绝对路径， 如果把下面代码保存成静态界面打开， 那么word中的图片都可以看见， 而且都会被转化为base64编码；

编辑器支持截屏的黏贴；

让编辑器支持图片直接拖拽， 直接拖拽即可添加图片， 功能更加强大， 而且图片也是base64编码；

使用的话这new Edit()， 参数为一个可编辑的元素， 比如有contenteditable属性的div或者iframe元素等:

function Edit( editEl ) {

editEl = $(editEl);

$(editEl).bind("paste", clipFn);

function clipFn(ev) {

//把剪贴板中的img通过canvas中专为base64字符串;

var canvas = document.createElement("canvas");

var context = canvas.getContext("2d");

//从word拷贝时候会得到text/html数据;

var html = $(ev.originalEvent.clipboardData.getData("text/html"));

html.find("img").each(function () {

var img = document.createElement("img");

var src = $(this).attr("src"); //.replace(/\\/gi,"\/");

var _this = this;

img.src = src;

img.onload = function () {

canvas.width = img.width;

canvas.height = img.height;

context.drawImage(img, 0, 0, img.width, img.height);

var dataBase64 = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

$("img").each(function (index, el) {

//匹配图片;

if ($(this).attr("src").replace(/[\/\\]/g,"") === src.replace(/[\/\\]/g,"")) {

el.src = dataBase64;

};

});

img.onerror = function() {

console.log("图片加载失败");

};

img.onload = null;

};

});

//如果通过截图或者复制图片的方式会得到 type为"imgage"的图片;

var ele = ev.originalEvent.clipboardData.items;

for (var i = 0; i < ele.length; ++i) {

if ( ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1 ) {

var blob = ele[i].getAsFile();

readBlobAsDataURL(blob, function( base64 ) {

var img= document.createElement('img');

img.setAttribute('src', base64);

editEl.append(img);;

});

//阻止默认事件, 避免重复添加;

ev.originalEvent.preventDefault();

};

};

};

//绑定拖拽事件

//要给个响应

editEl.bind("dragover", function() {

return false;

});

//触发事件的响应

editEl.bind("drop", function(ev) {

loadImage( ev.originalEvent.dataTransfer.files[0] , function( result ) {

editEl.append( "" );

});

return false;

});

// 加载 图像文件(url路径)

function loadImage(src, callback){

// 过滤掉 非 image 类型的文件

if(!src.type.match(/image.*/)){

if(window.console){

console.log("选择的文件类型不是图片: ", src.type);

} else {

window.confirm("只能选择图片文件");

}

return;

}

// 创建 FileReader 对象 并调用 render 函数来完成渲染.

var reader = new FileReader();

// 绑定load事件自动回调函数

reader.onload = function(e){

// 调用前面的 render 函数

callback(e.target.result);

};

// 读取文件内容

reader.readAsDataURL(src);

};

function readBlobAsDataURL(blob, callback) {

var a = new FileReader();

a.onload = function(e) {callback(e.target.result);};

a.readAsDataURL(blob);

};

};

new Edit("#edit");

很多网上的编辑器里 对图片的支持单一， 都会考虑IE6， IE7，  ff， chrome， 各种兼容问题；

这个解决方案适合基于chrome内核的浏览器, FF的兼容没有处理， 因为所有的图片数据都是基于base64， 图片就没有上传这一说法了，图片都变成了字符串， 不过这个有个劣势就是每一次提交的数据都会比较大；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。