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

2024-10-18 13:46:39

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

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

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

　　编辑器支持截屏的黏贴；

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

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

<html>
 <head></head>
 <body>
 <script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.js"></script>

  <div id="edit" contenteditable="true" style="width:400px;height:400px;border:1px solid #f00">

  </div>

 <script>
  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( "<img src="+result+" />" );
    });
    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);
   };
  };
 </script>

 <script>
  new Edit("#edit");
 </script>
 </body>
</html>

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

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

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

javascript 在线文本编辑器实现代码

Editor body{ font-size:12px;} #ed{ height:300px; width:800px; background-color: } .sssss{ background-image:url(http://www.zzsky.cn/build/images/20099493121.gif)} .tag{ background-image:url(http://www.zzsky.cn/build/images/20099493121.gif);height:22px
JavaScript简单实现弹出拖拽窗口（一）

本文实例为大家分享JavaScript弹出拖拽窗口的具体实现代码,供大家参考,具体内容如下需求说明: 1.点击页面按钮,弹出窗口: 2.要有半透明背景遮罩: 3.弹出窗口圆角,窗口半透明,但内容不透明:带阴影: 4.窗口可拖动: 5.拖动停止之后,滚动页面时窗口位置不动: 6.可以使用jQuery: 7.有关闭按钮: 进一步功能具体描述: 点按钮,会有一个可以拖拽的浮层出来. 有一个背景遮罩,支持标题栏的拖拽,在标题栏以外,在标题栏区域之外的区域拖拽是没有效果的,拖拽功能限
学习js在线html(富文本,所见即所得)编辑器

你要的是所见即所得HTML编辑器,简单来说需要几个基本步骤: 1,需要一个可以编辑同时又可显效果的编辑框.textarea不行,它只能用来输入纯文本,不能显示颜色.斜体之类的文字样式,就像记事本.你可以使用iframe来实现,修改iframe的designMode属性使其可以被编辑. 复制代码代码如下: <iframe id="myEditer" width="100%" height="150px"></iframe>
JS HTML5拖拽上传图片预览

1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取
19款Javascript富文本网页编辑器

1. AIE (演示地址) AIE是一个开源的ajax图片编辑器,基于ExtJS与PHP ImageMagick开发,易于与博客/相册等其它应用相集成.提供调整图片大小,裁剪图片,旋转/翻转图片,应用滤镜,添加文本,添加水印等功能. 2. MarkitUp (演示地址) MarkitUp是一个轻量级,可定制,灵活的WYSIWYG Editor. 3. SmartMarkUP SmartMarkUP是一个轻量级,强大的JavaScript library,它能够将Textarea控件转换成富文本编
原生js实现自由拖拽弹窗代码demo

本文为大家分享了原生弹窗拖拽代码demo,供大家参考,具体内容如下效果图: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹窗拖拽</title> <style> *{margin:0;padding:0;} .box{position: absolute;width: 400
JS HTML5实现拖拽移动列表效果

练习HTML5中的拖放API,实现列表拖拽移动!参考文章:JS HTML5拖拽上传图片预览 HTML5拖拽移动列表实现思路: 1.循环设置每个子项的draggable属性,以及设置拖动标记(不会多个或全部子项都移动) 2.每次进入投放区,则检测时候有拖放标记,有则添加dom元素,以此类推另一种实现思路是:可以利用拖放中DataTransfer对象作为属性,用setData()和getData()方法传递每个拖动的子项的id等数据,找到指定的子项进行移动-.待实验... HTML: //空列
JSON 编辑器实现代码

大家可以输入或者粘贴一些JSON数据来校验是否正确. 按Tab键自动全文缩进格式化. JSON 编辑器核心代码复制代码代码如下: <script type="text/javascript"><!-- /* main Object */ JE={ data:{},/* 关联数据 */ code:false,/* 格式化后的代码 */ oldCode:[],/* 历史代码 */ editUI:null,/* 关联编辑框 */ msgUI:null,/* 信息显示窗
js拖拽的原型声明和用法总结

下面是自己写的一个关于js的拖拽的原型声明:代码如下需要注意的问题包括: 1.this的指向到底是指向谁--弄清楚所指的对象 2.call()方法的使用 3.直接将父级原型赋给子级与使用for将其赋给子级有什么区别? 比如: for(var i in Drag.prototype) { LimitDrag.prototype[i]=Drag.prototype[i];----------子级发生改变,其父级并不会受到影响 } LimitDrag.prototype=Drag.prototype
js利用clipboardData实现截屏粘贴功能

本文实例为大家分享了clipboardData截屏粘贴实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>copyimg</title> <style type="text/css"> #box{ width:200px; height:20

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

相关推荐

随机推荐