CKEditor标准版添加上传图片和文件

<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;
    }
}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值