java 富文本html 转pdf javafx 富文本编辑器

转载

mob64ca1417736e 2023-09-13 10:19:01

文章标签 java 富文本html 转pdf java eclipse tomcat 上传 文章分类 Java 后端开发

一：富文本编辑器

　富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，方便那些不太懂HTML用户使用，富文本编辑器的应用非常广泛，它的历史与图文网页诞生的历史几乎一样长。

常用的富文本编辑器：

① CKEditor

Ckeditor也是一款非常经典的富文本编辑器，官方下载量过千万。它是在非常著名的FCkEditor基础上开发的新版本，FckEditor的用户现在基本都转移到Ckeditor了。

　 Ckeditor有高性能的实时预览，它特有行内编辑功能，使得编辑内容更加直观，仿佛是在编辑网页一样，有很强的可扩展性，被各大网站广泛运用。

官网详情：WYSIWYG HTML Editor with Collaborative Rich Text Editinghttps://ckeditor.com/

② Kindeditor

KindEditor历史也很长了，用户数也不少，国内某公司出品。免费开源。界面类似于office word，界面和功能中规中矩，文档齐全，使用还算方便。

官网详情：在线HTML编辑器默认模式、简单模式、手动加载编辑器、默认模式为代码模式、手动添加CSS文件、只能调整高度, 禁止调整大小...http://kindeditor.net/demo.php

③ ueditor

ueditor是由百度出品的富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源免费。这款编辑器用过的人也非常多，功能非常全面，插件很多，还可以很方便插入百度地图，接入十分简单。

　16年之后百度没有怎么更新了，不过现有的功能也足够用了。UEditor分为UE版（全功能版）和UM版（精简版），大家可以根据自己使用环境选择不同的版本。

官网详情：

GitHub - fex-team/ueditor: rich text 富文本编辑器

④ wangEditor

wangEditor轻量级，小巧实用，配置方便，使用简单。可以自定义皮肤功能，免费开源。用户数量也很多，尤其是用在一些轻型环境，比如论坛社区回帖。wangEditor是国人出品的开源项目。

官网详情：

wangEditor - 轻量级 web 富文本编辑器

⑤ simditor

simditor是Tower平台使用的富文本编辑器，是一款轻量化的编辑器，界面简约，功能实用，插件不是很多，功能要求不高的可以使用。

　虽然是国内出品，但文档是英文的。开源免费。

官网详情：

Simditorhttps://simditor.tower.im/

⑥ summernote

summernote是一款轻量级的富文本编辑器，比较容易上手，使用体验流畅，支持各种主流浏览器。summernote开源免费，该项目一直比较活跃，一直都有人在维护。

　summernote同样依赖于jquery和bootstrap，使用前先引入这两项。

官网详情：

Summernote - Super Simple WYSIWYG editorhttps://summernote.org/

⑦ eWebEditor

eWebEditor外观和使用风格都和微软 Word很类似，功能很多。工具条可以定制，运行速度很快。导入文件接口很多，支持word、excel、pdf、ppt直接导入，目前版本不支持代码高亮，不适合纯技术平台使用，适合内容编辑人员使用。

　eWebEditor有很长的历史了，是典型的传统富文本编辑器，不论是界面，还是功能都比较传统。

　eWebEditor是收费的，但也有免费的精简版，精简版没有后台功能。

官网详情：

系统自带样式方案: 在线演示: eWebEditoreWebEditor,在线HTML编辑器,HTML在线编辑器http://www.ewebeditor.net/demo/

⑧ FreeTextBox

FreeTextBox功能强大，前端支持主流浏览器，但后台只支持.NET。它的外观和使用风格都和微软 Word很类似。工具条可以定制，运行速度一般。FreeTextBox分为免费版和pro收费版，一般情况免费版本功能已经足够用了。

官网详情：

FreeTextBox - ASP.NET Rich HTML editorASP.NET WYSIWYG rich HTML editor for WebForms, MVC, and all versions of .NET Framework.http://freetextbox.com/

CKeditor的使用步骤

【步骤一】官网https://ckeditor.com/ 下载-解压-引入

【步骤二】
   <script type="text/javascript" src = "../ckeditor/ckeditor.js"></script>
   <script type="text/javascript">
       CKEDITOR.replace("ncontent");
   </script>

案例：代码演示

<!-- 引入富文本编辑器的插件js文件 -->
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

<p>
					<label> 内容 </label>
					<!-- 通过富文本编辑器插件将textarea显示为富文本编辑器风格 -->
					<textarea name="ncontent" cols="70" rows="10" id="ncontent">
					</textarea>
					<script type="text/javascript">
						CKEDITOR.replace("ncontent");
					</script>
				</p>

二：web文件上传与下载

基本概念：

将本地文件上传到服务器端，从服务器端下载文件到本地的过程。例如目前网站需要上传头像、上传下载图片或网盘等功能都是利用文件上传下载功能实现的。

文件上传运行原理：

客户端浏览器通过文件浏览框，选择需要上传的文件内容（其中包括文件路径及文件内容）。
客户端浏览器通过点击上传按钮，将本地文件上传到服务器端。
服务器端通过程序接收本地文件内容，并将其保存在服务器端磁盘中。

文件下载运行原理：

客户端浏览器通过点击下载按钮，将服务器端保存的文件下载到本地磁盘。
服务器端通过程序将服务器端文件响应给客户端。

实现方式：

SmartUpload组件
Apache CommonsFileUpload组件
Servlet 3.0 文件上传

三：SmartUpload组件的使用

核心类：

SmartUpload
Files
File
Request

1.SmartUpload类

该类主要完成上传下载工作。

上传文件使用的方法：

public final void initialize(javax.servlet.jsp.PageContext pageContext)	（1）执行上传下载的初始化工作，必须第一个执行。（2）pageContext为JSP页面内置对象（页面上下文）
public void upload()	上传文件数据。对于上传操作，第一步执行initialize方法，第二步就要执行这个方法。
public int save(String destPathName)	将全部上传文件保存到指定目录下，并返回保存的文件个数。
public int save(String destPathName,int option)	将全部上传文件保存到指定目录下，并返回保存的文件个数。 option： SAVE_PHYSICAL指示组件将文件保存到以操作系统根目录为文件根目录的目录下 AVE_VIRTUAL指示组件将文件保存到以Web应用程序根目录为文件根目录的目录下 SAVE_AUTO则表示由组件自动选择
public Files getFiles()	取全部上传文件，以Files对象形式返回，可以利用Files类的操作方法来获得上传文件的数目等信息
public Request getRequest()	取得Request对象，以便由此对象获得上传表单参数之值
public void setAllowedFilesList(String allowedFilesList)	设定允许上传带有指定扩展名的文件，当上传过程中有文件名不允许时，组件将抛出异常
public void setDeniedFilesList(String deniedFilesList)	用于限制上传那些带有指定扩展名的文件。若有文件扩展名被限制，则上传时组件将抛出异常
public void setMaxFileSize(long maxFileSize)	设定每个文件允许上传的最大长度
public void setTotalMaxFileSize(long totalMaxFileSize)	设定允许上传的文件的总长度，用于限制一次性上传的数据量大小

下载文件常用的方法：

①. public void setContentDisposition(String contentDisposition)
将数据追加到MIME文件头的CONTENT-DISPOSITION域。jspSmartUpload组件会在返回下载的信息时自动填写MIME文件头的CONTENT-DISPOSITION域，如果用户需要添加额外信息，请用此方法。

②. downloadFile 方式下载文件方法：

① public void downloadFile(String sourceFilePathName)	其中，sourceFilePathName为要下载的文件名（带目录的文件全名）
② public void downloadFile(String sourceFilePathName,String contentType)	其中，sourceFilePathName为要下载的文件名（带目录的文件全名）,contentType为内容类型（MIME格式的文件类型信息，可被浏览器识别）
③ public void downloadFile(String sourceFilePathName,String contentType,String destFileName)	其中，sourceFilePathName为要下载的文件名（带目录的文件全名）,contentType为内容类型（MIME格式的文件类型信息，可被浏览器识别）,destFileName为下载后默认的另存文件名

2.Files类

这个类表示所有上传文件的集合，通过它可以得到上传文件的数目、大小等信息。

常用方法：

public void saveAs(java.lang.String destFilePathName) 或public void saveAs(java.lang.String destFilePathName, int optionSaveAs)	destFilePathName是另存的文件名 optionSaveAs SAVEAS_PHYSICAL表明以操作系统的根目录为文件根目录另存文件 SAVEAS_VIRTUAL表明以Web应用程序的根目录为文件根目录另存文件 SAVEAS_AUTO则表示让组件决定，当Web应用程序的根目录存在另存文件的目录时，它会选择SAVEAS_VIRTUAL，否则会选择SAVEAS_PHYSICAL
public boolean isMissing()	这个方法用于判断用户是否选择了文件，也即对应的表单项是否有值。选择了文件时，它返回false。未选文件时，它返回true。
public String getFieldName()	取HTML表单中对应于此上传文件的表单项的名字
public String getFileName()	取文件名（不含目录信息）
public String getFilePathName	取文件全名（带目录）
public String getFileExt()	取文件扩展名（后缀）
public int getSize()	取文件长度（以字节计）
public byte getBinaryData(int index)。其中，index表示位移，其值在0到getSize()-1之间。	取文件数据中指定位移处的一个字节，用于检测文件等处理。

3.Request类

这个类的功能等同于JSP内置的对象request。只所以提供这个类，是因为对于文件上传表单，通过request对象无法获得表单项的值，必须通过jspSmartUpload组件提供的Request对象来获取。

常用方法：

public String getParameter(String name)	其中，name为参数的名字。获取指定参数之值。当参数不存在时，返回值为null。
public String[] getParameterValues(String name)。	其中，name为参数的名字。当一个参数可以有多个值时，用此方法来取其值。它返回的是一个字符串数组。当参数不存在时，返回值为null
public Enumeration getParameterNames()	取得Request对象中所有参数的名字，用于遍历所有参数。它返回的是一个枚举型的对象

注意事项：

（1）表单请求方式必须为POST

（2）设置enctype="multipart/form-data"，专用于文件传输

（3）文件标签需设置name属性

(4) 文件上传后，图片保存在web服务器（tomcat中），不是保存在数据库

案例：代码演示

文件上传演示代码界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	 <h1>文件上传演示</h1>
	 <hr/>
	 <form enctype="multipart/form-data" action="doFileDemo.jsp" method = "post">
	 	用户: <input type = "text" name = "username"/>
	 	<br/>
	 	头像: <input type = "file" name = "nfile"/>
	 	<input type = "submit" value = "上传头像"/>
	 </form>
	 
	 
</body>
</html>

获取传来的相关信息

<%@page import="com.jspsmart.upload.Request"%>
<%@page import="com.jspsmart.upload.File"%>
<%@page import="com.jspsmart.upload.SmartUpload"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

    <%
    	//通过smartupload组件提供的request对象获取其它输入项的值
    	
    	//获取request对象
    	Request req = su.getRequest();
    	//获取用户名
    	String username = req.getParameter("username");
    	out.println("<hr/>username="+username);
    
    
    	//1.实例化SmartUpload组件对象
    	SmartUpload su = new SmartUpload();
    	//2.调用初始化组件的方法（钥匙激活）
    	su.initialize(pageContext);//pageContext内置对象
    	//3.设置相关要求（允许上传的类型文件，不允许上传的类型文件，限制文件的大小）
    	//setAllowFilesList 允许上传的文件类型
    	String allow = "jpg,jpeg,png";
    	//setDeniedFilesList 不允许上传的文件类型
    	String denied = "avi,mp4,mp3,wmv,txt";
    	//setMaxFileSize 设置限制每个文件的最大长度   字节为单位  不是KB
    	long maxFileSize = 1024*1024*1024;
    	//setTotalMaxFileSIze 设置限制总文件的最大长度
    	long totalMaxFileSize = 1024*1024;
    	try{
    		//重新设置SmartUpload组件上传文件的编码格式
    		su.setCharset("UTF-8");
    		su.setAllowedFilesList(allow);
    		su.setDeniedFilesList(denied);
    		su.setMaxFileSize(maxFileSize);
    		su.setTotalMaxFileSize(totalMaxFileSize);
    		//4.调用上传的方法  （上传之后，图片暂时存储到内存上）
    		su.upload();
        	//5.实际性的保存（最终将图片存储到web服务器中【tomcat】）
        	//su.getFiles() 获取所有的图片数组  根据下标获取第一个
        	//获取选中的第一张图片
        	File file =  su.getFiles().getFile(0);
        	//判断是否选中
        	String filePath = "upload//";
        	if(!file.isMissing()){//选中了文件
        		//根据选中的文件获取当前的文件名称
        		String fileName = file.getFileName();
        		//System.out.println(fileName);
        		filePath+=fileName;
        	}
        	//将内存上的文件保存到当前web服务器中  web_10_file的upload文件夹内
        	file.saveAs(filePath, SmartUpload.SAVE_AUTO);
        	out.println("上传成功");
        	System.out.println(filePath);
    	}catch(Exception e){
    		e.printStackTrace();
    	}
    	
    	
    
    	
    	
    	
    	
    %>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。