首页 > 其他分享 >支持复制粘贴word公式的文本编辑器

支持复制粘贴word公式的文本编辑器

时间:2023-05-25 17:55:57浏览次数:57  
标签:控件 文本编辑 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​

标签:控件,文本编辑,word,text,base64,复制粘贴,wordpaster,items,var
From: https://www.cnblogs.com/songsu/p/17432406.html

相关文章

  • 支持复制粘贴word公式的Web编辑器
    ​ 这种方法是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调用本地office实现多人在线同时编辑Word文档
    说明:多人同时在线编辑文件大多数会出现文档相互覆盖的问题,后保存的文档会覆盖先保存的文档。pageoffice的这个功能可以用程序控制不同用户打开文件后,编辑Word文档中属于自己的区域,并且不会互相影响。1、环境:前端:vue后端:springboot、pageoffice5.4.0.3版本vue+springboot集成......
  • 配置wordpress:图片太小太模糊(wordpress 6.2)
    一,图片上传或复制到wordpress后会变模糊原图清晰度:复制到wordpress后的清晰度:二,设置图片大小:把最大宽度和最大高度调整为2048配置后重新上传图片,清晰度提升说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest     对......
  • 支持复制粘贴word公式的百度Web编辑器
    ​ 自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器)中时,编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能够接......
  • 如何利用VBA实现Excel与Word交互?
    excel与word数据交互的需求很常见,例如,利用excel明细生成word合同、利用excel明细生成word报告单、批量提取word数据到excel表格等等。通常情况下大家都是手动复制粘贴。但是其实可以用程序去简化这一部分工作。在做开发过程中,遇到过很多案例,在此总结出来。一、什么是VBA?首先我们来......
  • wordpress插件:用YARPP显示相关文章(wordpress 6.2)
    一,安装插件:插件->安装插件->搜索:RelatedPosts安装后可以进行配置二,测试效果说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest     对应的源码可以访问这里获取: https://github.com/liuhongdi/     或: https:......
  • HTB ACADEMY-Hacking WordPress WRITE UP
    YouhavebeencontractedtoperformanexternalpenetrationtestagainstthecompanyINLANEFREIGHTthatishostingoneoftheirmainpublic-facingwebsitesonWordPress.Enumeratethetargetthoroughlyusingtheskillslearnedinthismoduletofindavar......
  • 用pageOffice控件实现 office word文档在线编辑 表格中写数据的方法
    PageOffice对Word文档中Table的操作,包括给单元格赋值和动态添加行的效果。1应用场景OA办公中,经常要在文档的指定位置表格,填充后端指定数据。如word文档中,表格数据如下表格中人员信息怎么把后端的关键数据,填充到word文档表格中呢?2实现方法文档中设置好书签,设置好表......
  • wordpress部署
    wordpress部署1,拉取镜像dockerpull192.168.100.10/library/wordpressdockerpull192.168.100.10/library/mysql:5.62,编写compose文件mkdir/root/wordpressvimdocker-compose.yamlversion:'3.3'services:wordprss:image:192.168.100.1......
  • MYSQL设置密码时显示Failed! Error: SET PASSWORD has no significance for user 'roo
    ​ 用这个命令进入mysqlsudomysql在sql命令行输入以下命令回车,你就可以把密码改成mynewpasswordALTERUSER'root'@'localhost'IDENTIFIEDWITHmysql_native_passwordby'mynewpassword';exit回到终端命令行,输入:sudomysql_secure_installation输入刚才的......