首页 > 其他分享 >WordPress编辑器支持PowerPoint导入

WordPress编辑器支持PowerPoint导入

时间:2022-11-23 11:00:20浏览次数:80  
标签:text base64 编辑器 wordpaster WordPress blob items var PowerPoint

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

 

标签:text,base64,编辑器,wordpaster,WordPress,blob,items,var,PowerPoint
From: https://www.cnblogs.com/zyzzz/p/16917616.html

相关文章

  • [WordPress] 主题美化 樱花背景+灯笼特效+鼠标样式 [持续更新]
    樱花背景黑白主题适配//樱花背景特效<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"......
  • [WordPress] 添加文章更新或过期失效提示
    时间并不会被人们的思想所左右,却是我们一直在追着时间跑,从未放慢脚步。当你发布的某篇文章,经过了千百天还有人访问,可能是教程设置不生效,也可能是下载地址更换,这时候就需要......
  • WordPress 设置网站动态标题 教程
    前言我们经常逛别人的网站,有些网站当我们离开该页面浏览其他页面的时候,我们在离开的页面上面会看到比如本站的“你别走吖Σ(っ°Д°;)っ”这样的字样,当我们点回来的时......
  • WordPress全站左侧边栏添加联系站长按钮[WP教程]
    使用教程:也很简单,只需要在两个文件中添加一行代码就可以实现,具体演示效果可以查看本站觅知博客的效果1、后台主题设置—>自定义代码—>自定义CSS样式代码把下面的代码......
  • WordPress利用阿里巴巴矢量图标美化导航栏菜单
    现在很多的wp主题模板自带的都是FontAwesome图标库,社长用的子比主题也是一样,但是这个图标库的样式太丑了,社长就分享一下WordPress引用阿里巴巴矢量图标库的彩色图标......
  • CSDN-markdown编辑器用法
    这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你......
  • vusui-editor富文本编辑器
    Vusui-editor基于Vue3+Quill封装的富文本编辑器组件【使用文档】|【在线演示】......
  • 使用阿里云云服务器和Wordpress个人建站
    先贴一个阿里云官方的通过ECS服务器建站的教程链接https://developer.aliyun.com/article/761621需要说明的是如果需要通过公网访问你的网站那么必须要先进行I......
  • WordPress编辑器支持PowerPoint一键粘贴
    ​如何做到ueditor批量上传word图片?1、前端引用代码<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-......
  • 关于 WordPress 你了解多少?
    WordPress是一个免费和开源的内容管理系统(CMS)框架。它是最近使用最广泛的CMS框架。现在让我们简要讨论一下什么是CMS,什么是wordpress!什么是内容管理系统?内容管理系统......