一般在做新闻页面的时候,可以使用此类的编辑器,如图:
首先下载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
保存图片的代码,相信大家已经会了。
为了使图片不重名,我这里的处理是将所有的图片传上来之后,全部重命名日期格式
这里的代码最重要的是:
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结合使用上传文件.