SpringMVC+ckeditor文本编辑并上传图片（1）

机器矩阵 2017-01-31 20:10

一般在做新闻页面的时候，可以使用此类的编辑器，如图：

可视化编辑文本效果图

首先下载ckedit包，为了大家方便，我存到百度云上了。地址是：

链接：http://pan.baidu.com/s/1nvudRJz 密码：nvcr

下载后，只使用ckeditor_sdk\vendor\ckeditor文件夹里面的内容。

文件路径

皮肤只保留了默认的moono-lisa文件夹，语言其实也只需要中文和英文，其他都可以删除。

在ckedit.jsp文件中加入：

<textarea id="content" name="content" cols="20" rows="2" class="ckeditor"></textarea>

然后在后面加上：

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

<script type="text/javascript">

var editor = CKEDITOR.replace('content', {

"filebrowserUploadUrl" : "<%=basePath %>upload/ckeditImg.do?id=${param.id}",

uiColor: '#ffffff', //工具栏默认白色

enterMode :CKEDITOR.ENTER_BR //换行直接加br

});

function save(){

editor.updateElement(); //非常重要的一句代码

//前台验证工作

//提交到后台

return true ;

}

</script>

这样之后，访问ckedit.jsp就可以出现上图的界面了。

注意上面代码有一句加粗的代码，那是文件上传的地址，这也是重点：

如图，可在文字中加入图片

点击上传

选择文件，可以选择多个文件

此处可以选择多个文件上传。

下面来看看后台java代码，这里使用的是springMVC。

upload/ckeditImg.do

以上为关键代码

以上为后台验证图片格式的代码

保存图片的代码，相信大家已经会了。

为了使图片不重名，我这里的处理是将所有的图片传上来之后，全部重命名日期格式

将文件直接重命名

此处代码需要熟悉springMVC上传文件

这里的代码最重要的是：

out.println("<script type=\"text/javascript\">");

//upload是tomcat虚拟路径

out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'/upload/" + imageName + "',''" + ")");

out.println("</script>");

就算不使用springMVC，此段代码必须要有，也就是要返回给前段的地址。

点击上传到服务器就会自动返回到预览界面

这个时候可以调整一下，点击确认就可以了。

这样的成功了。

就这样还比较简单。如果只是简单的需求这样完全足够了.如果是复杂的需求,那么需要ckedit+ckfinder结合..

我将jsp和java代码上传了。可以下载了。

链接：http://pan.baidu.com/s/1jIDMKtw 密码：9ww5

有问题可以留言，或者关注机器矩阵公众号.

明天分享ckedit+ckfinder结合使用上传文件.