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

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

时间:2023-05-23 16:00:10浏览次数:59  
标签:控件 base64 word text KindEditor 复制粘贴 整合 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​

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

相关文章

  • java.sql.SQLException: Access denied for user 'root'@'localhost' (using password
    org.apache.ibatis.exceptions.PersistenceException:###Errorqueryingdatabase.Cause:java.sql.SQLException:Accessdeniedforuser'root'@'localhost'(usingpassword:YES)###Theerrormayexistincom/itheima/mapper/BrandMapper.j......
  • 支持复制粘贴word公式的wangEditor编辑器
    ​ 这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下)<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@     page contentType="text/html;cha......
  • 支持复制粘贴word公式的eWebEditor编辑器
    ​如何做到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>......
  • 能粘贴Word 内容(含公式)的在线编辑器
    ​ 自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器)中时,编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能够接......
  • Authentication plugin ‘caching_sha2_password‘ cannot be loaded
    用navicate登录mysql8.0时报错如下:Authenticationplugin‘caching_sha2_password‘cannotbeloade原因是mysql8之前的版本中加密规则是mysql_native_password,而mysql8之后,加密规则是caching_sha2_password。解决问题方法有两种,一种是升级navicat驱动,另一种是把mysql用......
  • 微信小程序下载word
      后台返回数据流给请求方,Uni-app中使用uni.downloadFile。前端代码exportFile(){uni.showLoading({mask:true})uni.downloadFile({url:root+'/portal/offer/record/exportBaojiaWord?list_id='+this.item.list_id,success:(res......
  • Wordpress自定义小工具(Widget)简单案例
    在主题对应目录创建文件如widgets.php<?php//继承了WP_Widget这个类来创建新的小工具(Widget):可在后台外观-小工具中添加此自定义小工具到页面具体位置classmy_widgetextendsWP_Widget{publicfunction__construct() { //$widget_ops可以给小工具进......
  • Django后台 + Wordpress主题,只要自己看上的主题都可以让它变成自己的
    既然学习了PythonWeb怎么能没有自己的一个小站呢?没有自己精心打造的一个小站怎么敢说自己学习过PythonWeb呢?说的再多不如直接干,我的个人网站也已经部署上线。Django后台+Wordpress主题,只要自己看上的主题都可以让它变成自己的为什么要选择Wordpress主题呢?自己在刚开始学习P......
  • 配置wordpress:自定义简码(wordpress 6.2)
    一,添加php代码的例子:1,代码://说明:得到当前时间functionlhdGetNowTime(){ $now=date("Y-m-dH:i:s");return$now;}//注册成简码,名字myNowadd_shortcode('myNow','lhdGetNowTime');//说明:获取完整URLfunctioncurPageURL(){ $pageURL='h......
  • word两端对齐后最后一行字符间距太大,怎么办?
    (52条消息)word两端对齐字的间距太大,怎么办?_两端对齐后字间距太大怎么办_我来了嗷嗷嗷的博客-CSDN博客 解决方案:在段落最后一句,回车即可。 ......