富文本编辑ckeditor.js的使用

关注

原创最新推荐文章于 2026-08-24 19:04:42 发布 5.3k 阅读 AI 写同款· GEO 优化 ›

Github每日精选（第14期）：在线富文本编辑器Editor.js 当然，这些工具可以增加选项。我们可以给这些工具增加特定的选项（下面的classinlineToolbar，设定了行内是否显示工具栏，显示哪些工具栏，工具的类名等）。上面的例子中，我们使用了没有选项的工具（只有工具名称，headerlist）。我们有许多现成的插件和一个用于创建新插件的简单。是一个块样式的编辑器。块是构成条目的结构单元。然后，增加一些工具配置。先看一下开始的最简单的配置。在github的地址在。安装后如何使用编辑器。...... 阅读详情

使用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(）获取超过上传要求的字节数

收录于