1. 程式人生 > >線上編輯器(WangEditor)

線上編輯器(WangEditor)

  自己之前寫了一篇關於POI 相關的部落格, 想了想在公司中一般常用的不就是上傳下載,poi,分頁,定時等。好像還有個線上編輯器, 於是自己就花了兩個多小時把編輯器相關的程式碼擼了遍,當然了是先百度找了找資料,看了看實現的邏輯,然後自己擼的。 編輯器自己使用的是WangEditor,網上也有很多關於Editor,kindEitor 的文章, 不過貌似好像沒用。業務方面:在編輯器中編輯, 然後儲存為word,或者將word中的內容載入進線上編輯器中再次編輯。

 

http://www.wangeditor.com/   這是WangEditor的相關網址,其中api,文件,例項都有。 WangEditor使用,配置還是相對來說比較簡單的,引入相關js,建立editor物件,初始化物件。

  

editor.txt.html() 會將在編輯器中編輯的內容獲取,然後你直接將其傳入後臺便可以獲取到編輯器中編輯的內容。

當你使用編輯器編輯並儲存後,會在指定的儲存位置生成一個word,txt資料夾和一天個htm檔案。txt資料夾中是txt檔案。txt檔案和htm檔案都是自動生成的。其中txt檔案裡是HTML中的標籤語言,當你要將word中的內容載入進編輯器再次編輯時,獲取的內容是相對應的txt檔案中的內容。htm檔案只有一個,是剛使用用WangEditor建立word成功後生成的,其就是個HTML檔案,其中的標籤,屬性對應的都是編輯器中展示的模樣。當你儲存生成word時,是先讀取htm中的內容,將${content}替換成你編輯的內容,樣式什麼的htm檔案中模板原先就有。

然後利用流將HTML中的內容寫入到word中並生成word。

 

package com.cn.platform.utils;

import java.io.*;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class EditorUtils {

// 獲取專案檔案路徑
public static String getUploadPath(HttpServletRequest request,String name){
StringBuilder sb = new StringBuilder();
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
String uploadPath = sb.append(basePath).append("/ui/CAndTFiles/").append(name).append(".doc").toString();
return uploadPath;
}

//獲取伺服器,本地檔案路徑
public static String getWindowsPath(HttpServletRequest request,String name){
StringBuilder sb = new StringBuilder();
String windowPath = sb.append("I:/yishangxincheng/ysdFiles/").append(name).append(".doc").toString();
return windowPath;
}

//獲取伺服器,本地檔案路徑
public static String getWindowsTxtPath(HttpServletRequest request,String name){
StringBuilder sb = new StringBuilder();
String windowPath = sb.append("I:/yishangxincheng/ysdFiles/txt/").append(name).append(".txt").toString();
return windowPath;
}

/*public static void saveWord(String editTemplate,String windowPath,HttpServletRequest request,HttpServletResponse response) throws IOException{
EditorUtils.setCode(request, response);
if (editTemplate != null) {
List<String> array = new ArrayList<>();
array.add(editTemplate);
XWPFDocument doc = new XWPFDocument();
XWPFParagraph para = doc.createParagraph();
XWPFRun run = para.createRun();
OutputStream os = new FileOutputStream(windowPath);
for (String s : array) {
//把doc輸出到輸出流
run.setText(s);
doc.write(os);
}
os.close();
doc.close();
}
}*/


//設定編碼
public static void setCode(HttpServletRequest request,HttpServletResponse response) throws IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
}

//匯出
public static void export(HttpServletRequest request,HttpServletResponse response,String url) throws IOException {
EditorUtils.setCode(request, response);
//獲取檔案下載路徑
String filename = url.substring(url.length()-4, url.length());
if (filename.equals("docx")) {
filename = url.substring(url.length()-6, url.length());
}else{
filename = url.substring(url.length()-5, url.length());
}
File file = new File(url);
if(file.exists()){
//設定相應型別讓瀏覽器知道用什麼開啟 用application/octet-stream也可以,看是什麼瀏覽器
response.setContentType("application/x-msdownload");
//設定頭資訊
StringBuilder sb = new StringBuilder();
response.setHeader("Content-Disposition", sb.append("attachment;filename=\"").append(filename).append("\"").toString());
InputStream inputStream = new FileInputStream(file);
ServletOutputStream ouputStream = response.getOutputStream();
byte b[] = new byte[1024];
int n ;
while((n = inputStream.read(b)) != -1){
ouputStream.write(b,0,n);
}
//關閉流
ouputStream.close();
inputStream.close();
}
}


// 讀取.mht網頁中的資訊
private static String readFile(String filePath) throws Exception{
StringBuilder sb = new StringBuilder();
BufferedReader br = null;
try {
br = new BufferedReader(new InputStreamReader(new FileInputStream(filePath),"utf-8"));
while (br.ready()) {
sb.append((char) br.read());
}
}catch(Exception e){
e.printStackTrace();
}finally {
if (br!=null) {
br.close();
}
}
return sb.toString();
}

//將HTML轉word
private static boolean writeWordFile(String content ,String path,String fileName) throws Exception{
boolean flag = false;
FileOutputStream fos = null;
StringBuilder sb = new StringBuilder();
try {
if(!"".equals(path)){
byte[]b = content.getBytes("utf-8");
fos = new FileOutputStream(sb.append(path).append(fileName).append(".doc").toString());
fos.write(b);
fos.close();
flag = true;
}
}catch (IOException e)
{
e.printStackTrace();
}finally {
if (fos !=null) {
fos.close();
}
}
return flag;
}

public static void htmlToWord(String editorContent,String htmlPath,HttpServletRequest request,String wordPath,String wordName) throws Exception{
//讀取網頁中的內容
String htmlFile = EditorUtils.readFile(htmlPath);
// 替換後的內容
String endContent = htmlFile.replace("${content}", editorContent);
//轉word
EditorUtils.writeWordFile(endContent, wordPath, wordName);
}

// 將editorContent存入txt中用於載入時直接使用
public static void saveEditorContent(String editorContent,String targetPath,String fileName) throws IOException{
FileOutputStream fos = null;
StringBuilder sb = new StringBuilder();
try {
if(!"".equals(targetPath)){
byte[]b = editorContent.getBytes("utf-8");
fos = new FileOutputStream(targetPath);
fos.write(b);
fos.close();
}
}catch (IOException e)
{
e.printStackTrace();
}finally {
if (fos !=null) {
fos.close();
}
}

}

//載入
public static String load(String name,HttpServletRequest request,HttpServletResponse response) throws IOException{
EditorUtils.setCode(request, response);
String path = EditorUtils.getWindowsTxtPath(request, name);
StringBuilder sb= new StringBuilder();
BufferedReader br = null;
try {
br = new BufferedReader(new InputStreamReader(new FileInputStream(path),"utf-8"));
while (br.ready()) {
sb.append((char) br.read());
}
}catch(Exception e){
e.printStackTrace();
}finally {
if (br!=null) {
br.close();
}
}

return sb.toString();
}

}

   其中主要的程式碼就是工具類,程式碼都是能直接使用的。當然了,程式碼我還有10%沒弄上來,不過我相信有了這些程式碼,看到此篇部落格的人應該沒問題。

  在此,希望此篇部落格能幫助到一些人。