对于文本编辑器来说,kindEditor是个不错的选择。
我们在输入文本时同时还需要插入一定的图片。
1、首先需要在页面导入kindEditor的相关js。官网:http://kindeditor.net/
只需要留下lang,plugins,themes文件夹和同级的4个js们。
2、页面引入<script type="text/javascript" src="${ctx}/js/kindeditor/kindeditor.js"></script>
3、文本域的相关属性设置,此处只允许输入文本和上传图片。
<textarea class="TextBox Required" style="width: 300px;height:100px;" name="veVenue.venue_brief" id="venue_brief" ></textarea>
<script type="text/javascript">
var options = {
filterMode : false,
items : ['justifyleft',
'justifycenter',
'justifyright',
'justifyfull', '|',
'bold', 'italic','underline','fullscreen','image'
],
afterBlur : function() {
this.sync();
},
themeType : 'oschina',
resizeType : 1,
shadowMode : false,
allowPreviewEmoticons : false,
allowUpload : true, //允许上传图片
allowImageUpload : true,
allowImageRemote : false,
uploadJson : '${ctx}/console/aaa/uploadImg'//上传路径
};
KindEditor.ready(function(K) {
window.editor = K.create('#venue_brief', options);
});
</script>
4、后台方法:
需要导入阿里巴巴开发的fastjson-1.1.28.jar和commons-io-1.4.jar
public void uploadImg() throws Exception{
//定义允许上传的文件扩展名
HashMap<String, String> extMap = new HashMap<String, String>();
extMap.put("image", "gif,jpg,jpeg,png,bmp");
extMap.put("flash", "swf,flv");
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");
Map result = new HashMap();
String dirName = getPara("dir")==null?"image":getPara("dir");
String realpath = getRequest().getRealPath("/upload");
UploadFile uf= getFile("imgFile",realpath);
String affix_id = "";
String affix_name = "";
if(uf!=null){
affix_name = uf.getFile().getName();
File file = uf.getFile();
//检查扩展名
String fileExt = affix_name.substring(affix_name.lastIndexOf(".") + 1).toLowerCase();
if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){
result.put("error", 1);
result.put("message", "上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。");
file.delete();
}else{
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
affix_id = df.format(new Date()) + "_" + new Random().nextInt(1000)+"."+fileExt;
File savefile = new File(new File(realpath),affix_id);
FileUtils.copyFile(file, savefile);
if(file.exists()){
file.delete();
}
result.put("error", 0);
result.put("url", JFinal.me().getContextPath()+"/upload/"+affix_id);
}
}else{
result.put("error", 1);
result.put("message", "请选择文件");
}
render(new JsonRender(JSON.toJSONString(result)).forIE());
}
分享到:
相关推荐
在“kindeditor上传视频、图片功能实现”中,我们将探讨如何利用KindEditor与Java后端配合,实现在网页上进行图片和视频的上传功能。 1. **KindEditor的图片上传功能**: KindEditor内建了图片上传的功能,用户...
标题 "基于kindeditor3.4的上传功能的JAVA实现" 指的是一个关于如何在Java后端实现KindEditor编辑器3.4版本中的文件上传功能的技术分享。KindEditor是一款开源的JavaScript富文本编辑器,它提供了丰富的API和功能,...
在技术实现层面,"KindEditor"很可能采用了HTML5的File API来实现图片的本地预览和上传功能,同时结合了AJAX技术进行后台数据传输,以确保用户在上传大量图片时的流畅体验。为了优化上传速度和服务器存储空间,可能...
这是本人写的一个基于KindEditor-4.1.9的Java项目,采用Struts2框架,实现了KindEditor单张图片上传、批量图片上传,可以上传到image目录下的子目录中,可返回上一级目录,并实现了按名称、大小、类型排序的功能。...
首先,我们来详细了解一下KindEditor 4.0的上传功能。在Web开发中,富文本编辑器的上传功能通常是必不可少的,它允许用户在编辑器内直接上传图片、文档或其他媒体文件,极大地提高了内容创作的便捷性。KindEditor ...
4. **插件**:`plugins`目录下的文件可能是实现Flash上传功能的具体插件代码,这些插件扩展了KindEditor的核心功能,提供了与Flash相关的操作界面和逻辑。 5. **皮肤和样式**:`skins`目录中的文件则负责编辑器的...
总的来说,KindEditor是一个强大而灵活的富文本编辑器,尤其适合那些需要集成图片和文件上传功能的ASP.NET Web应用。其易用性和丰富的功能使其成为许多开发者的首选。如果你在使用过程中遇到任何问题,社区和作者...
在H5版的KindEditor中,图片上传功能将基于HTML5的File API和FormData对象来实现,这使得用户无需Flash插件也能进行文件上传。 3. **File API**:这是HTML5引入的一套接口,允许JavaScript操作本地文件,包括读取、...
通过以上步骤,你可以在Flash不再被支持的情况下,使KindEditor的多图上传功能恢复正常。这个解决方案不仅适用于PHP环境,其他支持HTML5的服务器端语言(如Python、Node.js等)也可以参照执行,核心在于理解和利用...
在描述中提到的“添加第三方视频代码功能”,这意味着需要扩展KindEditor使其支持插入外部视频链接或者上传本地视频。这通常涉及解析视频链接,生成合适的嵌入代码(如iframe或video标签),并将其插入到编辑器中。...
在这个Demo中,KindEditor提供了图片上传功能。用户在编辑器中点击“插入图片”按钮后,可以选择本地图片进行上传。这个过程涉及到前端的文件选择和提交,以及后端的文件接收和存储。后端通常会使用MultipartFile...
vue 使用kindeditor粘贴复制图片上传给自己服务器,单独图片上传,避免用户到处寻找,解决了用户粘贴复制截图时候,图片变成base64,上传给后台的时候长度过于长,所以在粘贴的时候就上传给服务器,最后以形式显示在富...
本主题主要探讨如何在KindEditor中实现多图上传功能,并解决因移除Flash导致的选择图片按钮无法展示的问题,同时添加上传后的图片结果展示。 一、多图上传功能 多图上传是现代富文本编辑器必备的功能之一,它允许...
kindeditor单图上传功能结合input实现多图上传顺序自由可自由切换 1.可融合网页后端ASP,PHP,ASP.net等网页编程语言 2.上传插件调用kindeditor单图上传功能 3.上传一张一张上传,显示多图列表,图片之间利用箭头可...
通过以上步骤,你已经成功地在KindEditor中实现了图片上传携带token字段的功能。这个过程不仅增加了安全性,也展示了如何利用KindEditor的自定义功能扩展其默认行为,以适应特定的项目需求。记住,安全始终是Web开发...
KindEditor的上传功能是通过JavaScript与服务器端的交互实现的。当用户在编辑器中选择文件上传时,编辑器会触发一个异步请求,将文件信息发送到服务器。这个过程中,服务器端需要有一个接收并处理上传请求的脚本,...
本文将详细介绍如何正确配置kindEditor实现多图上传功能,并着重讲解容易出错的地方——主要是路径配置以及确保系统给予控件上传图片的权限。 #### 二、环境准备 在开始配置之前,请确保已经安装并正确引入了以下...
为了实现这一功能,开发者可能在KindEditor的原有代码基础上进行了以下改动: 1. 添加了图片上传事件监听,当用户选择图片上传时触发压缩操作。 2. 使用JavaScript图像处理库读取图片数据并进行压缩。 3. 压缩后的...
通过使用`<input type="file">`标签和拖放API,我们可以实现多文件选择和无刷新上传,同时兼容现代浏览器,提供更好的用户体验。 2. **添加第三方视频代码功能**: 在内容编辑中,有时需要插入来自YouTube、Vimeo...
KindEditor内置了图片上传功能,但可能需要根据具体需求进行定制。以下是实现步骤: 1. **配置服务器端**:KindEditor会将图片文件通过HTTP请求发送到服务器,因此你需要在服务器端(如PHP、ASP.NET或Node.js)编写...