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

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

时间:2023-05-10 15:12:44浏览次数:53  
标签:复制到 控件 text base64 编辑器 HTML 整合 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,编辑器,HTML,整合,items,var
From: https://www.cnblogs.com/songsu/p/17388029.html

相关文章

  • iphone 解析HTML
    几周前,由于需要从网页中提取一部分内容我们就一直在寻找一个可以在iPhone可用的简单的html解析器。我们在该贴中找到了一个名为hpple的漂亮封装。使用该库的简单步骤如下:包含并链接libxml2:展开Targets双击项目名选择所有配置搜索HeaderSearchPath加入一行并选中recursive选项:${......
  • 碎片化学习前端之HTML(webComponent)
    前言webComponent是HTML5推出的新特性,为组件化推广奠定基础。webComponent基本使用原生组件,性能较好,但存在兼容性问题。其核心技术有:Customelements,ShadowDOM,HTMLTemplates。CustomelementsJavaScriptAPI,用于定义customelements及其行为。<m-buttontype="p......
  • 本地图文直接复制到网页编辑器中
    ​ 自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了。一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器)中时,编辑器都无法自动上传图片。需要用户手动一张张上传Word图片。如果只有一张图片还能够接......
  • Java使用wkhtmltopdf实现HTML转pdf
    wkhtmltopdf设置全屏:wkhtmltopdf--disable-smart-shrinking--page-sizeA4-B0-L0-R0-T0test.htmloutput.pdf-B-T-R-L是有效果的,$snappy->setOption('margin-top','0mm');$snappy->setOption('margin-left','0mm'......
  • HTML中meta标签的那些属性
    <meta>标签是HTML中用于描述网页元信息的元素。它位于<head>部分,不会显示在页面内容中,但对于浏览器、搜索引擎等具有重要作用。主要作用有:定义文档的字符编码、提供网页的描述信息、关键词、作者、视口设置等,这些信息有助于搜索引擎理解和索引网页内容。 <meta>标签的......
  • HTML 表单
    9.1表单标签-主要标签-<form>:表单容器-<input>:输入框-相关标签-<textarea>:多行文本框-<select>、<option>:下拉菜单(组合使用)-<label>:标题(辅助表单标签),用for和id属性形成映射,点击标题也可选择9.2<input>标签属性-type:控制输入框类型-值:-text-普通文本输入......
  • 学习日记——HTML入门第一课
    1.了解HTML的定义,基本结构①对于超文本标记语言的理解,是超越文本(不限制于字符,包含视频音频)用“<>”这个特殊字符来书写的语言②基本结构为<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>网页标题</title></head>......
  • HTML a标签
    7.1属性-href:链接地址-target:控制链接的打开方式。-_self(默认)-在当前页面打开;-_blank-新标签页打开。7.2<base/>标签-作用:改变链接的默认行为-位置:在head标签中-属性:href——改变默认链接;target——改变默认目标。7.3可作为锚点-作用:跳转到本页指定id......
  • HTML 列表
    5.1无序列表ul<ul><li>无序列表</li><li>无序列表</li></ul>-ul里只能放li标签-默认黑色实心圆-type属性:-disc-黑色实心圆,-circle-黑色空心圆,-square-黑色实心正方形,-none-取消样式5.2有序列表ol<ol><li>有序列表</li><......
  • HTML div 和 span 标签
    4.1<div></div>-划分页面区域,独占一行4.2<span></span>-主要用于对文本独立修饰。-内容有多宽就占用多宽的空间,不换行,不破坏原有结构......