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

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

时间:2023-04-25 17:45:36浏览次数:37  
标签:复制到 控件 text base64 编辑器 整合 items var CMS

图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的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,编辑器,整合,items,var,CMS
From: https://www.cnblogs.com/songsu/p/17353363.html

相关文章

  • 本地图文直接复制到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文件是一种常见的配置文件格式,用于存储应用程序或系统的设置信息,如键值对、......
  • Apple 的 plist 编辑器入门指南:基础操作与高级功能详解
     PlistEditPro是一款专为macOS编写的最高级属性列表Plist编辑器。对于Mac和IOS开发人员来说,编写应用程序时必须编辑各种列表文件。PlistEditPro通过提供直观且功能强大的界面,使编辑这些文件更加容易。它不仅能够复制和粘贴或拖放属性列表数据,还提供强大的搜索和替换功能,并......
  • Vue3 +element-plus+ wangEditor 富文本编辑器+前端七牛云上传
    我用的vue3,element-plus,没用ts搭建wangEditor 参考地址 https://www.cnblogs.com/xbxxf/p/16791084.html七牛云安装参考地址 https://blog.csdn.net/ldoit/article/details/121533204本来就是抄大佬的,就不复制粘贴了主要是整理关于七牛云部分的代码,秉着复制就能用的原则,我......
  • ubuntu 中 解决vim编辑器注释行后面不清晰的问题
     001、修改配置前 002、修改vim配置文件,/etc/vim/vimrc找到 setbackground=dark行,将前面的注释引号去掉 003、查看修改效果 ......
  • 一个低代码拖拉拽的表单编辑器,开源咯!!!
    编辑器介绍先来个图,有个初步的认识抱歉,原谅图有点模糊哈github:https://github.com/Liberty-liu/Everright-formEditordemo:https://everright.site/zh-cn/module/formEditor/introduction.htmlEverright-formEditor是一个基于vue3的可视化编辑器,依赖于element-plus和vant进行开......
  • 电力布局三维编辑器功能设计
    楔子最近和一家公司在谈一个项目合作,他们公司主要是做电力相关的。项目背景大概是这样的:国家电网对电网资产需要做到数字化管理,对现有变压器台区内的电表箱电能表做可视化数字孪生管理。由于涉及到的台区非常多,所以客户希望开发的不是单个项目,而是可以实现项目的3D编辑器,使得......
  • Avalonia属性编辑器控件(Avalonia.PropertyGrid)
    Nuget: https://www.nuget.org/packages/bodong.Avalonia.PropertyGridGitHub: https://github.com/bodong1987/Avalonia.PropertyGrid ......