ckeditor粘贴的图片自动上传

2023-11-01

环境:java,springmvc,freemaker,ckeditor

在做项目的时候发现本地图片粘贴到ckeditor中,img标签的src中的值是“data:image/png;base64,”开头的,后面会跟一串字符串,图片越大字符串越长,这样的图片在保存的时候一旦放多了过后,后台不知什么原因拿不到其它的参数,所以想把这种图片上传到后台在显示出来。研究了一天的发觉还是挺简单的,主要是ckeditor怎么获取img并获取src 。下面看一下代码。

Js代码

 

function uplaodImage(){

         CKEDITOR.instances.editor.on('change',function(e){

                   var a = e.editor.document ;

                   var b = a.find("img");

                   var count = b.count();

                   for(var i=0;i<count;i++){

                            var src =b.getItem(i).$.src;//获取img的src

                            if(src.substring(0,4)=='data'){

                                     var url = 后台请求路径;

                                     $.ajax({

                                     type:"POST",

                                     url:url,

                                     async:false,//同步,因为修改编辑器内容的时候会多次调用change方法,所以要同步,否则会多次调用后台

                                     data:{'src':src},

                                     success:function(json){

                                                        var data = eval("("+json+")");

                                                        if(data.success){

                                                                 b.getItem(i).$.src=data.url;

                                                        }

                                               }

                                     });

                            }

                   }

         });

}

 

 

 

这里要注意,调用这个方法需要延时,即要在ckeditor加载完后在重写change方法,要不然就会被ckeditor的默认方法覆盖

 

$(function(){setTimeout(uplaodImage,400);});

 

 

Java代码

/**

          * ckeditor粘贴的图片上传并返回访问路径

          * @param request

          * @param response

          */

         public void uploadImage(HttpServletRequest request,HttpServletResponse response){

                   try {

                            String src=request.getParameter("src");

                            if(src==null || src.trim().length()==0){

                                     JsonUtils.sendJson("{'success':false}", response);

                            }else{

                                     String[] srcArr = src.split(";base64,");//data:image/png;base64,iVBORw0KGgoAA

                                     //文件后缀

                                     String fileSuffixes = srcArr[0].split("/")[1];//data:image/png

                                     BASE64Decoder decoder = new BASE64Decoder();

                     byte[] b = decoder.decodeBuffer(srcArr[1]);

                     for(int i=0;i<b.length;++i){

                         if(b[i]<0){//调整异常数据

                             b[i]+=256;

                         }

                     }

                     //文件名称

                           Calendar cal = Calendar.getInstance();

                           SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");

                           String filename = sdf.format(cal.getTime());

                           //图片保存路径

                     String filePath=fileUpLoadUrl+IMAGE_UPLOAD_PATH+"/"+filename+"."+fileSuffixes;

                     //图片访问路径

                           String fileurl=getPath(request)+fileVisitUrl+IMAGE_UPLOAD_PATH+"/"+filename+"."+fileSuffixes;

                     OutputStream out = new FileOutputStream(filePath); //生成图片 

                     out.write(b);

                     out.flush();

                     out.close();

                     JsonUtils.sendJson("{'success':true,'url':'"+fileurl+"'}", response);

                            }

                   } catch (Exception e1) {

                            e1.printStackTrace();

                            JsonUtils.sendJson("{'success':false}", response);

                   }

                  

         }

/**

          * 获取访问路径    http://192.168.2.84:8080

          * @param request

          * @return

          */

         private String getPath(HttpServletRequest request){

                    String scheme = request.getScheme();

        int port = request.getServerPort();

        String serverName = request.getServerName();

        String contextPath = "";//request.getContextPath();

        //请求路径

             String path = scheme + "://" + serverName+":"+ port + contextPath;

             return path;

         }

 

 

其中,访问路径需要在tomcat中配置,

如:保存路径  E://upload/img

访问路径   /view

<Context debug="0" docBase=" E:\upload\img " path="/ view " reloadable="false"/>

 


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ckeditor粘贴的图片自动上传 的相关文章

  • 一页中有多个 CKEditor5 - 性能问题

    我从后端收到一组对象 其中包含文本作为字段之一 我希望能够编辑该文本 到目前为止我有这样的事情 div div class card div class card header div class row some other input
  • 如何在CKeditor中添加音频标签

    我已经添加了html5audio插件并能够获取上传按钮 但如何将上传的文件发送到服务器 这是我的插件代码 id Upload hidden false filebrowser uploadButton label editor lang h
  • 像模板一样保存多个 CKEditor 内联编辑器字段的数据

    我正在建立一个模板系统 设计人员可以在其中提交 HTML5 设计并允许用户添加自己的内容 我正在为该应用程序使用 CKEditor 4 2 和 Rails 3 我希望用户能够加载模板页面 然后直接编辑各种内联编辑器 然后通过 JS 和 Aj
  • 使用 webpack 在 Laravel 5 中将插件安装到 CKEditor 5

    我在将插件安装到集成到 Laravel 5 6 的 CKEditor 时遇到了一个小问题 根据 CKEditor 文档的集成指南 我能够添加 ckeditor ckeditor5 build classic https www npmjs
  • 如何在CkEditor中右键单击添加附加菜单项?

    在CKeditor中 当我们右键单击图像时 会出现四个菜单项 cut copy paste image properties 我想再添加两个菜单项 test1 test2 gt subtest2 subtest3 test1 将是一个菜单
  • 如何设置CKEditor 5(经典编辑器)的高度

    在 CKEditor 4 中 有一个配置选项可以更改编辑器高度 配置高度 http docs ckeditor com api CKEDITOR config cfg height 如何更改 CKEditor 5 的高度 经典编辑器 回答我
  • 如何查看CK编辑器版本

    我的项目中有一个现有的 CK 编辑器文件夹 我怎样才能知道它的版本 有记录吗 只需在 config js 文件中发出如下警报 它就会给出值 alert CKEDITOR version 或者您可以直接在文件 ckeditor php4 ph
  • ckeditor“key”的使用 CKEDITOR.instances.editor.on('key', function (e){

    我意识到存在有关如何为 CKEDITOR 4 实现事件处理程序的问题 我可以使用此代码来获取按键按下数据 但我似乎无法在按键后获取数据 CKEDITOR instances editor on key function e document
  • 有谁知道 ckeditor 的拼写检查器插件使用 aspell 或类似的本地服务而不是pellchecker.net? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • CKEditor 安全最佳实践

    我在用http ckeditor com http ckeditor com 在我建立的一个小型 PHP MySQL 论坛中 我的问题 将用户创建的 HTML 像这样保存在数据库中然后在我的应用程序中重新显示它是否安全 我应该采取哪些预防措
  • 自定义 CKEditor 工具栏

    我想自定义CKEditor的工具栏 不过 首先我想要一个工具栏可用选项的完整列表 我搜索了工具栏选项并发现了以下不完整列表 请帮我找到完整的列表 以便我可以根据我的要求进行选择 config toolbar MyToolbar name d
  • 如何在CKEditor激活时在HTML5文本区域中显示占位符属性?

    我在 HTML5 网站中有一个文本区域 具有适当的占位符 示例文本 属性 在我通过 CKEditor 添加 RichText 支持之前 它显示得很好 CKEditor GUI 正在重新创建文本区域 并且不显示其中的占位符文本 有没有办法在
  • 使用 JavaScript 打开和关闭 CKEditor 4 内联编辑

    我需要能够使用按钮打开 关闭内联编辑 请参阅此处的内联编辑示例 http nightly v4 ckeditor com 3559 samples inlineall html http nightly v4 ckeditor com 35
  • 将我现有的富文本 UI 与 CKEditor API 结合使用

    我有一个现有的富文本 UI 我想将其与 CKEditor 一起使用 基本上 我希望 CKEditor 能够处理应用样式 格式 过滤和规范化插入内容的复杂部分 我现有的 UI 需要驱动交互并根据选择显示状态 即 选择粗体文本应反映在 UI 中
  • Struts 2 - 使用 CKEditor 拦截上传的图像文件

    我有一个CKEditor在网站的不同页面上 所以我将上传内容设置为true以及让它工作的所有配置内容 并且图像上传工作得很好 Send it to the Server 标签 但从这里我想拦截或互动upload函数能够将图像上传到文件夹中
  • 使用 jQuery 将光标位置处的文本插入到 CKEditor

    我正在尝试使用 jQuery 将一段文本添加到现有的 CKEditor 单击链接时需要完成此操作 我尝试了这个解决方案 它适用于常规文本区域 但不适用于 CKEditor jQuery fn extend insertAtCaret fun
  • CckEditor - 从 AJAX 加载的模板

    我正在使用 CkEditor 并且想要定义一个自定义模板 该模板使用 AJAX 函数来加载 HTML 字符串 我已经能够定义自定义模板 但如果我对模板对象的 html 属性使用函数 则该函数永远不会执行 是否可以使用 AJAX 和默认模板插
  • CKEDITOR.styleSet.add - 'a' 元素的新样式

    由于某种原因如果我改变 p to a 它不再出现在样式列表中 有什么理由吗 CKEDITOR stylesSet add default name Wys wiersza 1 element p styles line height 18p
  • 如何防止 CKEditor 将空格替换为?

    我面临一个问题CK编辑器4 http ckeditor com 我需要一个没有任何 html 实体的输出 所以我添加了config entities false 在我的配置中 但有些 nbsp 出现时 插入内联标签 前面的空格被替换为 nb
  • ckeditor - 未捕获类型错误:无法读取 null 的属性“图标”

    第一次尝试使用 ckeditor 时 ckeditor 可以工作 但是当我尝试添加 imageupload 和 uploadloadwidget 插件时 出现错误 未捕获的类型错误 无法读取 null 的属性 图标 有谁对可能造成这种情况的

随机推荐

  • 蛋白质组学数据的归一化/标准化处理

    1 前言 目的 调整由于技术 如处理 上样 预分 仪器等造成的样本间误差 这实际上是一种数据缩放的方法 一般在一个表达矩阵中 会涉及到多个样本 其表达量差异比较大 不能直接进行比较 比如某个样本表达量很大 在总体中就会占据绝对领导地位 这样
  • 邮件钓鱼的防守策略

    一 攻击背景 在历年的实战攻防演练中 人的漏洞是网络安全最大的脆弱点 而钓鱼攻击就是从内部攻破堡垒至关重要的手段 攻击者通过伪装成可信来源发送虚假邮件 诱导接收者点击恶意链接 提供敏感信息或执行恶意附件 从而获取机密信息或入侵系统 因此 在
  • MATLAB 之 基本概述

    文章目录 一 MATLAB 主要功能 1 数值计算功能 2 符号计算功能 3 绘图功能 4 程序设计语言功能 5 工具箱的扩展功能 二 MATLAB 操作界面 1 主窗口 2 命令行窗口 3 当前文件夹窗口 4 工作区窗口 5 搜索路径 三
  • [leetcode 周赛 149] 1154 一年中的第几天

    目录 1154 Day of the Year 一年中的第几天 描述 思路 代码实现 1154 Day of the Year 一年中的第几天 描述 给你一个按 YYYY MM DD 格式表示日期的字符串 date 请你计算并返回该日期是当
  • 【error】Lock wait timeout exceeded; try restarting transaction(mysql)事务锁

    目录 1 报错信息 2 解决方案 2 1 方案一 2 2 方案二 2 3 方案三 3 补充说明 3 1 三张表字段说明 原文链接 1 报错信息 背景 在做更新操作时 电脑重启了 重新运行mysql语句时报以下错误 报错信息 Lock wai
  • SQL中分组的一些用法group_concat

    分组查询 后面一篇文章我们将介绍MySQL的聚合函数 https blog csdn net qq 41453285 article details 88318318 group by通常与聚合函数放在一起使用 分组查询允许把数据分为多个逻
  • 高性能Mysql——分区表详解

    文章目录 分表和分区 分表和分区的区别 分表和分区联系呢 分区表分区方式 分区管理 分区表注意事项 分表和分区 分表 MySQL 的分表是真正的分表 一张表分成很多表后 每一个小表都是完整的一张表 都对应三个文件 一个 MYD数据文件 MY
  • html做群聊通讯方法,websocket学习和群聊实现

    WebSocket协议可以实现前后端全双工通信 从而取代浪费资源的长轮询 在此协议的基础上 可以实现前后端数据 多端数据 真正的实时响应 在学习WebSocket的过程中 实现了一个简化版群聊 过程和代码详细记录在这篇文章中 1 概述 1
  • 【转】JWT 登录认证及 token 自动续期方案解读

    转自 https mp weixin qq com s X6Xsxgbfvbf3JCa0i7q4 A 要实现认证功能 很容易就会想到 JWT 或者 Session 但是两者有啥区别 各自有什么优缺点 应该选择谁 JWT 和 Session
  • Java线程随笔

    目录 守护线程 线程可见性 线程时序性 线程的中断机制 守护线程 基本概念 守护线程可以简单理解为后台运行线程 守护线程不需要关心他的结束问题 java垃圾回收就是一个守护线程 例如你的应用程序运行时需要播放音乐 如果将播放音乐这个线程设置
  • iOS下XMPP开发之xmppFramework框架的导入步骤和介绍

    一个将要开发xmpp的项目 建议在项目刚创建就导入框架 这样可以避免一些自己操作失误造成不必要的损失 xmpp中最常用的框架就是 xmppFrameWork 第一种方法直接拖 1 gt 拖入文件夹 在网盘链接的xmppFramework文件
  • 【python手写算法】numpy实现简易神经网络和反向传播算法【1】

    import numpy as np def dense A W Z np matmul A W 矩阵乘法 return 1 1 np exp Z if name main leanring rate 100 A np array 200
  • 你真的懂JavaScript吗

    放在前面 本文原文的标题是 So you think you know JavaScript 在下感觉有些标题党了 不过看了下文章的链接还是很不错的 原文作者是由几个问题展开了说明 问题 1 浏览器的console里会打印出什么 var a
  • 黑客是如何获取足够的流量以支撑其发动DDOS攻击?

    对计算有一些了解的朋友可能都会知道DDoS是一种互联网最普及的攻击方式 也是一些黑客的初级入门的技巧 每一次进行大规模的DDoS的攻击 那打出来的流量都让人咂舌 动静大而且波及极为广阔 DDoS要的就是流量 大多数黑客基本上为获取流量而不择
  • 数字电路设计之verilog的门级描述

    使用verilog的数字电路设计 一般会有晶体管级的描述 门级描述 RTL 行为描述 我们接触得比较多的就是后面两种 前两种更少涉及 现在就说一下门级描述吧 门级描述就是使用各种逻辑门对组合逻辑进行描述 举个栗子 与或非门 这里的and o
  • Unity iPhoneX适配方案【NGUI&UGUI】

    本文作者旨在通过改锚点的方式 分别实现在NGUI和UGUI上的iPhone X适配技术方案 并结合自身项目经验 阐述了主要的实现细节 希望能对广大游戏开发团队有借鉴意义 适配来源 按照苹果官方人机界面指南 Apple 开发者中心 在iPho
  • python+django乡村居民数据的可视化平台

    本论文主要论述了如何使用Django框架开发一个乡村振兴数据的可视化平台 本系统将严格按照软件开发流程进行各个阶段的工作 采用B S架构 面向对象编程思想进行项目开发 在引言中 作者将论述乡村振兴数据的可视化平台的当前背景以及系统开发的目的
  • jsp验证码实现代码

    1 后台java代码 package com bobo base servlet import java awt Color import java awt Font import java awt Graphics import java
  • 哪个虚拟服务器免费,免费虚拟主机空间选择哪家会更好?

    虚拟主机在使用过程中需要提供比较大的空间 因为如果内存不足的话 会出现网站访问速度比较慢 或者直接卡顿和卡死的情况 当然现在市场中也有免费虚拟主机空间 大家在选择的时候就可以看看选择哪一家的虚拟主机空间效果会更好 或者在整体的使用性价比上更
  • ckeditor粘贴的图片自动上传

    环境 java springmvc freemaker ckeditor 在做项目的时候发现本地图片粘贴到ckeditor中 img标签的src中的值是 data image png base64 开头的 后面会跟一串字符串 图片越大字符串