目录
一、富文本编辑器
1、下载富文本编辑器
2、富文本编辑器的应用
二、文件上传
文件上传必须要注意的规则：
文件上传案例
文件夹的访问
一、富文本编辑器
富文本编辑器在项目中很常见，它可以将文本，图片等信息存入数据库，再编辑一些图文混排的信息的时候很有用，比如商城项目的商品详情页，包含很多带有样式的文字和图片。
接下来我们来看看用法吧！
1、下载富文本编辑器
首先先下载好富文本编辑器，官方链接如下：
CKEditor 4 Quick Start Guide
https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html
点击进入页面 根据上方提示下载好 将文件解压
解压后的文件入下：
2、富文本编辑器的应用
将解压后的文件复制到webapp文件中
3、新建一个jsp页面，看看效果
界面效果如下：
界面代码如下：
实现富文本编辑器三步骤：
- 导入js
- 定义文本域 文本域需要id
- 根据id生成对应的富文本编辑器
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<%--导入js --%>
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<h1>新闻增加界面</h1><form action="doAdd.jsp" method="post" enctype="multipart/form-data"><p><input type="text" name="title"></p><%--定义文本域 文本域需要id --%><p><textarea id="myEditor" type="text" name="content"></textarea></p><p><%--文件选择器 --%><input type="file" name="myFile"></p><button>提交</button>
</form><script>/*根据id生成对应的富文本编辑器*/CKEDITOR.replace('myEditor');
</script>
</body>
</html>利用富文本显示器在浏览器中显示的效果
在控制台中显示的效果：
提示：实际上从index.jsp页面提交过去的数据是网页代码
doAdd.jsp代码
<%
String title=request.getParameter("title");
String content=request.getParameter("content");
System.out.print(content);
out.print(content);
%>二、文件上传
文件上传的jar包有smartUpload 、commons fileUpload 但是smartUpload已经停止更新 所以建议使用commons fileUpload 来进行文件上传
commons fileUpload 官网链接如下：
commons-fileuploadhttps://commons.apache.org/proper/commons-fileupload/using.html
在此官网里面我们可以看到如下示例代码 我们可以进行借鉴分析
文件上传必须要注意的规则：
1、使用commons fileUpload 组件需要在项目中引入jar包。并将jar包添加到webapp/WEB-INF/lib目录下 如下如所示：
2、需要设置表单的enctype属性
3、设置了enctype属性后，表单必须以post方式提交
文件上传案例
要求：
上传的文件保存到指定磁盘文件中并且命名不重复，上传的文件后缀名要对应
界面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<%--导入js --%>
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<h1>新闻增加界面</h1>
<%--文件上传必须注意的规则1、必须是post2、必须是多段式表单 enctype="multipart/form-data"--%>
<form action="doAdd.jsp" method="post" enctype="multipart/form-data"><p><input type="text" name="title"></p><%--定义文本域 文本域需要id --%><p><textarea id="myEditor" type="text" name="content"></textarea></p><p><%--文件选择器 --%><input type="file" name="myFile"></p><button>提交</button>
</form><script>/*根据id生成对应的富文本编辑器*/CKEDITOR.replace('myEditor');
</script>
</body>
</html>如何生成名字不重复？利用UUID
如何获取普通的文本值？（中文不乱码）
通过查看源码 我们可以看到getString可以带有参数
String value = item.getString("utf-8");处理界面的代码：
<%@ page import="org.apache.commons.fileupload.servlet.ServletFileUpload" %>
<%@ page import="org.apache.commons.fileupload.FileItem" %>
<%@ page import="java.util.List" %>
<%@ page import="org.apache.commons.fileupload.disk.DiskFileItemFactory" %>
<%@ page import="java.io.File" %>
<%@ page import="java.util.UUID" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%// 通过tomcat去上传图片// 用轮子 jar 文件上传的jar// 1. smartUpload (已经停止更新n年了)// 2. commons fileUpload// 为基于磁盘的文件项创建工厂// 接收到你的图片,将图片存到电脑磁盘上DiskFileItemFactory factory = new DiskFileItemFactory();// 创建一个新的文件上传处理程序ServletFileUpload upload = new ServletFileUpload(factory);// 设置整体请求大小限制// upload.setSizeMax(1024*5);//5mb// 让处理程序去解析请求中的数据List<FileItem> items = upload.parseRequest(request);// 在List中有普通的数据,文件数据String title="";String content="";String newName="";for (FileItem item : items) {// item有可能是文件,普通数据if (item.isFormField()) {//是不是普通数据System.out.println("普通:");// title,contentString name = item.getFieldName();//表单中的nameString value = item.getString("utf-8");//对应的值System.out.println("\t"+name);System.out.println("\t"+value);//需要进行判断取值if(name.equals("title")){title=value;}if(name.equals("content")){content=value;}} else {System.out.println("文件:");//myFileString name = item.getFieldName();//表单中的nameString oldName=item.getName();//文件名字System.out.println("\t"+name);System.out.println("\t"+oldName);//生成一个新的名字: 不重复newName = UUID.randomUUID().toString().replace("-", "");//生成动态的后缀名// a.png -> .png// f.jpg -> .jpg// 2022040.13.5221.mp4// [2022040,13,5221,mp4]String[] strings = oldName.split("\\.");// id.jpgnewName+="."+strings[strings.length-1];//保存到本地item.write(new File("D:\\picture\\"+newName));}}//打印一下out.println(title);out.println(content);//图片上传的本质// 自己的电脑 -> 服务器的电脑// 文件是保存在服务器?还是数据库呢?// 用户怎么区分自己的数据呢?// 1.将图片保存到硬盘中// 2.将图片的路径存到数据库// 我只要把文件夹映射到服务器中,用户就可以访问那张保存的图片// 我把文件夹映射到服务器中，它的路径是/imagesout.print("<img src='/images/"+newName+"'>");%>文件夹的访问
概念：把文件夹映射到服务器中，让用户可以在浏览器中通过文件夹映射后的路径来访问图片
首先双击服务器servers 进入如下界面 点击左下角Modules 这里你可以看到自己的当前所有模块
随后点击右边框框框起来的按钮 最后将文件夹的路径和命名设置好。（一定要保存！！！）
将服务器运行 打开浏览器
将路径改为 http://localhost:8080/images/1.png(文件中的图片)
当然除了查看图片外还可以查看动图、视频等
文件上传的效果图如下：
界面图：
提交完成后的界面：
图片显示出来的重要代码如下：
// 我只要把文件夹映射到服务器中,用户就可以访问那张保存的图片// 我把文件夹映射到服务器中，它的路径是/imagesout.print("<img src='/images/"+newName+"'>");
最后我们找到设置的路径就可以看到上传成功的图片！！
今天的分享就到这里结束啦！！✌
以上就是关于JavaWeb富文本编辑器与文件上传的一些内容！！📖
期待下次见😊
