<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">最近用到文本编辑器CKEditor标准版,但是默认是没有上传图片和文件的,下面是自己的一些修改总结</span>
1、http://ckeditor.com/download 下载Standard Package版本
2、下载文件解压后放到webapp/js目录下面
3、config.js添加两行属性
config.image_previewText=' '; //预览区域显示内容
config.filebrowserImageUploadUrl= "/file/uploadToJss"; //待会要上传的action或servlet
4、页面引用如下
<pre name="code" class="html"> <div class="form-group col-lg-12">
<label for="content" class="col-sm-2 control-label">
内容:
</label>
<div class="col-sm-10">
<textarea id="content" name="content">$!{article.content}</textarea>
</div>
</div>
<script type="text/javascript">
$(function(){
initCkEditor();
});
/** 初始化编辑器 */
function initCkEditor() {
CKEDITOR.disableAutoInline = true;
CKEDITOR.replace("content");
}
</script>
5、 springmvc配置上传文件支持
<!-- 上传文件拦截,设置最大上传文件大小 10M=10*1024*1024(B)=10485760 bytes -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="10485760" />
</bean>
6、上传文件的实现
@Controller
@RequestMapping(value = "/file")
public class FileController {
private static final Logger LOG = LoggerFactory.getLogger(FileController.class);
/*
* 上传图片或者文件
* 上传到云端,再回调CKEditor填写地址输入框
*/
@RequestMapping(value = "/uploadToJss")
public String uplodaImg(@RequestParam("upload") MultipartFile file,//
HttpServletRequest request, //
HttpServletResponse response) throws Exception {
String fileName = StringUtils.lowerCase(file.getOriginalFilename());
String logName = "通过CKEditor上传文件" + fileName;
LOG.info(logName + "开始");
// 上传文件到云端
<pre name="code" class="java"><span style="white-space:pre"> </span>// TODO 此处为文件上传到哪个位置<span style="font-family:Arial, Helvetica, sans-serif;">,并返回地址,自定义实现</span>
<span style="white-space:pre"> </span>String uploadHttpUrl = ;
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String callback = request.getParameter("CKEditorFuncNum");
// 返回"图像"选项卡并显示图片 request.getContextPath()为web项目名
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + uploadHttpUrl + "','')");
out.println("</script>");
LOG.info(logName + "结束");
return null;
}
}