富文本编辑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(）获取超过上传要求的字节数

富文本编辑ckeditor.js的使用

猜你喜欢