首页 > 其他分享 >本地图文直接复制到dedecms编辑器中

本地图文直接复制到dedecms编辑器中

时间:2023-04-27 16:03:15浏览次数:47  
标签:复制到 控件 text base64 dedecms 编辑器 整合 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​

标签:复制到,控件,text,base64,dedecms,编辑器,整合,items,var
From: https://www.cnblogs.com/songsu/p/17359176.html

相关文章

  • Ueditor 富文本编辑器 插入 m3u8 和 mp4 视频(PHP)
    当前环境:PHP、Ueditor的版本是1.4.3新的需求是,需要在Ueditor富文本编辑器中,插入视频播放,并且视频格式有MP4,也有M3U8。百度编辑器默认的是embed,需要修改下配置。 ueditor.all.js和 ueditor.config.js这两个文件要改一些东西,具体我这里就不展示了,网上有很多文章都有写。这里......
  • 本地图文直接复制到动易CMS编辑器中
    ​ 如何做到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>......
  • ACE Editor(代码编辑器) 入门教程
    ACEEditor(代码编辑器)入门教程作者:Albert.Wen 添加时间:2022-10-0500:34:16 修改时间:2023-04-2709:49:52 分类:HTML/CSS/JS 编辑ACEEditor是一个开源的、独立的、基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中。ACE支持超过110种语言语......
  • 快速上手Linux核心命令(六):Linux的文本编辑器vi和vim
    @目录前言简介小试牛刀vi/vim工作原理及三种模式常用快捷键命令行图解前言上一篇中已经预告,我们这篇主要说Linux中vi/vim编辑器。它是我们使用Linux系统不可缺少的工具,学会了,你就可以在Linux世界里畅通无阻,学废了,常用操作你也会了,也是够用了,O(∩_∩)O简介vi是Linux系统下标......
  • 本地图文直接复制到SiteFactory编辑器中
    ​ 百度ueditor新增的将word内容导入到富文本编辑框的功能怎么没有啊,...ueditor实现word文档的导入和下载功能的方法:1、UEditor没有提供word的导入功能,只能说是粘贴复制。2、方案:用poi来提供word导入,思路是将word转换为html输出,再用UEditor提供的setContent()方法将html的内容......
  • 本地图文直接复制到CMS编辑器中
    ​图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。加入下面的代码://判断剪贴......
  • 本地图文直接复制到WordPress编辑器中
    ​ 在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper。通过知乎提供的思路找到粘贴的原理,通过TheViper找到粘贴图片的方法。其原理为一下步骤:监听粘贴事件;【用于插入图片】获取光标位置;【......
  • Linux(vim编辑器)
    一.vim编辑器快速体验使用:vimhello.txt,编辑一个新文件,执行后进入的是命令模式。在命令模式内,按键盘i,进入输入模式。在输入模式内输入想要输入的文本输入完成后,按esc回退到命令模式在命令模式内,按键盘:,进入底线模式在底线命令内输入:wq,保存文件并退出vim编辑器命令模......
  • 百度编辑器 实现ctrl+v粘贴图片并上传、word粘贴带图片
    ​ 百度ueditor新增的将word内容导入到富文本编辑框的功能怎么没有啊,...ueditor实现word文档的导入和下载功能的方法:1、UEditor没有提供word的导入功能,只能说是粘贴复制。2、方案:用poi来提供word导入,思路是将word转换为html输出,再用UEditor提供的setContent()方法将html的内容......
  • 使用Plist编辑器——简单入门指南
     本指南将介绍如何使用Plist编辑器。您将学习如何打开、编辑和保存plist文件,并了解plist文件的基本结构和用途。跟随这个简单的入门指南,您将掌握如何使用Plist编辑器轻松管理您的plist文件。plist文件是一种常见的配置文件格式,用于存储应用程序或系统的设置信息,如键值对、......