CKEditor二次開発---CKEditorに画像をアップロードする機能を追加

7793 ワード

これは私がやった個人知識管理の一部で、今この部分を抽出して、元のコードを加えて、みんなの学習の仕事に対して一定の参考価値があることを望んでいます.

私はJAVAに夢中で、残念ながら、もともとCKFinderで画像のアップロードの機能を完成することができますが、CKFinderはjavaをサポートしていないので、私は自分でCKEditorに手を出すしかありません.実は原理も簡単で、もともとアップロードできるページを私たちが開発したアップロードページに変えるだけです.ここでは、Actionを使って画像のアップロードを実現したり、Actionを必要としない人やActionを知らない人には、その部分の代わりにサーブレットを使ったりする機能がありますが、ここでは、あまりお話ししません.

まず、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>

次に、上記の

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>

さて、ここまでで、機能が増えて終わり、この機能を完成させるために、私もネット上の多くの資料を参考にしました.
ありがとうございます

MFC&ODBC関連操作

Javaベースの【Javaのシーケンス化と逆シーケンス化を深く分析する】