富文本编辑器--FCKEditor 上传图片
FCKEditor的最新版本已经更改名称为CKEditor;
1、在页面引入fckeditor目录下的fckeditor.js
<script type="text/javascript" src="./fckeditor/fckeditor.js"></script>
<script type="text/javascript" src="./common/js/jquery.js"></script>
2、JSP的文件
<script type="text/javascript">
$(function()
{
var fck = new FCKeditor("productdesc"); //创建对象(参数为要替代的textarea标签的name或id属性)
fck.BasePath = "./fckeditor/"; //指定fckeditor的路径最后面,注:必须加'/'
fck.Height = 400 ;
fck.Config["ImageUploadURL"] = "/upload/uploadFck.do"; //上传图片的Controller的URL
fck.ReplaceTextarea(); //创建编辑器
});
</script> <div>
<textarea rows="20" cols="180" id="productdesc" name="description"></textarea>
</div>
3、后台Controller的代码
//上传Fck的图片
@RequestMapping(value = "/upload/uploadFck.do")
@ResponseBody
public void uploadPics(HttpServletRequest request, HttpServletResponse response) throws Exception
{
//FCK的上传没有文件的名字, 只要文件上传到后台, 肯定存在于 HttpServletRequest 中
//Spring提供了 MutipartRequest 对原生态的 request进行强转; 强转后生成的 MutipartRequest 只有图片的信息
MultipartRequest multipartRequest = (MultipartRequest) request; Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
for(Entry<String, MultipartFile> entry : fileMap.entrySet())
{
MultipartFile pic = entry.getValue(); //上传上来的图片 String path = uploadService.uploadPic(pic.getBytes(), pic.getOriginalFilename(), pic.getSize());
String url = Constants.IMAGE_URL + path; //全路径 //返回全路径给FCK, fck-core.2.6.jar --> java-core.2.6.jar
UploadResponse uploadResponse = UploadResponse.getOK(url); response.getWriter().print(uploadResponse);
}
}
参考:http://blog.csdn.net/zhao13083837081/article/details/52846640
富文本编辑器--FCKEditor 上传图片的更多相关文章
- vue-quill-editor富文本编辑器,上传图片自定义为借口上传
vue-quill-editor富文本编辑器,上传图片自定义为借口上传 博客地址:https://blog.csdn.net/lyj2018gyq/article/details/82585194
- bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片
bootstrap-wysihtml5 ckeditor 修改富文本编辑器可以上传图片 bootstrap-wysihtml5实际使用内核为ckeditor 故这里修改ckeditor即可 ...
- 在线富文本编辑器FckEditor配置(.Net Framework 3.5)
进入FCKeditor文件夹,编辑 fckconfig.js 文件.1.上传设置 . var _FileBrowserLanguage = 'php' ; // a ...
- 富文本编辑器 - wangEditor 上传图片
效果: . 项目结构图: wangEditor-upload-img.html代码: <html> <head> <title>wangEditor-图片上传< ...
- KindEditor - 富文本编辑器 - 使用+上传图片
代码高亮:http://www.cnblogs.com/KTblog/p/5205214.html 效果: 项目结构: Extend:存放各种扩展 BlogAction.class.php:博文模块 ...
- 百度富文本编辑器Ueditor上传图片时标签中添加宽高
ueditor.all.js中:直接搜索callback() function callback(){ try{ var link, json, loader, body = (iframe.cont ...
- 在java项目中加入百度富文本编辑器
富文本编辑器在项目中很常见,他可以将文本,图片等信息存入数据库,在编辑一些图文混排的信息的时候很有用,比如商城项目的商品详情页,包含很多带有样式的文字和图片. 此前一直使用的百度的富文本编辑器uedi ...
- (转)淘淘商城系列——KindEditor富文本编辑器的使用
http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...
- (转)学习淘淘商城第二十二课(KindEditor富文本编辑器的使用)
http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...
随机推荐
- unity 随笔
转载 慕容小匹夫 从游戏脚本语言说起,剖析Mono所搭建的脚本基础 深入浅出聊优化:从Draw Calls到GC 谁偷了我的热更新?Mono,JIT,IOS JS or C ...
- Redis入门及主从配置
1.Redis入门简介 Redis是一个开源的使用ANSI C语音编写.支持网络.可基于内存亦可持久化的日志型,Key-Value数据库.支持存储的value类型包括 string(字符串).list ...
- vue如果是首页了 不让其后退
history.pushState(null, null, document.URL); //首页加载时候先置空 window.addEventListener('popstate', functio ...
- python远程操作服务器
python远程控制 标签(空格分隔): 远程Linux python远程控制:方案: Paramiko Pexpect(主要Linux机器) 安装Paramiko pip install param ...
- 自定义sql server 聚合涵数
using System; using System.Data; using System.Data.SqlClient; using System.Data.SqlTypes; using Micr ...
- python学习day4 数据类型 if语句
1.变量的内存管理 cpython解释器垃圾回收机制 什么是垃圾,当一个值身上没有绑定变量名时,(该值的引用计数=0时)就是一个垃圾 age=18 #18的引用计数=1 x=age #18的引用计数 ...
- Access sql语句创建表及字段类型(转)
http://www.cnblogs.com/hnyei/archive/2012/02/23/2364812.html 创建一张空表: Sql="Create TABLE [表名]&quo ...
- Android创建和删除桌面快捷方式
有同学方反馈创建快捷方式后,点击快捷方式后不能启动程序或者提示"未安装程序",貌似是新的rom在快捷方式这块做过修改(由于此文是11年5月所出,估计应该是2.0或2.1的rom), ...
- 二叉树中和为某一值的路径(python)
题目描述 输入一颗二叉树的跟节点和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径.(注意: 在返回值的list中,数组长度大 ...
- 替换空格(python)
题目描述 请实现一个函数,将一个字符串中的每个空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. # -*- coding:ut ...