1. 程式人生 > >富文字編輯ckeditor.js的使用

富文字編輯ckeditor.js的使用

使用ckeditor.js編輯副本,生成靜態頁面

前端程式碼:

 <div style="margin:20px">    
    	<textarea rows="20" name="editor" id="editor"></textarea><br/>
	    <a onclick="submit()" class="btn btn-default disabled float-right" style="display: block;">上傳</a>
 </div>

<script type="text/javascript">

$(function() {
	
	var editor = CKEDITOR.replace('editor');
	
	submit = function() {
	
		if (!editor.getData()) {
			return;
		}
			
		$.ajax({
	        url:"uploadHtml",
	        type:"POST",
	        data:{html : editor.getData()},
	        dataType:'json',    //返回的資料格式:json/xml/html/script/jsonp/text
	        success:function(data){
	        	Alert(data.flag);
	         },
	         error:function(data){
	         }
	     });
	}
    }
});

</script>

注:使用editor.getData()獲得富文字中的內容,圖片可以使用複製貼上放入文字框

後臺java程式碼:

@RequestMapping("uploadHtml")
	public @ResponseBody Map<String,Object> uploadHtml(String html, HttpServletRequest request) {
		
		StringBuilder stringHtml = new StringBuilder();
		
		try {
			request.setCharacterEncoding("utf-8");
		} catch (UnsupportedEncodingException e1) {
			e1.printStackTrace();
		}
		
		//輸入HTML檔案內容
		stringHtml.append("<html><head>");
		stringHtml.append("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">");
		stringHtml.append("<title>測試報告文件</title>");	
		stringHtml.append("</head>");
		stringHtml.append("<body>");
		stringHtml.append("<div>hello</div>");
		stringHtml.append("</body></html>");
		
		String sb = null;		
		if (Common.isEmpty(html)) {
			StringBuffer sbuffer=new StringBuffer();
			try {
				BufferedReader br=request.getReader();
				char[] buffer=new char[1024*1024];
				int len;
				while((len=br.read(buffer))!=-1) {
					sbuffer.append(buffer,0,len);
				}
				sb = URLDecoder.decode(String.valueOf(sbuffer), "utf-8");
				sb = String.valueOf(stringHtml).replace("hello", sb.split("html=")[1].replace("<img", "<img style=\"width:80%;height:auto\""));
			} catch (Exception e) {
				
				e.printStackTrace();
			}
		} else {
			sb = String.valueOf(stringHtml).replace("hello", html.replace("<img", "<img style=\"width:80%;height:auto\""));
		}
		
		if (Common.isEmpty(sb)) {
			throw new IllegalArgumentException();
		}
		
		Map<String,Object> hm = new HashMap<String,Object>();
        
		try {
			File detail = new File("C:/uploadDoc/detail.html");
			FileOutputStream  fos = new FileOutputStream (detail);
			OutputStreamWriter bw = new OutputStreamWriter(fos, "UTF-8");
			bw.write(sb);
			bw.close();
		    hm.put("flag", "SUCCESS:文件上傳成功");
		} catch (Exception e) {
			e.printStackTrace();
		    hm.put("flag", "ERROR:文件上傳失敗");
		}
		
		return hm;
	}

使用request.getReader()獲取超過上傳要求的位元組數