CKEditor结合原生的servlet实现图片上传及预览

最新推荐文章于 2021-03-19 12:08:41 发布

今日相乐，皆当喜欢

最新推荐文章于 2021-03-19 12:08:41 发布

阅读量651

点赞数

分类专栏：总结文章标签： ckeditor 编辑器图片上传

本文链接：https://blog.csdn.net/weixin_42687829/article/details/89003349

版权

总结专栏收录该内容

24 篇文章 0 订阅

订阅专栏

CKEditor其实不需要多介绍，最早之前叫FCKEditor，后面改名了，是一个富文本编辑器。

CKEditor4.4.6标准版下载地址：

http://download.cksource.com/CKEditor/CKEditor/CKEditor 4.4.6/ckeditor_4.4.6_standard.zip

1、CKEditor的使用

在页面<head>中引入ckeditor核心文件ckeditor.js

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

在使用编辑器的地方插入HTML控件<textarea>

<textarea class="ckeditor" id="content" name="content"></textarea>

弄好之后看下效果：

图片上传界面效果：

这个效果根本就没有选择图片的按钮，因为ckeditor默认是不显示的，而且预览框里还有一大串英文。

2、修改相应配置使想要的效果出现

使选择图片按钮出现

打开ckeditor文件夹下的config.js文件，加入下面一句话：

//上传图片路径(双引号里是上传的action或servlet)
config.filebrowserImageUploadUrl = "userAction.action?methodName=uploadImage";

去掉预览框里的英文

打开ckeditor文件夹下的config.js文件，加入下面一句话：

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

再看效果：

上图是一个上传页面，也就相当于一个HTML的form表单，需要配置点击"上传到服务器"按钮后请求的Action，在ckeditor/config.js中进行配置，即上面的config.filebrowserImageUploadUrl = "userAction.action?methodName=uploadImage";

3、后台上传图片功能实现

action层代码：

/**
 * CKeditor中的上传图片
 * @author LJ
 * @Date 2019年4月3日
 * @Time 下午12:10:15
 * @param request
 * @param response
 * @throws Exception
 */
public void uploadImage(HttpServletRequest request, HttpServletResponse response) throws Exception {
	FileItemFactory factory = new DiskFileItemFactory();
	ServletFileUpload upload = new ServletFileUpload(factory);
	List<FileItem> items = upload.parseRequest(request);
	Iterator<FileItem> itr = items.iterator();
	String fileName = "";//新生成的文件名
	//浏览器访问图片的映射地址
	String serverDir = "/uploadImages/";

	while (itr.hasNext()) {
		FileItem item = (FileItem) itr.next();
		if (!"".equals(item.getName())) {
			//将当前日期作为图片名
			String imageName = DateUtil.getCurrentDateStr();
			//图片真实的存放位置
			String diskDir = PropertiesUtil.getValue("diskDir");
			//图片的后缀名
			String subfix = item.getName().split("\\.")[1];

			item.write(new File(diskDir + imageName + "." + subfix));
			fileName = imageName + "." + subfix;
		}
	}
		
  /**
   * 结合ckeditor文件上传功能，回调，传回图片路径，实现预览效果
   * imageContextPath为图片在服务器地址，如uploadImages/123.jpg,非绝对路径
   */
    String imageContextPath = "http://localhost:8080" + serverDir + fileName;
    response.setContentType("text/html;charset=UTF-8");
    String callback = request.getParameter("CKEditorFuncNum");
    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();
}

属性文件：

serverDir=/uploadImages/
diskDir=D:/temp/

tomcat映射配置（即Tomcat目录下的server.xml文件）：

<Context docBase="D:/temp/" path="/uploadImages/"/>
<Context docBase="p3" path="/p3" reloadable="true" source="org.eclipse.jst.jee.server:p3"/>

点击选择文件的时候，会打开资源管理器，然后选择一张图片，然后点击上传到服务器，发现会立马切换到图像信息的Tab页面，而且URL为图片存储的路径

4、编辑器中内容的显示

通过查看数据库可以知道，ckeditor编辑器中的内容存入数据库后就是一些HTML代码：

所以显示就可直接如下图中的做法：

显示的效果：

ckeditor的其他配置可参考：

http://www.cnblogs.com/Setme/archive/2012/06/05/2536568.html

今日相乐，皆当喜欢

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
CKEditor结合原生的servlet实现图片上传及预览

CKEditor其实不需要多介绍，最早之前叫FCKEditor，后面改名了，是一个富文本编辑器。CKEditor4.4.6标准版下载地址：http://download.cksource.com/CKEditor/CKEditor/CKEditor 4.4.6/ckeditor_4.4.6_standard.zip1、CKEditor的使用在页面<head>中引入cke...
复制链接

扫一扫