首页 > 编程语言 >PHPMyWind编辑器支持Word上传

PHPMyWind编辑器支持Word上传

时间:2023-01-28 12:14:08浏览次数:51  
标签:Word PHPMyWind base64 编辑器 wordpaster blob text var items

 图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的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);

};

效果展示:

编辑

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

详细思路及源码

示例下载:

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

标签:Word,PHPMyWind,base64,编辑器,wordpaster,blob,text,var,items
From: https://www.cnblogs.com/zyzzz/p/17070057.html

相关文章

  • PHPMyWind编辑器支持Word一键上传
    ​ 如何做到ueditor批量上传word图片?1、前端引用代码<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml......
  • [LeetCode] 472. Concatenated Words
    Givenanarrayofstrings words (withoutduplicates),return allthe concatenatedwords inthegivenlistof words.A concatenatedword isdefinedasa......
  • 3D数字孪生场景编辑器介绍
    1、背景数字孪生的建设流程涉及建模、美术、程序、仿真等多种人才的协同作业,人力要求高,实施成本高,建设周期长。如何让小型团队甚至一个人就可以完成数字孪生的开发,是数字......
  • P5858 「SWTR-03」Golden Sword DP+单调队列模板
    P5858「SWTR-03」GoldenSword-洛谷|计算机科学教育新生态(luogu.com.cn) 理解题意后,我们知道贪心和暴力枚举显然是不行的,联想到DP我们设置dp[i][j]表示,第i种......
  • 2、python编辑器的选择安装与配置(pycharm和jupyter)
    1、pycharm首先创建一个新的项目,下边会有解释器的选择,因为已经创建了pytorch的conda环境,所以可以直接选择已存在的pytorch环境下的python文件  2、点击pythonconsol......
  • vmhost永久免费主机搭建wordpress
    vmhost主机试用+worpress搭建点击vmhost进入vmhost官网,vmhost提供了永久免费的主机,还附带一个三级域名,并且支自定义子域名,免费托管5G的网页空间,网页支持php语言,附带数据......
  • win32com操作word API精讲 第六集 Range(四)对齐和缩进
    本课程《win32com操作wordAPI精讲&项目实战》同步在B站、今日头条、视频号及本公众号发布。其中本公众号以发布文字教程为主。今天是大年初二,一灯在此祝愿各位朋友兔年......
  • 学习笔记——Liunx;Linux文件与目录结构;VI/VIM编辑器(一般模式、编辑模式、命令模式)
    2023-01-23一、Linux1、Liunx的简介Linux是一套免费使用和自用传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户、多任务、支持多线程和多CPU的操作系统。Linux能运......
  • Linux系统入门-VIM编辑器
    VIM编辑器有三种模式1、命令模式2、输入模式3、末行模式vimreadme123.txt运行vim,默认进去命令模式末行模式输入:键盘,可以进入末行模式常用的命令为:W--------保存:q---------......
  • LINUX学习之文本编辑器VIM/VI(八)
    简介VI是Unix操作系统和类Unix操作系统中最通用的文本编辑器VIM编辑器是从VI发展出来的一个性能更强大的文本编辑器。可以主动的以字体颜色辨别语法的正确性,方便......