CKEditor二次开发----为CKEditor增加上传图片的功能

最新推荐文章于 2024-06-04 10:01:13 发布

cgfish

最新推荐文章于 2024-06-04 10:01:13 发布

阅读量289

点赞数

分类专栏： CKEditor 文章标签： Java JavaScript JSP Struts Servlet ViewUI

本文链接：https://blog.csdn.net/cgfish/article/details/83647603

版权

CKEditor 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这是我做的一个个人知识管理的一部分，现在把这部分提取出来，加上原代码，希望对大家学习工作有一定的的参考价值。

我对JAVA情有独钟，可惜，原本可以用CKFinder来完成图片上传的功能，可是呢，CKFinder不支持java,所以我只能自己对CKEditor动一下手。其实原理也很简单，只是把原来可以配置为上传的那个页面换成我们自己开发的上传页面。在这里，使用了Action来实现图片的上传，对不需要Action或对Action不懂的朋友，可以使用Servlet来代替那部分的功能，在此，我不就不多说了。

首先，修改对CKEditor引入的那部分javascript，代码如下:

<script type="text/javascript">
	CKEDITOR.replace('content',addUploadButton(this));
        function addUploadButton(editor){
           CKEDITOR.on('dialogDefinition', function( ev ){
               var dialogName = ev.data.name;
               var dialogDefinition = ev.data.definition;
               if ( dialogName == 'image' ){
                   var infoTab = dialogDefinition.getContents( 'info' );
                   infoTab.add({
                       type : 'button',
                       id : 'upload_image',
                       align : 'center',
                       label : '上传图片',
                       onClick : function( evt ){
                           var thisDialog = this.getDialog();
                           var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl');
                           var txtUrlId = txtUrlObj.getInputElement().$.id;
                           addUploadImage(txtUrlId);
                       }
                   }, 'browse'); //place front of the browser button
               }
           });
       }
        function addUploadImage(theURLElementId){
           var uploadUrl = "myCkeditor/uploadImage.jsp"; //这是我自己的处理文件/图片上传的页面URL
           var imgUrl = window.showModalDialog(uploadUrl,null,"dialogWidth:360px;dialogHeight:120px;help:no;status:no");
           var urlObj = document.getElementById(theURLElementId);
           urlObj.value = imgUrl;
           //alert(imgUrl);
           urlObj.fireEvent("onchange"); //触发url文本框的onchange事件，以便预览图片
       }
	</script>

完成这个以后，我们可以做一个上传页面，如上代码 "myCkeditor/uploadImage.jsp"; //这是我自己的处理文件/图片上传的页面URL

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>上传</title>
	</head>
	<body>
		<iframe name="smz" width="0" height="0" frameborder="0"
			style="display: none"></iframe>
		<font color="red"><s:property value="#request.errorMessage" /></font>
		<form action="imageUpload" method="post" enctype="multipart/form-data"
			name="UploadPhoto" target="smz">
			<input type="file" name="file" id="file" class="button">
			<input type="hidden" name="type" id="type" value=".jpg">
			<input onClick="Submit()" type="submit" name="submit" value="上传" class="button">
		</form>
		<input type="hidden" name="pagePath" id="_page_path"
			value="<%String p=(String)session.getAttribute("pagePath");if(p!=null)out.print(p);session.removeAttribute("pagePath"); %>" />
		<script type="text/javascript">
	    var _page_path = document.getElementById("_page_path").value;
	    if(null!=_page_path  && ""!=_page_path){
	    	window.returnValue=_page_path;
	       	window.close();
	    }
		function Submit()
		{
			document.getElementById('type').value=document.getElementById('file').value;
		}
		</script>
	</body>
</html>

再接下来，我们就要做Action,即如上所示的<form action="imageUpload" method="post" enctype="multipart/form-data"

			name="UploadPhoto" target="smz">

，好了我们继续，

package com.burning.EasyCMS.myCkeditor;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.Date;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.apache.struts2.ServletActionContext;

public class FileUpload {
	private static final long serialVersionUID = 572146812454l;
	private static final int BUFFER_SIZE = 16 * 1024;

	private File file;
	private String type;
	private String pagePath;

	public String getType() {
		return type;
	}

	public void setType(String type) {
		this.type = type;
	}

	public File getFile() {
		return file;
	}

	public void setFile(File file) {
		this.file = file;
	}

	private static void copy(File src, File dst) {
		try {
			InputStream in = null;
			OutputStream out = null;
			try {
				in = new BufferedInputStream(new FileInputStream(src),
						BUFFER_SIZE);
				out = new BufferedOutputStream(new FileOutputStream(dst),
						BUFFER_SIZE);
				byte[] buffer = new byte[BUFFER_SIZE];
				while (in.read(buffer) > 0) {
					out.write(buffer);
				}
			} finally {
				if (null != in) {
					in.close();
				}
				if (null != out) {
					out.close();
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	public String imageUpload() {
		HttpServletRequest request = ServletActionContext.getRequest();
		HttpSession session=request.getSession();
		try{
			String fileName = new Date().getTime()+ type.substring(type.length() - 4, type.length());
			String path = ServletActionContext.getServletContext().getRealPath("\\")+ "upload\\image\\";
			File imageFile = new File(path + fileName);
			pagePath = "upload\\image\\" + fileName;
			session.setAttribute("pagePath", pagePath);
			copy(file, imageFile);
			//System.out.println("file:"+file.getName());
			//System.out.println("file:"+file.);
			return "imageUploadSuccess";
		}
		catch(Exception e )
		{
			request.setAttribute("errorMessage", "图片上传未成功");
			return "imageUploadFail";
		}
	}
}

接下来就是对struts.xml的配置了

<action name="imageUpload"
			class="com.burning.EasyCMS.myCkeditor.FileUpload"
			method="imageUpload">
			<result name="imageUploadSuccess">
				/myCkeditor/uploadImage.jsp
			</result>
			<result name="imageUploadFail">
				/myCkeditor/uploadImage.jsp
			</result>
</action>

好了，，到此，功能就增加完毕了，为了完成这个功能，我也参考了网上很多资料，，

谢谢大家