百度360必应搜狗淘宝本站头条
materialthememybatisselectonesystempropertieseasyexcel导出图片css圆形进度条
当前位置：网站首页 > 技术教程 > 正文

让编辑器支持word的复制黏贴,支持截屏的黏贴

toqiye 2024-11-27 21:09 20 浏览 0 评论

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， 图片就没有上传这一说法了，图片都变成了字符串， 不过这个有个劣势就是每一次提交的数据都会比较大；

相关推荐

Star 17.3k!给它一张屏幕截图，即可一键克隆网页!

本文为大家分享一款本周爆火的GPT开源项目。前言你敢信，只凭借着一张屏幕截图即可转换生成HTML/TailwindCSS代码。可以算得上是前端工程师的福音。它就是screenshot-to-...

AI从截图直接生成代码、前端程序员的福利!

简介项目可以将任何屏幕截图或设计转换为干净的代码（支持大多数框架）。来自领先公司的开发人员和设计师使用的排名第一的工具。完全开源，在GitHub上拥有超过35,000颗星。非常受欢迎。各位小伙...

一款高颜值、跨平台、自托管的免费开源CRM项目——Twenty

前言大家好，这里是可爱的Cherry。作为一个“甲方”，Cherry其实挺知道客户管理的重要的。但是对于客户管理怎么做，以及CRM的作用，我却是一无所知。之前有朋友在评论区留言，说有没有开源的CRM系...

解放双手，前端界面再也不用自己写了?

随着AI技术的发展，现在有越来越多的尝试将AI应用于UI设计和开发中，以期提高效率和降低成本。今天就给大家介绍一个开源的AI网页生成工具：OpenUIOpenUIOpenUI是一个创...

代码调试，教给你（代码调试是什么意思）

昨天我和一些朋友一起调试代码，他们做程序员这一行都不太久，我向他们展示了一些代码调试技巧。今天早上我在想，我应该如何教授他们学习代码调试？我在Twitter上发了一条推文说，我从来没有见过任何好的调试...

Screenshot-to-code:用屏幕截图生成代码

Screenshot-to-code是一个简单的工具，可使用AI将屏幕截图、模型和Figma设计转换为干净、实用的代码。现在支持ClaudeSonnet3.5和GPT-4o！Scre...

next实现原理（next method）

Next.js是一个基于React的服务器端渲染（SSR）和静态生成（SSG）框架，它的实现原理涉及多个关键技术点，包括服务端渲染（SSR）、静态生成（SSG）、客户端渲染（CSR）、...

可逐步操作的具体流程（可逐步操作的具体流程包括）

假设你是一个单人开发者，使用主流技术栈（React+Node.js+MySQL），以下是详细步骤：---###**一、需求分析与原型设计**1.**核心功能清单**-用户能添加、删除、...

截图转代码只需1步!你离高效开发只差这款神器

引言在现代前端开发中，将设计稿转换为代码是一个既重要又耗时的环节。手动编写HTML结构、调试CSS样式、调整布局对齐，不仅耗费时间，还容易出错。而Screenshot-to-Code这款革...

web开发 前端 后端（web开发前端后端）

区别：1、前端是指用户可见的界面，而后端是指用户看不到的东西，考虑底层业务逻辑的实现，平台的稳定性、性能等。2、前端开发用到的技术有HTML5、CSS3、JS、jQuery、Bootstrap、Nod...

手把手教你Dify私有化部署，打造专属AI平台

一、Dify是什么？Dify是一款极具创新性的开源LLM应用开发平台，它就像是一把万能钥匙，为开发者们打开了通往生成式AI应用开发新世界的大门。其融合了后端即服务（BackendasS...

前后端分离架构设计:提升开发效率与业务支撑力的密钥

前后端分离架构设计解析一、定义与核心思想前后端分离是一种将用户界面（前端）与业务逻辑（后端）解耦的架构模式，通过RESTfulAPI或GraphQL实现数据交互。前端专注于视图渲染与交互逻辑...

Kubernetes最小部署单元Pod（kubernetes最小部署单元）

一、Kubernetes与Pod简介在当今云计算和容器化技术盛行的时代，Kubernetes已然成为容器编排领域的中流砥柱。它是一个开源的容器编排平台，由Google基于其内部使用的Bo...

【程序员必藏!零基础本地部署DeepSeek大模型保姆级教程】

为什么选择本地部署？数据安全：敏感代码/业务数据永不外传闪电响应：局域网推理延迟<100ms，告别云端排队深度定制：自由修改模型代码，打造专属AI助手准备工具（5分钟搞定）1核心工具下载...

【Python程序开发系列】使用Flask实现前后端分离(案例)

这是我的第398篇原创文章。一、引言随着web开发的不断发展，前后端分离已成为越来越流行的架构设计。Flask是一个轻量级的Pythonweb框架，非常适合用于构建API，然后配合前端框...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表