首页 > 其他分享 >能粘贴Word 内容(含公式)的在线编辑器

能粘贴Word 内容(含公式)的在线编辑器

时间:2023-05-15 16:23:09浏览次数:47  
标签:控件 Word text base64 编辑器 整合 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,编辑器,整合,items,var,粘贴
From: https://www.cnblogs.com/songsu/p/17402242.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......
  • 在input中如何禁止复制、粘贴、鼠标右键弹出面板选项
    主要事件右键弹出面板选项oncontextmenu复制oncopy粘贴onpaste原生input实现-禁止复制<inputoncopy="returnfalse"/>-禁止粘贴<inputonpaste="returnfalse"/>-禁止鼠标右键弹出面板选项<inputoncontextmenu="returnfalse"/>Rea......
  • 可用于Python开发的代码编辑器
    市面上适用于Python开发的代码编辑器有很多,我们来简单的说一下一、PyCharm(专业版/社区版)网址:PyCharm:thePythonIDEforProfessionalDevelopersbyJetBrainsPyCharm是一个用于Python开发的集成开发环境(IDE),它提供了丰富的功能和工具,使得Python开发更快、更轻松......
  • 配置wordpress:创建隐私政策页(wordpress 6.2)
    一,wordpress系统中默认的隐私政策页1,页面->所有页面:可以看到默认的隐私政策页面 注意默认的隐私政策页的状态是草稿,并未正式发布,需要发布后才能加链接到菜单等二,如果隐私政策页被误删除也可以重新创建也可以指定使用其他页面,例如:改选其他页面,然后点使用本页按钮......
  • 能粘贴Word 内容(含公式)的文本编辑器
    ​ 自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器)中时,编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能够接......
  • word 转为 pdf
    保证目录点击还能跳转  ......
  • Your password does not satisfy the current policy requirements解决办法
    mysql5.7.x安装以后,想修改随机生成的密码为简单容易记忆的密码,如root,123456等,这时候通过修改密码的几种方式都不行,出现密码不符合当前安全策略要求。为了解决这种问题,可以修改几个值,他们是关于密码验证的设置。我们通过随机生成的密码,登录数据库,查看密码验证相关变量:mysql>show......
  • docker compose fullstack example -- keycloak web grant-type: password
    fastapi-react-postgres-keycloak-ssohttps://github.com/fanqingsong/fastapi-react-postgres-keycloak-sso version:"3"services:nginx:image:nginx:1.17volumes:-./nginx/nginx.conf:/etc/nginx/conf.d/default.conf-./log......
  • 富文本编辑器的下载和使用
    目录富文本编辑器:下载用法编辑器使用方法1.下载编辑器2.部署编辑器3.修改HTML页面4.获取HTML数据参数使用富文本编辑器:kindeditor的使用为例http://kindeditor.net/demo.php下载用法只有这俩有用其他使用方法看文档说明编辑器使用方法1.下载编辑器下载KindEdi......
  • TinyMCE 6 编辑器+ Layui 2.8.2+单页面
    TinyMCE6编辑器+Layui2.8.2 拓展 tinymce.js目录结构  layui.define(function(exports){vart={};//初始化t.bulid=function(options){if(typeoftinymce=='undefined'){varscript=document.cr......