首页 > 其他分享 >支持复制粘贴word图片的百度HTML编辑器

支持复制粘贴word图片的百度HTML编辑器

时间:2023-05-17 17:14:15浏览次数:58  
标签:控件 word text base64 复制粘贴 HTML 整合 items var

图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码
目前限chrome浏览器使用
首先以um-editor的二进制流保存为例:
打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。
加入下面的代码:

//判断剪贴板的内容是否包含文本

//首先解释一下为什么要判断文本是不是为空

//在ctrl+c word中的文字或者图片之后会返回1种(image/png)或者4种type(text/plain,text/html,text/rtf,image/png)类型的对象

//为了兼容4种格式的情况,做了如下的判断

//如下代码:e.originalEvent.clipboardData.items获得剪贴板的内容

//当粘贴了文本之后text是不为空的,同时也会返回当前文本的图片类型

//如果有文字的话不做任何的处理,如果只粘贴图片的话文本一定是空的,包括复制的桌面图片或者截图的图片

var text = e.originalEvent.clipboardData.getData("text");

if(text == ""){

    var items=e.originalEvent.clipboardData.items;

     for (var i = 0, len = items.length; i < len; i++) {

        var item = items[i];

       if ( item.kind == 'file' && item.type.indexOf('image/') !== -1 ) {

         

              var blob = item.getAsFile();

              getBase64(blob, function( base64 ) {

              //sendAndInsertImage(base64,me); 上传到服务器

               setBase64Image(base64,me);

              });

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

              e.originalEvent.preventDefault();

             };

        }

}

两个方法:

//执行插入图片的操作

function setBase64Image(base64,editor){

    editor.execCommand('insertimage', {src: base64,_src: base64});

}

//获得base64

function  getBase64(blob, callback) {

    var a = new FileReader();

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

    a.readAsDataURL(blob);

};

效果展示:

 

视频教程:

动易SiteFactory 4.7整合,动易SiteFactory 5.6整合,动易SiteFactory 6.2整合,PbootCMS整合,PHPCMS v9整合,dedecms 5.7-ueditor整合,dedecms 5.7-ckeditor3x整合,帝国CMS-ueditor整合,帝国CMS-ckeditor4x整合,dokuwiki整合,Windows控件安装,macOS控件安装,linux-deb控件安装,linux-rpm控件安装,uos控件安装,linux-银河麒麟控件安装,

 

更多详细资料可以参考这篇文章:

详细思路及源码

示例下载:

wordpaster-vue3-cli-ueditor1.5wordpaster-vue-ueditor1.5wordpaster-asp.net-ueditor1.5xwordpaster-php-ueditor1xwordpaster-jsp-ueditor1x​

 

标签:控件,word,text,base64,复制粘贴,HTML,整合,items,var
From: https://www.cnblogs.com/songsu/p/17409331.html

相关文章

  • 支持复制粘贴word图片的CKEditor编辑器
    ​ 这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下)<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@     page contentType="text/html;cha......
  • PageOffice在线打开 word 文件,并且禁止复制
    在线打开word禁用拷贝的三种方式:1使用AllowCopy属性,效果:所有的word进程都不能进行拷贝操作2禁止word选择功能,效果:因为无法选择,所以无法拷贝3使用DisableCopyOnly属性,效果:禁止拷贝文档内容到外部,但内部是可以拷贝的,也可以从外部拷贝到word文档内部具体实现过......
  • 支持复制粘贴word图片的wangEditor编辑器
    ​如何做到ueditor批量上传word图片?1、前端引用代码<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>......
  • python:ERROR: Could not build wheels for wordcloud, which is required to install
    pycharm里无法下载,在下面下载出现问题 需要下载error里的文件https://www.lfd.uci.edu/~gohlke/pythonlibs/#wordcloud这个网站找。输入Python,看自己电脑是怎样的 下载文件后,放到对应位置,下载成功 ......
  • 支持复制粘贴word图片的eWebEditor编辑器
    ​ 自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器)中时,编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能够接......
  • html css 实现图片扫描特效
     实现这个特效需要做3个层,所以要用到CSS绝对定位和层级z-index以及设置top、left、bottom、right的值。大体结构是一个容器,容器里放3个层,底层是4个角的边框效果容器,中间层是要扫描的图片容器,顶层是扫描线容器,这3个层通过z-index来实现层级,它们的高宽度都取父容器的高宽度inherit......
  • JAVA实现html代码转为图片
    方法一:html2Image1、引入依赖<dependency><groupId>gui.ava</groupId><artifactId>html2image</artifactId><version>2.0.1</version></dependency>2、代码实现@ComponentpublicclassHtmlUtil{/***......
  • ios15使用html2canvas页面白屏、崩溃、自动刷新
    原文链接:https://www.cnblogs.com/yalong/p/17408067.html背景有个H5内嵌App的项目,做分享功能的时候用到了html2canvas,在IOS15(Iphone11pro)上,只要点击分享就会触发页面reload或者直接白屏,把H5链接在手机上用浏览器访问点击分享也不行,会触发浏览器自动刷新,看来就是这个htm......
  • wordpress 优化备份还原插件duplicator-pro-4_5_3_2的使用填坑
     创建备份我这边没有出错,就不说了 插件下载地址:https://www.wpjzb.com/wp-plugins/duplicator-pro/我是应的是  https://pan.baidu.com/share/init?surl=YRss-vqBVY2Twv1tBid9fQ   提取码:ibnshttps://pan.baidu.com/share/init?surl=6VSX3FUlugtfBfTPj4wLbg 提取......
  • 【开发者指南】如何在MyEclipse中编辑HTML或JSP文件?(一)
    MyEclipsev2022.1.0正式版下载MyEclipse技术交流群:742336981欢迎一起进群讨论如果您有HTML或JSP文件要编辑,这里将介绍如何编辑。查找以下信息:编辑源代码大纲和属性视图参数页面该功能在MyEclipse中是可用的。一、HTML/JSP编辑器要编辑HTML或JSP文件,请执行以下操作当......