终于把百度编辑器的一个坑填了

简介: 终于把百度编辑器的一个坑填了

前言:



juejin.cn/post/688224…上文说道,我被百度编辑器上了套,今天,说下我的个人进展,因为我把截图粘贴的功能兼容到IE了,算是给自己的鼓励。


开始



其实还挺简单的,内容如下:

ueditor.all.js当中,输入 domUtils.on(me.body, 'paste drop', function(e){可以看到类似粘贴板处理的代码

我对里面的内容进行了如下的处理


if(isIE()){
    var text = window.clipboardData.getData('Text');
    if(text == null){
        var items=clipboardData.files;
        for (var i = 0, len = items.length; i < len; i++) {
            var item = items[i];
            if ( item.type.indexOf('image/') !== -1 ) {
                //上传到服务器
                sendAndInsertFile(item,me); 
                //阻止默认事件, 避免重复添加;
                e.preventDefault();
            }
        }
    }
}else{
    var hasImg = false,
        items;
    //获取粘贴板文件列表或者拖放文件列表
    items = e.type == 'paste' ? getPasteImage(e):getDropImage(e);
    if(items){
        var len = items.length,
            file;
        while (len--){
            file = items[len];
            if(file.getAsFile) file = file.getAsFile();
            if(file && file.size > 0) {
                sendAndInsertFile(file, me);
                hasImg = true;
            }
        }
        hasImg && e.preventDefault();
    }
}
复制代码


  1. 判断是否为IE,是IE特殊处理
  2. 使用IE特定的获取粘贴板的内容
  3. 获取到文件内容,调用百度编辑器的上传方法,将粘贴板的内容上传到服务器。


关于word粘贴内容到富文本编辑框


今天大部分时间都在纠结这玩意,后续考虑自己二次开发插件做二次处理,明天果断和前端配合试下效果。

今天还是了解到不少内容的:

  1. 了解了一下Base64 的内容
  2. js如何处理 copy 、paste 时间,以及通过事件监听处理copypaste
  3. IE和谷歌的对于剪贴板内容的不同处理方式
  4. 了解了一下插件的二次开发


如何给百度编辑器进行插件的二次开发


blog.csdn.net/wiicms/arti…   百度ueditor编辑器插件开发之对话框-移动微模板插件

直接复制里面的内容


// TODO 为百度编辑器开发一个新插件
    UE.registerUI('dialog',function(editor,uiName){
    //创建dialog
    var dialog = new UE.ui.Dialog({
        //指定弹出层中页面的路径,这里只能支持页面,因为跟addCustomizeDialog.js相同目录,所以无需加路径
        iframeUrl:editor.ui.UEDITOR_HOME_URL+"p/uet.html",
        //需要指定当前的编辑器实例
        editor:ue,
        //指定dialog的名字
        name:uiName,
        //dialog的标题
        title:"微信模板",
        //指定dialog的外围样式
        cssRules:"width:540px;height:400px;",
        //如果给出了buttons就代表dialog有确定和取消
        buttons:[
            {
                className:'edui-okbutton',
                label:'确定',
                onclick:function () {
                    dialog.close(true);
                }
            },
            {
                className:'edui-cancelbutton',
                label:'取消',
                onclick:function () {
                    dialog.close(false);
                }
            }
        ]});
    //参考addCustomizeButton.js
        var btn = new UE.ui.Button({
            name:'dialogbutton' + uiName,
            title:'dialogbutton' + uiName,
            //需要添加的额外样式,指定icon图标,这里默认使用一个重复的icon
            cssRules :'background-position: -500px 0;',
            onclick:function () {
                //渲染dialog
                dialog.render();
                dialog.open();
            }
        });
        return btn;
    }/*index 指定添加到工具栏上的那个位置,默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮*/);
    //TODO 为百度编辑器开发一个新插件
复制代码


fex.baidu.com/ueditor/#de…  官方文档解答如何开发二次插件


最后:


工作之余随手写下,前端知识UP,回家继续学习去咯。

来,我们随手从QQ复制一个别人发的图片,贴到百度编辑器,好,内网地址又暴露了(卒)。。。。。


网络异常,图片无法展示
|


参考资料



使用开源插件读取word内容:blog.csdn.net/eiceblue/ar…

java 使用POI操作word获取样式:blog.csdn.net/qq_41129811…

可以学习一下poi 是如何获取到样式和内容的

js中使用Clipboard API获取剪贴板内容[blog.csdn.net/haoaiqian/a…allfirst_rank_v2~rank_v25-1-100929143.nonecase&utm_term=ie%20js%20%E8%8E%B7%E5%8F%96%E5%89%AA%E8%B4%B4%E6%9D%BF%E5%86%85%E5%AE%B9&spm=1000.2123.3001.4430](blog.csdn.net/haoaiqian/a… js 获取剪贴板内容&spm=1000.2123.3001.4430)

获取剪贴板数据:blog.csdn.net/iteye_4865/…

js 文本框监听粘贴事件,获取粘贴板上的图片数据:blog.csdn.net/luyangbin01…

js处理剪贴板的内容:[blog.csdn.net/qq_31411389…allfirst_rank_v2~rank_v25-3-53007675.nonecase&utm_term=ie%20js%20%E8%8E%B7%E5%8F%96%E5%89%AA%E8%B4%B4%E6%9D%BF%E5%86%85%E5%AE%B9&spm=1000.2123.3001.4430](blog.csdn.net/qq_31411389… js 获取剪贴板内容&spm=1000.2123.3001.4430)

相关文章
|
监控 安全 NoSQL
2024年了,还有必要搭建企业网站吗?
在2024年,企业是否仍需建立网站?答案取决于行业。对于快消品/低价行业,网站非必需,但其他行业,网站作为线上流量入口,能展现企业形象和差异化,增强用户粘性,同时也是安全可靠的24小时服务渠道和国际拓展平台。企业网站是对外名片,提升客户信任,且能有效减少宣传成本。然而,网站安全至关重要,包括防止非法插件、服务器端口暴露、弱密码攻击等。为此,企业应利用VSS等服务进行安全检测,并关注设备、数据、内容和行为安全,确保整体安全可控。德迅卫士等主机安全工具可提供实时监控和响应,提升防护能力。安全是持续工作,需定期更新措施。
Springboot项目启动的三种方式
Springboot项目启动的三种方式
840 0
|
Ubuntu Linux 网络安全
Linux:使用ntpdate命令同步更新系统时间
Linux:使用ntpdate命令同步更新系统时间
4221 0
|
机器学习/深度学习 存储 编解码
Open3d系列 | 3. Open3d实现点云上采样、点云聚类、点云分割以及点云重建
Open3d系列 | 3. Open3d实现点云上采样、点云聚类、点云分割以及点云重建
14128 1
Open3d系列 | 3. Open3d实现点云上采样、点云聚类、点云分割以及点云重建
|
10月前
|
XML Java 应用服务中间件
Spring Boot 两种部署到服务器的方式
本文介绍了Spring Boot项目的两种部署方式:jar包和war包。Jar包方式使用内置Tomcat,只需配置JDK 1.8及以上环境,通过`nohup java -jar`命令后台运行,并开放服务器端口即可访问。War包则需将项目打包后放入外部Tomcat的webapps目录,修改启动类继承`SpringBootServletInitializer`并调整pom.xml中的打包类型为war,最后启动Tomcat访问应用。两者各有优劣,jar包更简单便捷,而war包适合传统部署场景。需要注意的是,war包部署时,内置Tomcat的端口配置不会生效。
2582 17
Spring Boot 两种部署到服务器的方式
|
监控 持续交付 开发工具
软件配置管理与知识库管理实践
【8月更文第22天】软件配置管理(SCM)是在软件开发过程中为了确保项目的可追溯性和可控性而实施的一系列管理活动。它涵盖了版本控制、变更控制、发布管理和知识库管理等多个方面。本文将详细介绍这些关键领域的实践方法,并通过一个虚构的软件项目——“云笔记”应用程序为例来进行说明。
498 1
|
JavaScript Windows
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 1x.x
Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 1x.x
629 0
小功能⭐️Unity 如何判断物体是否在摄像机视野内或外
小功能⭐️Unity 如何判断物体是否在摄像机视野内或外
|
数据可视化 Java 应用服务中间件
springboot打war包,成功部署
这篇文章介绍了如何将Spring Boot项目打包成WAR文件,并成功部署到Tomcat服务器的详细步骤。
1327 0
springboot打war包,成功部署
|
监控 JavaScript 前端开发
如何在实际应用中测试和比较React和Vue的性能?
总之,通过多种方法的综合运用,可以相对客观地比较 React 和 Vue 在实际应用中的性能表现,为项目的选择和优化提供有力的依据。
309 1