前一阵子学完了Spring,SpringMVC,Mybatis,于是就想着做个小项目练练手,
思来想去还是觉得个人博客,一来做好之后可以用来记录些心得体会,二来之前闲置的云服务器也可以派上用场,下面就记录了自己碰到的一些困难和解决方法
既然是写个人博客,首先要考虑的肯定是使用哪个富文本编辑器,开始是想用百度的UEditor 的,毕竟有中文文档,肯定要好弄一些,后来看了下,还是觉得UEditor 不够美观,于是乎就使用了CKEditor,界面如下
然后第一只拦路虎就出现了,我该怎么实现上传图片,并将其显示在编辑框里呢?
按照官方文档的解释,这个时候我使用图像按钮只能实现url上传,不能本地上传,十分的麻烦
于是乎我就去百度本地上传的方法,然后,在经过配置文件上传地址,后台接受并将图片输出到指定文件等一系列操作,然后再输出一段js代码进行回显(以下即为输出的代码段),终于实现了上传………..
PrintWriter out = response.getWriter();
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",'" + imageContextPath + "',''" + ")");
out.println("</script>");
out.flush();
out.close();
但是!!!!只是可以上传,不能回显至编辑框,浏览器控制台打印服务器不正常响应,这段js代码未能正确执行,然后我就郁闷了,涉及到CKEditor内部的代码,我就真没辙了
好在天无绝人之路,我惊讶发现CKEditor有个配套的图片上传小框架….CKFinder
只要集成CKEditor和CKFinder很轻松的就能实现文件上传,回显等。
首先,官网下载CKFinder,我使用的版本是 ckfinder_java_2.6.2.1
地址:https://ckeditor.com/ckeditor-4/download/#ckfinder
注意选择Java版的
解压之后如下
再将 CKFinderJava-2.6.2.1.war 解压后进入 ckfinder 文件夹
将 ckfinder 文件夹粘贴至 webapp 下的 js 目录(自己建的)
由于之前CKEditor已经配置完成,所以引入ckfinder.js就OK
<script src="${pageContext.request.contextPath}/js/ckfinder/ckfinder.js"></script>
然后就是集成,按照官方文档的说法,有三种集成方式
我选择的是手动集成方式,当然你也可以选择自动集成,在CKEditor文件夹中
找到config.js,添加如下代码段
注意,这里的 js/ckfinder/ckfinder.htm l中的js是我的ckfinder所放的目录,注意修改
//上传设置
config.filebrowserBrowseUrl = 'js/ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = 'js/ckfinder/ckfinder.html?type=Images';
config.filebrowserFlashBrowseUrl = 'js/ckfinder/ckfinder.html?type=Flash';
config.filebrowserUploadUrl = 'js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';
如果成功,则在URL栏的右侧会出现浏览服务器按钮,当然,现在还没配置完,打不开服务器
然后将CKFinderJava-2.6.2.1.war解压后得到的config.xml拷贝到WEB-INF目录下,
修改名字为 ckfinder.xml
然后扎web.xml 最后加上如下代码
<!-- ckfinder -->
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
<init-param>
<description>
Path to configuration file can be relative path inside application,
absolute path on local file system or UNC path.
</description>
<param-name>XMLConfig</param-name>
<!--注意,这里要修改路径 -->
<param-value>/WEB-INF/ckfinder.xml</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern>
<!--注意,这里要修改路径 -->
/js/ckfinder/core/connector/java/connector.java
</url-pattern>
</servlet-mapping>
还需要引入ckfinder需要的jar包,jar包在CKFinderJava-2.6.2.1.war解压后的WEB-INF/lib目录下,根据需要引入相关的jar,CKFinder-2.6.2.1.jar是必须的,上传文件需要commons-fileupload-1.2.2.jar,和commons-10-2.0.jar,图片缩放需要thumbnailator-0.4.8.jar,其他jar包根据需要自行引入即可。
然后将ckfinder.xml文件的15行修改,否则不能浏览文件
<enabled>true</enabled>
完成后重启服务器,输入地址
点击图像的浏览服务器之后,就会出现服务器页面
这样就能上传图片,并从服务器中获取图片了。
默认上传的文件被放在web容器webapps\ROOT\CKFinderJava\userfiles
如果想更改路径,打开 ckfinder.xml,修改21行的
<baseURL>Blog/picture/CKFinderJava/userfiles/</baseURL>
至此,完成图片上传和回显
参考博客:https://blog.csdn.net/frankcheng5143/article/details/50907013