百度ueditor如何能实现直接粘贴把图片上传到服务器中

这篇具有很好参考价值的文章主要介绍了百度ueditor如何能实现直接粘贴把图片上传到服务器中。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况

本文使用的后台是Java。前端为Jsp(前端都一样,后台如果语言不通得自己做 Base64编码解码)

因为公司业务需要支持IE8 ,网上其实有很多富文本框,效果都很好。

例如www.wangEditor.com  但试了一圈都不支持IE8 。

所以回到Ueditor,由于官方没有维护,新的neuditor 也不知道什么时候能支持word自动转存,只能自己想办法。

如果没有必要,不建议使用ueditor。我也是没有办法。

改动过后的插件只适合IE8。

这里要说明的一点是百度官方的编辑器不支持word图片批量转存,粘贴word后需要手动选择图片再进行上传一次操作。网上找到的大部分的示例都是这个操作。如果需要自动批量上传word图片的话可以使用WordPaster这个控件。

1.IE设置

在受信任站点里添加信任网站。

这里本机测试使用的直接是   http://localhost

因为需要读取客户端的文件,所以需要设置允许访问数据源。

ActiveXObject设置可以去网上参考,这里不列举了。

前面的

到这里 IE 的准备工作完成了。

修改ueditor.all.js关键代码

14006行附近,如果是其他版本的ueditor,在功能正常的情况下,可以拷贝下面代码。

var imgPath = attrs.src;

var imgUrl = attrs.src;

if (navigator.appName === 'Microsoft Internet Explorer') { //判断是否是IE浏览器

    if (navigator.userAgent.match(/Trident/i) && navigator.userAgent.match(/MSIE 8.0/i)) { //判断浏览器内核是否为Trident内核IE8.0

        var realPath = imgPath.substring(8, imgPath.length);

        var filename = imgPath.substring(imgPath.lastIndexOf('/') + 1, imgPath.length);

        var result = UploadForIE.saveAttachment(filename, realPath);

        if (result) {

            var json = eval('(' + result + ')');

            imgUrl = json.url;

        }

    }

}

img.setAttr({

    width: attrs.width,

    height: attrs.height,

    alt: attrs.alt,

    word_img: attrs.src,

    src: imgUrl,

    'style': 'background:url(' + (flag ? opt.themePath + opt.theme + '/images/word.gif': opt.langPath + opt.lang + '/images/localimage.png') + ') no-repeat center center;border:1px solid #ddd'

})

uploadForIE.js。

var UploadForIE = {

    // 保存到xml附件,并且通过ajax 上传

    saveAttachment: function(upload_filename, localFilePath) {

        //后台接受图片保存的方法。

        var upload_target_url = "uploadImg";

        var strTempFile = localFilePath;

        // 创建XML对象,组合XML文档数据

        var xml_dom = UploadForIE.createDocument();

        xml_dom.loadXML('<?xml version="1.0" encoding="GBK" ?> <root/>');

        // 创建ADODB.Stream对象

        var ado_stream = new ActiveXObject("adodb.stream");

        // 设置流数据类型为二进制类型

        ado_stream.Type = 1; // adTypeBinary

        // 打开ADODB.Stream对象

        ado_stream.Open();

        // 将本地文件装载到ADODB.Stream对象中

        ado_stream.LoadFromFile(strTempFile);

        // 获取文件大小(以字节为单位)

        var byte_size = ado_stream.Size;

        // 设置数据传输单元大小为1KB

        var byte_unit = 1024;

        // 获取文件分割数据单元的数量

        var read_count = parseInt((byte_size / byte_unit).toString()) + parseInt(((byte_size % byte_unit) == 0) ? 0 : 1);

        // 创建XML元素节点,保存上传文件名称

        var node &#文章来源地址https://www.toymoban.com/news/detail-765656.html

到了这里,关于百度ueditor如何能实现直接粘贴把图片上传到服务器中的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 阿桂天山的技术小结:Flask+UEditor实现图片文件上传富文本编辑

    话不多说,有图有源码 先看效果:  1.前端html页面index.html 2.后端ueditor.py执行文件( 这个非常重要 ) 3.路径配置文件config.py 4.启动运行程序appstart.py 特殊强调 :路径蓝图,必须指向ueditor( 这个非常非常非常重要,否则前端会报错 ),放在app执行文件中 5)最后整个工程文件树:    希望你

    2024年02月11日
    浏览(62)
  • 百度富文本Ueditor视频上传不显示,不能播放解决方案

    目录 问题:上次视频不显示 第一:找到 ueditor.config.js 这个文件,大概在365行这 个 whitList 属性 第二 、找到ueditor.all.js 这文件  ,搜索这个me.commands[\\\"insertvideo\\\"] 方法,大概在17780行;找到 第三:在ueditor.all.js 这文件找到 me.commands[\\\"insertvideo\\\"] 方法,大概在17780行;找到:注

    2024年02月13日
    浏览(65)
  • Ueditor上传图片自动添加水印(通用图片文件)

    1、找到config.json,在配置文件中新增水印效果  2、找到php目录下的 action_uploads.php 文件 3、找到php同级目录下的类 uploadser.class.php    注意:以上代码会提示一个错误 imagealphablending() expects parameter 1 to be resource imagesavealpha() expects parameter 1 to be resource 在这个位置: 这个错误是因

    2024年02月12日
    浏览(49)
  • UEditor配置后端上传图片

     🔥 博客主页 : 破浪前进 🔖 系列专栏 : Vue、React、PHP ❤️ 感谢大家点赞👍收藏⭐评论✍️ 接口:

    2024年02月06日
    浏览(52)
  • 扩展element-ui el-upload组件,实现复制粘贴上传图片文件,带图片预览功能

    控件改造 在窗口的 el-form 控件参数中添加 @paste.native 事件,事件绑定方法名 handlePaste 也可以在其他控件中添加事件监听,看个人需求。 注意: 监听粘贴事件时,需要当前页面先获取焦点,否则无法正常监听, 可以在页面加载后调用 focus() 获取焦点 粘贴功能Js部分参考资料

    2023年04月08日
    浏览(100)
  • tinymce4/5实现将word中内容(文字图片等)直接粘贴至编辑器中——利用插件tinymce-powerpaste-plugin

    TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有:UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。 TinyMCE的优势: 开源可商用,基于LGPL2.1 插件丰富,自带插件基本涵盖日常所需功能(示例看下面的Demo-2) 接口丰富,可扩展性强,有

    2024年02月15日
    浏览(45)
  • UEditor富文本编辑器上传图片打不开,提示“后端配置项没有正常加载,上传插件不能正常使用”

    1、安装 npm install vue-ueditor-wrap 2、下载所需资源 这一步在解决报错的时候会用到 👉👉👉👉👉 UEditor资源下载链接 上面的打不开请从下面链接下载项目 ueditor-download: vue项目中集成ueditor的UE资源 3、下载完成后将文件夹放到public文件夹下 4、 配置ueditor.config.js,并且在main.j

    2024年02月13日
    浏览(72)
  • 服务器如何下载百度网盘文件?Linux服务器如何在百度网盘中连接、上传下载;在Linux服务器上下载百度云盘中的资料

    百度云提供Python包bypy进行远程服务器的对接然后下载: https://github.com/houtianze/bypy 可以通过pip直接下载,授权本人的百度云账号后,就可以直接使Linux电脑本地文件与百度网盘的apps(我的应用数据)/bypy目录下的文件进行上传与下载的交互了。 本文简单介绍其相关的使用方式

    2024年02月06日
    浏览(53)
  • 【Linux】Linux服务器连接百度网盘:实现上传下载

    百度云提供Python包bypy进行远程服务器的对接然后下载: github地址 粗略的连接步骤如下: 首先,pip 安装所需包 然后,授权本人的百度云账号后, 最后,就可以直接使用命令行来实现与百度网盘(我的应用数据)/bypy目录下的文件进行上传与下载的交互了。 2.1 pip 安装所需包

    2024年02月08日
    浏览(53)
  • 直接在html中引入Vue.js的cdn来实现一个简单的上传图片组件

    当使用 Vue.js 的 CDN 来实现一个简单的上传图片组件时,你可以利用 Vue 的数据绑定和事件处理能力,结合 HTML 和 CSS,轻松地创建一个交互式的图片上传界面。以下是一个示例: index.html TANKING https://afdian.net/item/ffa3292a337c11ee9a8c5254001e7c00

    2024年02月13日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包