首页 > 其他分享 >word文档的图片怎么保存到百度Web编辑器上

word文档的图片怎么保存到百度Web编辑器上

时间:2023-07-05 16:47:52浏览次数:38  
标签:Web word 控件 text base64 编辑器 wordpaster 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 6.2整合,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​

标签:Web,word,控件,text,base64,编辑器,wordpaster,items,var
From: https://www.cnblogs.com/songsu/p/17528937.html

相关文章

  • 基于vue-cli 5 和webpack 5实现微前端
    有这么一个需求,项目里有很多业务模块,它们都有引用一些公共组件,每个业务模块打包后都是一个独立的应用,当公共组件修改时,单独打包公共组件,其他应用能够不需要重新构建,就能直接使用最新的公共组件,要怎么实现?一开始我想到的是使用网络资源,就是把公共组件打包后的js文件放到服务器,其他......
  • word文档的图片怎么保存到umeditor上
    ​ 这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下)<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@     page contentType="text/html;cha......
  • JavaWeb知识
    day01-XML&tomcatXML介绍XML:eXtendsiblemarkuplanguage可扩展的标记语言XML有什么用?1.可以用来保存数据2.可以用来做配置文件3.数据传输载体定义XML其实就是一个文件,文件的后缀为.xml文档声明简单声明:version:解析这个xml的时候,使用什么版本的解析器解析<?xmlversi......
  • webclient download file The remote server returned an error: (403) Forbidden,
    classWebpWebClient:WebClient{protectedoverrideWebRequestGetWebRequest(Uriaddress){HttpWebRequestrequest=(HttpWebRequest)WebRequest.Create(address);//req.UserAgent="[anywordsthatismoretha......
  • Wordpress:安装Astra主题后,无法找到主题模板?
    在使用Wordpress安装Astra后,发现侧栏Appearance没有出现StarterTemplates,这样就无法使用很多Astra相关的免费模板,如何解决?1.点击Plugins,在搜索框输入StarterTemplates,安装后激活 2.在Appearance找到StarterTemplates,进入即可选择喜欢的模板。 ......
  • word文档的图片怎么保存到HTML编辑器上
    ​ 如何做到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>......
  • [-002-]-Python3+Unittest+Selenium Web UI自动化测试之显示等待WebDriverWait
    1、WebDriverWait基本用法引入包#文件引入fromselenium.webdriver.support.uiimportWebDriverWaitfromselenium.webdriver.supportimportexpected_conditionsasEC每0.5s定位ID为userid的元素,如果定位成功,执行下面的代码;直至15s超时抛出异常可用来检查页面元素是......
  • web js 播放rtsp视频流方案
    场景需要在web端预览海康无线摄像头视频流,所以采用海康自身提供的websdk无法使用方案1rtsp流推送到应用服务器,应用服务器再通过ffmpeg推送到nginx,js再去拉流缺点:多了一层转发,造成了一定的延迟方案2通过webRTC方案,使用现有开源插件webrtc-streamerhttps://github......
  • php 使用phpoffice/phpword导出word
    安装composerrequirephpoffice/phpword/***//设置常用文本样式*'size'=>12,//文字大小*'name'=>'宋体',//字体名称*'bold'=>true,//加粗*'italic'=>tr......
  • RunnerGo 新增对WebSocket、dubbo、TCP/IP三种协议的API测试
    大家好,RunnerGo作为一款一站式测试平台不断为用户提供更好的使用体验,最近得知RunnerGo新增对,WebSocket、Dubbo、TCP/IP,三种协议API的测试支持,本篇文章跟大家分享一下使用方法。WebSocket协议WebSocket是一种在单个TCP连接上进行全双工通信的API技术。相比于传统的HTTP......