KindEditor画像のアップロードに関する問題
3268 ワード
多くのWebエディタからKindEditorを選択し、主にコンパクトさを重視します.1つのJSファイル、2つのCSSファイル、1つのGIFピクチャがそのすべてです.そのため、ページへのロード速度が速く、機能も比較的そろっています.
現在KindEditorが持っている画像アップロードコンポーネントはPHPのサポートにすぎませんが、私のプロジェクトはStruts 2を使っているので、画像アップロードは自分で書く必要があります.
まずpluginsディレクトリの下のimageを変更します.htmlファイル、formのactionを次のように変更します.
そして
のvalueプロパティは、ページのエディタのidに設定されます.
このアドレスは、Struts 2のアクションに対応しています.
具体的なコードは以下の通りです.
このコードのUploadServiceは、uploadメソッドを呼び出してファイルをアップロードし、サーバ上の絶対アドレスに戻るアップロードサービスコンポーネントです.しかし、直接返される絶対アドレスは、FireFoxで自動的に相対アドレスに変換される.これは編集に不便をもたらし、編集時にエディタに画像が表示されず、問題はアドレスにあるので、いっそアドレスを相対アドレスに直接変換してこの問題を解決します.
次に、アップロードに成功したページを書きます.
現在KindEditorが持っている画像アップロードコンポーネントはPHPのサポートにすぎませんが、私のプロジェクトはStruts 2を使っているので、画像アップロードは自分で書く必要があります.
まずpluginsディレクトリの下のimageを変更します.htmlファイル、formのactionを次のように変更します.
action="/imageUpload"そして
<input type="hidden" id="editorId" name="id" value="" />のvalueプロパティは、ページのエディタのidに設定されます.
このアドレスは、Struts 2のアクションに対応しています.
<action name="imageUpload" class="com.bjqxwh.manage.web.KindEditorImageUploadAction">
<result name="success">/editor/imageUploadSuccess.jsp</result>
<result name="error">/editor/imageUploadError.jsp</result>
</action>具体的なコードは以下の通りです.
package com.bjqxwh.manage.web;
import java.io.File;
import org.apache.struts2.ServletActionContext;
import com.bjqxwh.manage.service.UploadService;
import com.opensymphony.xwork2.ActionSupport;
/**
* KindEditor
*
* @author shelltea
*
*/
public class KindEditorImageUploadAction extends ActionSupport {
private static final long serialVersionUID = 920697011722287589L;
private String savePath = "/editor/upload";
private File imgFile;
private String imgFileContentType;
private String imgFileFileName;
private String id;
private String imgTitle;
private String imgWidth;
private String imgHeight;
private String imgBorder;
private String saveUrl;
// Setter Getter
@Override
public String execute() throws Exception {
saveUrl = UploadService.upload(imgFile, imgFileFileName, savePath,
ServletActionContext.getRequest());
// FireFox ， URL
String[] s = saveUrl.split("/");
saveUrl = "/" + s[3] + "/" + s[4] + "/" + s[5];
return SUCCESS;
}
}
このコードのUploadServiceは、uploadメソッドを呼び出してファイルをアップロードし、サーバ上の絶対アドレスに戻るアップロードサービスコンポーネントです.しかし、直接返される絶対アドレスは、FireFoxで自動的に相対アドレスに変換される.これは編集に不便をもたらし、編集時にエディタに画像が表示されず、問題はアドレスにあるので、いっそアドレスを相対アドレスに直接変換してこの問題を解決します.
次に、アップロードに成功したページを書きます.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert image</title>
</head>
<body>
<script language="javascript" type="text/javascript">
parent.KE.plugin["image"].insert("${id}","${saveUrl}","${imgTitle}","${imgWidth}","${imgHeight}","${imgBorder}");
</script>
</body>
</html>