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


Posted in Javascript onOctober 17, 2016

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 相关文章推荐
Grid得到选择行数据的方法总结
Jan 17 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
layer更改皮肤的实现方法
Sep 11 Javascript
Node.js下自定义错误类型详解
Oct 17 #Javascript
js HTML5多媒体影音播放
Oct 17 #Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 #Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 #Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 #Javascript
深入理解JS实现快速排序和去重
Oct 17 #Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 #Javascript
You might like
隐性调用php程序的方法
2009/03/09 PHP
深入php self与$this的详解
2013/06/08 PHP
PHP使用GD库制作验证码的方法(点击验证码或看不清会刷新验证码)
2017/08/15 PHP
关于query Javascript CSS Selector engine
2013/04/12 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
H5+C3+JS实现五子棋游戏(AI篇)
2020/05/28 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
在Python中处理XML的教程
2015/04/29 Python
Python字符串详细介绍
2015/05/09 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
即将毕业大学生自荐信
2014/01/24 职场文书
遥感技术与仪器求职信
2014/02/22 职场文书
尊师重教演讲稿
2014/09/04 职场文书
师德师风自查总结
2014/10/14 职场文书
英语专业毕业论文答辩开场白
2015/05/27 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
Python经常使用的一些内置函数
2022/04/11 Python