KindEditor上传图片和修改图片

article/2025/9/24 11:10:07

1.首先就是下载KindEditor（这里是官网的地址）
2. 部署编辑器
解压 kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里，例如：http://您的域名/editor/

Note
您可以根据需求删除以下目录后上传到服务器。
asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件

3 修改HTML页面
在需要显示编辑器的位置添加textarea输入框。

 <textarea id="describe" name="describe" style="width:100%;"></textarea>

Note
id在当前页面必须是唯一的值。
在textarea里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容，则必须转换HTML特殊字符(>,<,&,”)。具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。
在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。宽度和高度可用inline样式设置，也可用 编辑器初始化参数 设置。

4在该HTML页面添加以下脚本。

 <link rel="stylesheet" href="<%=path%>/js/kindeditor-master/themes/default/default.css" /><script charset="utf-8" src="<%=path%>/js/kindeditor-master/kindeditor-all-min.js"></script><script charset="utf-8" src="<%=path%>/js/kindeditor-master/lang/zh-CN.js"></script>

具体的地址更具地址的路径来
5 初始化

 var editor;KindEditor.ready(function(K) {editor = K.create('textarea[name="describe"]', {minHeight:'350px',allowFileManager : true,uploadJson : '<%=path%>/tIg/uploadOK',afterUpload: function(){this.sync();}, //图片上传后，将上传内容同步到textarea中afterBlur: function(){this.sync();},   失去焦点时，将上传内容同步到textarea中})});

编辑器的内容是可以自己选择的，根据自己的十几需求来，我就是全部需求，不做修改，这里不多做解释

[
‘source’, ‘|’, ‘undo’, ‘redo’, ‘|’, ‘preview’, ‘print’, ‘template’, ‘code’, ‘cut’, ‘copy’, ‘paste’,
‘plainpaste’, ‘wordpaste’, ‘|’, ‘justifyleft’, ‘justifycenter’, ‘justifyright’,
‘justifyfull’, ‘insertorderedlist’, ‘insertunorderedlist’, ‘indent’, ‘outdent’, ‘subscript’,
‘superscript’, ‘clearhtml’, ‘quickformat’, ‘selectall’, ‘|’, ‘fullscreen’, ‘/’,
‘formatblock’, ‘fontname’, ‘fontsize’, ‘|’, ‘forecolor’, ‘hilitecolor’, ‘bold’,
‘italic’, ‘underline’, ‘strikethrough’, ‘lineheight’, ‘removeformat’, ‘|’, ‘image’, ‘multiimage’,
‘flash’, ‘media’, ‘insertfile’, ‘table’, ‘hr’, ‘emoticons’, ‘baidumap’, ‘pagebreak’,
‘anchor’, ‘link’, ‘unlink’, ‘|’, ‘about’
]

这里写图片描述

6上传图片

 var editor;KindEditor.ready(function(K) {editor = K.create('textarea[name="describe"]', {minHeight:'350px',allowFileManager : true,uploadJson : '<%=path%>/tIg/uploadOK',afterUpload: function(){this.sync();}, //图片上传后，将上传内容同步到textarea中afterBlur: function(){this.sync();},   失去焦点时，将上传内容同步到textarea中})});

uploadJson 后面就是你在后台处理的地址

@RequestMapping(value="uploadOK")public @ResponseBody String uploadOK(@RequestParam("imgFile") CommonsMultipartFile[] files, HttpServletRequest request, Map<String, Object> model, HttpServletResponse response){JSONObject jb=new JSONObject();jb.put("error", 0);//文件保存目录路径//定义允许上传的文件扩展名HashMap<String, String> extMap = new HashMap<String, String>();extMap.put("image", "gif,jpg,jpeg,png,bmp");extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");//最大文件大小long maxSize = 1024 * 1024 *2;if(!ServletFileUpload.isMultipartContent(request)){jb.put("error", 1);jb.put("message", "请选择文件");return jb.toJSONString();}String dirName  =request.getParameter("dir");if (dirName == null) {dirName = "image";}if(!extMap.containsKey(dirName)){jb.put("error", 1);jb.put("message", "目录名不正确");return jb.toJSONString();}try {if (files!=null&&files.length>0) {for (CommonsMultipartFile commonsMultipartFile : files) {Map upload = mySftp.upload(commonsMultipartFile);jb.put("error", 0);jb.put("message", "上传成功！");jb.put("url",返回的一定要是绝对的路径);return jb.toJSONString();}}} catch (Exception e1) {jb.put("error", 1);jb.put("message", e1.getMessage());return jb.toJSONString();}return jb.toJSONString();}

切记返回的一定会是图片的绝对路劲 不然是编辑器里面是显示不出来的 应为他找不到图片在哪里
使用的是sftp上传 贴出代码

    public Map upload(MultipartFile oldFile) {Map<String, String> map = new HashMap<String, String>();// 验证是否登陆成功if (!connectLogin()) {logger.info("sftp服务器登录失败！");map.put("info", "sftp服务器登录失败！");return map;}String oldName = oldFile.getOriginalFilename();String type = oldName.substring(oldName.lastIndexOf(".") + 1);// 获取后缀名if (oldFile != null) {if (type != null) {if (("GIF".equals(type.toUpperCase()) || "PNG".equals(type.toUpperCase())|| "JPG".equals(type.toUpperCase()) || "JPEG".equals(type.toUpperCase()))) {String trueName = System.currentTimeMillis()+ Math.random() * 10 + "." + type; // 随机数作为名称File file = new File(trueName);try {sftp.cd(ftpConfig.getFtpPath());InputStream inputStream = oldFile.getInputStream();sftp.put(inputStream, file.getName());map.put("path", trueName);map.put("info", "图片添加成功");return map;} catch (Exception e) {e.printStackTrace();}}} else {map.put("info", "格式不正确");return map;}} else {map.put("info", "文件夹为空！！！");return map;}return null;}

ok 上传就可以了

然后是整个form表单的提交，使用的是FormData

  $scope.processForm = function(){var flag = $("#myForm").valid();var formData = new FormData($("#myForm" )[0]);if(flag){$.ajax({url: '<%=path%>/tIg/tIg_add?oper=1' ,type: 'POST',data: formData,async: false,cache: false,contentType: false,processData: false,success: function (data) {var info =  $.parseJSON(data);var msg = info.msg;if(msg == "true"){var curId = window.parent.document.getElementById("curId").value;var listWin = window.parent.document.getElementById("iframe"+curId);var scope = listWin.contentWindow.angular.element('#Job_list').scope();scope.searchList();top.layer.alert(info.msgInfo, {icon: 6});$("#btnmysave").addClass(" disabled");$("#btnmysave").attr("disabled","disabled");$scope.myreadonly = true;$scope.myreadonly = true;}else{top.layer.alert(info.msgInfo, {icon: 6});}}});}}

后台正常的接受就是了 ，编辑器里面的图片都会换成img 标签存放在数据库，下面就是一个样本

<img src="http://api.map.baidu.com/staticimage?center=121.473704%2C31.230393&zoom=11&width=558&height=360&markers=121.473704%2C31.230393&markerStyles=l%2CA" alt="" /><img src="http://localhost:8080/js/kindeditor-master/plugins/emoticons/images/10.gif" border="0" alt="" /><img src="http://localhost:8080/js/kindeditor-master/plugins/emoticons/images/13.gif" border="0" alt="" />3333333333333333333333333333333

最后就是修改页面的照片显示问题了，有的是可以直接显示但是有的因为页面加载的问题不可以显示出来，请先确实页面是否可以取到值，确认可以但是编辑器拿不到值的话 可以这样是试一下（初始化文本编辑器和之前的一样复制过来就可以了）

$scope.url = "<%=path%>/tIg/tIg_edit?oper=1&id="+$scope.id;$http.post($scope.url).success(function(data){var msg = data.msg;if(msg == "true"){$scope.tIg = data.record;$scope.tts = data.tIgts;
// 设置HTML内容editor.html($scope.tIg.describe);}else if(msg == "norecord"){alert(data.msgInfo);}});

editor.html($scope.tIg.describe);请求获取到数据之后 手动的设置数据
希望帮到大家！！


http://chatgpt.dhexx.cn/article/2VQgKgAp.shtml

相关文章

kindeditor php 上传错误,kindeditor 上传图片失败,该怎么解决

kindeditor php 上传错误,kindeditor 上传图片失败,该怎么解决

本帖最后由 nxgg8 于 2014-05-29 12:44:04 编辑 编辑器版本&#xff1a;KindEditor 4.1.10 php框架&#xff1a;ThinkPHP3.2.2 这是html页面中引用编辑器配置 上传图片的时候出问题,不管是单张图片&#xff0c;还是批量。都会提示以下信息&#xff0c;返回的图片路径是正确的&a…
阅读更多...
Kindeditor的简单使用以及图片上传

Kindeditor的简单使用以及图片上传

详细的笔者也不是特别懂&#xff0c;但是基本的使用还是会的 首先到官网下载相应的插件http://kindeditor.net/down.php&#xff0c;下载完的文件打开后是这样的&#xff0c;看着有点多 但是我们只取出需要的&#xff0c;只有这么一点&#xff0c;复制到项目下&#xff0c;取名…
阅读更多...
KindEditor上传图片及使用

KindEditor上传图片及使用

本文为原创&#xff0c;只为互相学习&#xff01; 主页:写程序的小王叔叔的博客欢迎来访&#x1f440; 支持:点赞收藏关注 社区:JAVA全栈进阶学习社区欢迎加入​​​​​​​ 编辑器使用 1&#xff09;官网&#xff1a;在线HTML编辑器 2&#xff09;使用 如果在编辑器中&#…
阅读更多...
KindEditor上传本地图片

KindEditor上传本地图片

自己动手配置了一下KindEditor文本编辑器上传本地图片的功能&#xff0c;不需要动手写action&#xff0c;相关详细配置和代码如下。 我用的是KindEditor 4.1.10的版本&#xff0c;需要用到的童鞋去下载对应的版本。 1.↓↓↓这个插件里面需要手动配置的两个重要的jsp文件。 …
阅读更多...
kindeditor4.1.10图片上传配置及使用说明

kindeditor4.1.10图片上传配置及使用说明

1效果展示 1.1 点击图片上传按钮 1.2 弹出选择框，可以从已上传的图片中选择上传，也可以从本地上传。 1.3选择从图片空间上传，文件夹模式浏览所有已上传的图片 1.4从本地选择图片上传 1.5上传效果 1.6 上传路径： WebRoot/upload/image 2-1：kindeditor-4.1.10版本插件 2-2：…
阅读更多...
onpaste事件的浅谈

onpaste事件的浅谈

今天看书的时候&#xff0c;偶然看到onpaste的这个属性所以记录下来&#xff0c;为以后查阅而用&#xff1a; 具体的用法是<input type“text” οnpaste"function ***"/>&#xff0c;标签只是用来做说明并不是非得是input标签 虽然是触发的条件是&#xff1…
阅读更多...
手机html粘贴事件,详解浏览器中的粘贴事件 paste onpaste 事件

手机html粘贴事件,详解浏览器中的粘贴事件 paste onpaste 事件

在最新的H5 API里已经有了对粘贴事件的支持, 事件名为paste, 平时用的较少,但最近想做一个粘贴板管理器,于是就调研了一下这个粘贴,复制事件. 那么调研的第一步是什么那? 当然是百度了,但高手都不百度,直接控制台调试 创建一个id为editor的文本域, 为其添加一个paste事件的…
阅读更多...
onkeyup事件，onpaste事件，完成实时表单验证

onkeyup事件，onpaste事件，完成实时表单验证

先上效果图&#xff1a; input框&#xff0c;用户输入值的方式就两种&#xff0c;一种是键盘输入&#xff0c;一种是鼠标粘贴。onkeyup事件可以在键盘输入的时候绑定事件&#xff0c;onpaste"return false"&#xff0c;设置不允许粘贴。 onkeyup进行表单验证的优…
阅读更多...
利用JavaScript从剪贴板获取图片并上传服务器

利用JavaScript从剪贴板获取图片并上传服务器

1、参考&#xff1a; 使用 JavaScript File API 实现文件上传FileReader.readAsDataURL()基于Servlet3的文件上传中的示例2&#xff1a;基于JQuery的单文件上传 2、onpaste 剪贴板事件 onpaste 事件在用户向元素中粘贴文本时触发。有三种方式可以在元素中粘贴内容&#xff1…
阅读更多...
Internet协议的安全性

Internet协议的安全性

网际层 安全问题 1.IP数据报在传递过程中被窃取 措施&#xff1a;读ip数据报进行加密 2.数据净荷可能被截取后修改 措施&#xff1a;对ip数据净荷进行完整性检测 3. 攻击者发送伪造源地址数据包欺骗接收者&#xff0c;也称为ip欺骗 措施&#xff1a;对数据包的源地址鉴别 4. A…
阅读更多...
winget InternetOpenUrl() failed. 0x80072f7d

winget InternetOpenUrl() failed. 0x80072f7d

今天使用 winget 安装东西的时候提示&#xff1a; 尝试更新源时失败&#xff1a; winget 执行此命令时发生意外错误&#xff1a; InternetOpenUrl() failed. 0x80072f7d : unknown error对于我而言是因为其他原因关闭了 tls 1.2&#xff0c;在控制面板->网络和 Internet-&g…
阅读更多...
Internet网际协议 --- IP地址

Internet网际协议 --- IP地址

IP地址 一.IP地址简介二.分类IP地址三.IP子网划分与子网掩码四.无类域间路由CIDR五.路由聚合六.IP包转发 一.IP地址简介 1.IP地址&#xff0c;网络上的每一台主机&#xff08;或路由器&#xff09;的每一个接口都会分配一个全球唯一的32位的标识符。 2.将IP地址划分为固定的类…
阅读更多...
HTTP-web-Internet

HTTP-web-Internet

互联网&#xff08;Internet&#xff09; 互联网&#xff1a;将全球计算机互联在一起的网络。目前最流行的实现协议是TCP/IP。 万维网&#xff08;WWW&#xff09; 万维网&#xff1a;基于HTTP协议实现全球性、动态交互、跨平台的分布式图形信息系统。是互联网上应用最为广泛的…
阅读更多...
internet协议

internet协议

1&#xff1a;引言 IP时TCP/IP中的核心协议IP提供了一种尽力而为&#xff0c;无连接的数据报交付服务 2&#xff1a;IP头部 正常的IPV4头部大小为20字节。除非存在选项&#xff08;少见&#xff09;IPV6的长度是40字节&#xff0c;没有选项字段&#xff0c;IPV6有扩展头部 …
阅读更多...
Internet网际协议---IPv4协议

Internet网际协议---IPv4协议

IPv4协议 一.IPv4协议简介二.IPv4数据报格式&#xff08;由首部和数据组成&#xff09;三.数据报分片与重组四.IP协议功能及报头字段总结 一.IPv4协议简介 1.IPv4协议&#xff1a;网际协议版本4&#xff0c;一种无连接的协议&#xff0c;是互联网的核心&#xff0c;也是使用最…
阅读更多...
网络Internet

网络Internet

前言 加油 原文 网络常用会话 ❶ This online store discounted all computers for sale. 该网店削价出售全部待售的电脑。 ❷ The latest laptop is very portable. 最新的这款笔记本很便携。 ❸ Add up the figures in this column. 把这一栏的数字合计一下。 ❹ Consu…
阅读更多...
Internet协议——IP

Internet协议——IP

IP Internet协议——IPIP协议与tcp/IP的关系IP地址的表示IP地址的特点地址转换——ARP反向地址转换——RARP计算子网掩码 IP数据报的格式IP数据报首部的固定部分 Internet协议——IP IP&#xff1a;通信子网的最高层。提供无连接的数据报传输机制。IP协议是点到点&#xff0c;…
阅读更多...
InternetOpen InternetOpenUrl InternetReadFile 和 InternetCloseHandle

InternetOpen InternetOpenUrl InternetReadFile 和 InternetCloseHandle

文章目录 InternetOpen函数功能函数声明第一个参数第二个参数第三个参数第四个参数第五个参数返回值补充&#xff1a;InternetOpenUrl函数功能函数声明第一个参数第二个参数第三个参数第四个参数第五个参数第六个参数返回值补充补充InternetReadFile函数功能函数声明第一个参数…
阅读更多...
juniper设备日常操作指南

juniper设备日常操作指南

1、日常show操作 # show 查看所有配置 # show | display set 查看set格式的所有配置 # show system | display set 查看set格式的system层级配置 # show system login | display set 查看set格式的system层级下的login层级配置# run show version # run show route 1.1.1.…
阅读更多...
这几个juniper巡检命令超实用

这几个juniper巡检命令超实用

1. CPU利用率核查 show chassis routing-engine2. MEM利用率核查 show chassis routing-engine3. OSPF邻居关系核查 show ospf neighbor4. LDP端口状态检查 show ldp interface5. ISIS邻居关系检查 show isis adjacency6. BGP邻居关系检查 show bgp neighbor7. HSRP信息检…
阅读更多...
推荐文章

Copyright @ 2022~2023