Kindeditor富文本使用

KindEditor是一套開源的HTML可視化編輯器，主要用於讓用戶在網站上獲得所見即所得編輯效果，兼容IE、Firefox、Chrome、Safari、Opera等主流瀏覽器。

1、在KindEditor的官網上 http://kindeditor.net/demo.php，下載所需要的js。安裝到項目目錄下：

2、引導到頁面中，調整寬和高

3、代碼支持

package com.vix.diandoc.user.action;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.text.SimpleDateFormat;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.Random;

import org.apache.struts2.ServletActionContext;
import org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper;
import org.json.simple.JSONObject;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;

import com.vix.common.base.action.VixAction;

@Controller
@Scope("prototype")
public class KindEditorAction extends VixAction  {

private static final long serialVersionUID = 1L;

@SuppressWarnings("unchecked")
public String uploadFile(){
	//文件保存目錄路徑    img_upload是服務器存儲上傳圖片的目錄名
    String savePath = getServletContext().getRealPath("/") + "/resources/attached/kindeditor/";
    //文件保存目錄URL
    String saveUrl = getRequest().getContextPath() + "/resources/attached/kindeditor/";
    //定義允許上傳的文件擴展名
    HashMap<String, String> extMap = new HashMap<String, String>();
    extMap.put("image", "gif,jpg,jpeg,png,bmp");
    extMap.put("flash", "swf,flv");
    extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
    extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");
    //允許最大上傳文件大小
    long maxSize = 5000000;
    //Struts2 請求 包裝過濾器
    MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper)ServletActionContext.getRequest();
    
    //獲得上傳的文件名
    String fileName = wrapper.getFileNames("imgFile")[0];
    //獲得文件過濾器
    File file = wrapper.getFiles("imgFile")[0];
    //得到上傳文件的擴展名
    String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
    //獲得文件上傳的類型
    String dirName = getRequest().getParameter("dir");
    if (dirName == null) {
            dirName = "image";
    }
    if(!extMap.containsKey(dirName)){
            setMessage("目錄名不正確。");
    		return UPDATE;
    }
    //創建文件夾
    savePath += dirName + "/";
    saveUrl += dirName + "/";
    File saveDirFile = new File(savePath);
    if (!saveDirFile.exists()) {
            saveDirFile.mkdirs();
    }
    //檢查擴展名
    if (!Arrays.<String> asList(extMap.get(dirName).split(",")).contains(fileExt)) {
            setMessage("上傳文件擴展名是不允許的擴展名。\n只允許" + extMap.get(dirName) + "格式。");
    		return UPDATE;
    }
    //檢查文件大小
    if (file.length() > maxSize) {
            setMessage("上傳文件大小超過限制，上傳的文件不能超過2M。");
    		return UPDATE;
    } 
    //檢查目錄
    SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
    String dir = sdf.format(new Date());
    File uploadDir = new File(savePath + dir);
    uploadDir.mkdirs();
    if (!uploadDir.isDirectory()) {
            setMessage("上傳目錄不存在 。");
    		return UPDATE;
    }
    //檢查目錄寫入權限
    if (!uploadDir.canWrite()) {
            setMessage("上傳目錄沒有寫入權限。");
    		return UPDATE;
    }
    //重構上傳圖片的名稱 
    SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSS");
    String newImgName = df.format(new Date()) + "_"
                    + new Random().nextInt(1000) + "." + fileExt;
    
    byte[] buffer = new byte[1024];
    //獲取文件輸出流
    FileOutputStream fos = null;
    //獲取內存中當前文件輸入流
    InputStream in = null;
    try {
    	 fos = new FileOutputStream(savePath + dir + "/" + newImgName);
    	 in = new FileInputStream(file);
        int num = 0;
        while ((num = in.read(buffer)) > 0) {
                fos.write(buffer, 0, num);
        }
    } catch (Exception e) {
            e.printStackTrace(System.err);
    } finally {
    	try{
            in.close();
            fos.close();
    	}catch(Exception ex){
    		ex.printStackTrace();
    	}
    }

    //發送給 KE 
    JSONObject obj = new JSONObject();
    obj.put("error", 0);
    obj.put("url", saveUrl + dir + "/" + newImgName);
	setMessage(obj.toJSONString());
	return UPDATE;
  }
}   

4、頁面獲取富文本里內容:

var content = KindEditor.instances[0].html().trim();