富文本編輯器：KindEditor+Struts2 筆記

網上找了一些資料，可是都不很理想，然後自己初步摸索了出來了一些，這裏分享下。還有很多問題請指教，我這個是上項目的功能，有好的建議和經驗請分享，不勝感激。

我就略講一下我是怎麼熟悉步驟吧。（kindeditor-4.1 + Struts2 + Spring）

歡迎來Q羣討論：296538907

 
需求：一個富文本編輯器，用來生成HTML靜態頁面用的，做到所見即所得。（我這裏還只實現附件（包括圖片）上傳和在富文本框中的顯示，下面也只以這個爲例。）
 

分析：這就是一個可視化的編輯器，把編輯好的效果生成HTML代碼，然後保存到服務器。然後給客戶看的時候就只需要把這HTML代碼 拿出來展示就行了（PS：我個人傾向於把它放iframe 裏面展示，因爲這樣不會與其他頁面元素有干擾，像樣式衝突什麼的）。

例如：你插入一張圖片，那麼生成的HTML代碼其實就是一個<img src=”…”/> 標籤。那麼你保存到的服務器就只需要那張插入的圖片和那個<img src=”…”/> 標籤了。只是<img src=”…”/> 標籤的src屬性能夠正確的指向你文件所在的路徑就行。需要考慮的是，這裏要用ajax異步上傳，且後臺應該返回json格式內容。所以你的後臺應該具備這個功能。（見：http://blog.csdn.net/fyw_wu/article/details/10076257）


 
實現（圖片上傳爲例）：
一、找一個開源的富文本編輯器，網上有好多什麼FCKeditor 等等，但是我選擇了輕量級的、中文的、純jsp 的KindEditor（官網：http://www.kindsoft.net/）。

二、選擇性的把它的下面的文件夾拷到到你工程的WebRoot 下面去。（可以去掉asp、php 文件夾，我做的是jsp，所以asp和php就不要他們了。）

三、啓動你的應用，打開jsp文件夾下面的demo.jsp 看看（注意：jsp文件夾下有一個lib目錄，裏邊有3個依賴的jar包，你需要把它也編譯進去）。如果打不開demo.jsp那就去整整Struts，這個和KE無關。

四、修改demo.jsp。只要修改一下KE默認的上傳處理類就行了（KE有很多初始化參數，詳見：http://www.kindsoft.net/docs/option.html#filepostname）。

我的demo.jsp 中的js：

<script>
  KindEditor.ready(function(K) {
   var editor1 = K.create('textarea[name="content1"]', {
    cssPath : '../plugins/code/prettify.css', //樣式文件的路徑，也可以是一個由文件路徑組成的數組
    uploadJson : '../demo/UploadDemoAction_uploadImage.action', //文件的上傳路徑
	filePostName : 'imgFile', //文件上傳時的name，<input type="file" name="就這個值">
    fileManagerJson : '../jsp/file_manager_json.jsp', //對 文件瀏覽功能 支持的後臺 的路徑。如： “插入圖片->網絡圖片->圖片空間”
    allowFileManager : true
   });
  });
 </script>

五、編寫後臺上傳類。

根據自己的需求寫好文件上傳處理。 
 
我action 的源碼：

package com.jy.action.imsinfo;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

import org.apache.commons.io.FileUtils;
import com.jy.action.bases.BaseAction;
import com.jy.beans.GUsers;
import com.jy.common.Constant;
import com.jy.common.SessionUtils;

/**
 * 文件上傳/下載處理。
 * 
 * @author sy_FYW
 * 
 */
public class FileManagerAction extends BaseAction
{
    private static final long serialVersionUID = 6624518147834729694L;

    // 請求的參數
    // KE 默認的用name=imgFile來上傳文件，當然你制定了除外。
    // 這裏用到strut上傳文件的自動裝箱功能
    private File imgFile;
    private String imgFileFileName;
    private String imgFileContentType;

    // 返回的參數
    private Map<String, Object> rootMap = new HashMap<String, Object>();

    //下載用到的
    private InputStream fileStream;
    private String filePath;
    private String downloadFileName;

    public String uploadImage()
    {
        // 獲得圖片後綴
        String fileExt = imgFileFileName.substring(imgFileFileName.lastIndexOf(".")).toLowerCase();

        Date date = new Date();
        
        SessionUtils su = new SessionUtils();
		GUsers user = (GUsers) su.getSession().get(Constant.CLIENT_USER_LOGINED);
        
        String pathTemp = "/attached/userImgSpace/" + user.getId().toString() 
        				+ "/image/" + new SimpleDateFormat("yyyyMM").format(date) + "/";
        

        // 圖片在服務器上的絕對路徑。編輯器並沒有提供刪除圖片功能，此路徑以後可以用於後臺程序對圖片的操
        String serverPath = getConfigValue("PORTPHYPATH") + pathTemp;
        
        //根路徑
        String rootPath = getConfigValue("PORTVIRPATH") + pathTemp;

        // 重新生成圖片名字
        String newImgName = date.getTime() + fileExt;

        // 將圖片寫入服務器
        try
        {
            FileUtils.copyFile(imgFile, new File(serverPath + newImgName));
        }
        catch (IOException e)
        {
            e.printStackTrace();
            rootMap.put("url", "");
            rootMap.put("relativeURL", "");
            rootMap.put("error", -1);
            rootMap.put("msg", "上傳失敗！");
        }
        
        
        //返回前臺上傳文件的url地址，例如KE圖片上傳後生成<img>時候就會用它來做 src的值。
        rootMap.put("url", rootPath+newImgName);
        rootMap.put("relativeURL", pathTemp.substring(1)+newImgName);
        rootMap.put("error", 0);
        rootMap.put("msg", "上傳成功！");

        return "ajax_json";
    }

    /**
     * 文件下載
     * @return
     */
    public String getImg()
    {
        String sitePath = getConfigValue("PORTPHYPATH")  + "/";
        
        downloadFileName = filePath.substring(filePath.lastIndexOf("/"));
        File file = new File(sitePath + filePath);

        try
        {
            if (file.exists())
            {
                fileStream = new FileInputStream(file);
            }
        }
        catch (FileNotFoundException e)
        {
            e.printStackTrace();
        }

        return "download";
    }

    public String deleteFile()
    {
        if (filePath != null)
        {
            File file = new File(filePath);
            file.deleteOnExit();
        }

        rootMap.put("error", 0);
        rootMap.put("msg", "文件刪除成功！");

        return "ajax_json";
    }
    
    public File getImgFile()
    {
        return imgFile;
    }

    public void setImgFile(File imgFile)
    {
        this.imgFile = imgFile;
    }

    public String getFilePath()
    {
        return filePath;
    }

    public void setFilePath(String filePath)
    {
        this.filePath = filePath;
    }

    public String getDownloadFileName()
    {
        return downloadFileName;
    }

    public void setDownloadFileName(String downloadFileName)
    {
        this.downloadFileName = downloadFileName;
    }

    public InputStream getFileStream()
    {
        return fileStream;
    }

    public void setFileStream(InputStream fileStream)
    {
        this.fileStream = fileStream;
    }

    public Map<String, Object> getRootMap()
    {
        return rootMap;
    }

    public void setRootMap(Map<String, Object> rootMap)
    {
        this.rootMap = rootMap;
    }

    public String getImgFileFileName()
    {
        return imgFileFileName;
    }

    public void setImgFileFileName(String imgFileFileName)
    {
        this.imgFileFileName = imgFileFileName;
    }

    public String getImgFileContentType()
    {
        return imgFileContentType;
    }

    public void setImgFileContentType(String imgFileContentType)
    {
        this.imgFileContentType = imgFileContentType;
    }

}