CKEditor实现图片上传

               

本人用的 CKEditor版本为4.3  CKEditor 配置和部署参考 CKEditor4.x部署和配置。

CKEditor编辑器的工具栏中初始的时候应该是这样子的，没有图片上传按钮

并且预览中有一堆火星文，可以修改相应配置删除它。

第一种方法： 打开ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image_previewText”，(b.config.image_previewText||'')单引号中的内容全删了，注意别删多了。(由于ckeditor的很多js文件都是压缩过的，格式很难看，很容易删错，所以不推荐此种方法)

第二种方法：打开config.js文件，加入下面一句话

config.image_previewText=' '; //预览区域显示内容

下面研究图片上传

要想出现上传按钮，两种方法

第一种：还是刚才那个image.js
搜索“upload”可以找到这一段 id:'Upload',hidden:true，而我使用的4.3的是

id:"Upload",hidden:!0，反正改为false就行了，(遗憾的是此种方法对我这个版本不起作用)

第二种：打开config.js文件，加入下面一句话

config.filebrowserImageUploadUrl= "admin/UserArticleFileUpload.do"; //待会要上传的action或servlet

OK现在基本上是下面这个样子的了

上面的只是一个上传页面。也就相当于一个HTML的form表单，

要配置点击"上传到服务器上"按钮后请求的Action。已在ckeditor/config.js中配置。

就是上面的 config.filebrowserImageUploadUrl = "admin/UserArticleFileUpload.do";

可使用chrome审查元素查看代码

接下来就是action中的上传方法：