目录
一、富文本编辑器
1.概念
2.如何下载富文本编辑器
3.如何在jsp中使用富文本编辑器
二、文件上传
1.文件上传必须注意的规则：
2.上传的制作
3.文件夹的映射
一、富文本编辑器
1.概念
富文本编辑器提供类似于 Microsoft Word 的编辑功能。应用广泛，最先只有 IE 浏览器支持，其它浏览器相继跟进，在功能的丰富性来说，还是 IE 强些。虽然没有一个统一的标准，但对于最基本的功能，各浏览器提供的 API 基本一致，从而使编写一个跨浏览器的富文本编辑器成为可能。
2.如何下载富文本编辑器
富文本编辑器有很多版本，这里我们主要讲第四代富文本编辑器
官网链接： Quick Start Guide - CKEditor 4 DocumentationLearn how to install, integrate and configure CKEditor 4. More complex aspects, like creating plugins, widgets and skins are explained here, too. API reference and examples included.
https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html进入官网后，可以看到全是英文，右键鼠标，把网页翻译成中文
当点击下载后，会跳转到以下界面，选择标准的下载就可以了，下载后将文件解压
3.如何在jsp中使用富文本编辑器
将解压的富文本编辑器复制到webapp的目录下面
下面是代码展示
📜新闻增加界面
<%@ 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">
<p><input type="text" name="title"></p>
<p>
<%-- 定义文本域 文本域需要id --%>
<textarea id="myEditor" name="content"></textarea>
</p>
<button>提交</button>
</form>
<script>
/* 根据id生成对应的富文本编辑器 */
CKEDITOR.replace( 'myEditor' );
</script>
</body>
</html>📜处理新闻增加的界面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//以防中文乱码
request.setCharacterEncoding("utf-8");
String title=request.getParameter("title");
String content=request.getParameter("content");
out.print(content);
%>📔效果展示
可以发现上传到浏览器上的文本具备了文本格式，还可以实现跨行。
二、文件上传
使用文件上传功能将图片，动图，视频等等上传到网页上，这时就需要用上文件上传的jar包了，文件上传的jar包有两个，第一个是smartUpload (已经N年没更新了，所以我们不用)，第二个就是commons fileUpload，以下是commons fileUpload的官网链接，需要在官网下载jar包
FileUpload – Using FileUpload
https://commons.apache.org/proper/commons-fileupload/using.html先将需要使用的jar包导入到项目中，如图所示
1.文件上传必须注意的规则：
1.必须是post method="POST"
2.必须是多段式表单 enctype="multipart/form-data"
2.上传的制作
📜增加界面
<%@ 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>
<p>
<%-- 定义文本域 文本域需要id --%>
<textarea id="myEditor" name="content"></textarea>
</p>
<p>
<%-- 文件选择器 --%>
<input name="myFile" type="file">
</p>
<button>提交</button>
</form>
<script>
/* 根据id生成对应的富文本编辑器 */
CKEDITOR.replace( 'myEditor' );
</script>
</body>
</html>📜增加处理界面（跳转界面）
<%@page import="java.util.UUID"%>
<%@page import="java.io.File"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="java.util.List"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//以防中文乱码
request.setCharacterEncoding("utf-8");
// 通过tomcat去上传图片
// 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);
//定义接收的三个值
String title="";
String content="";
String newName="";
// 在List中有普通数据，文件数据
for(FileItem item : items){
//item可能是文件，也可能是数据
if (item.isFormField()) { //是不是普通数据
//title,content
String name=item.getFieldName(); //表单中的name
String value=item.getString("utf-8"); //对应的值
//需要进行判断取值
if(name.equals("title")){
title=value;
}
if(name.equals("content")){
content=value;
}
} else { //文件
//myFile
String name=item.getFieldName(); //表单中的name
String oldName=item.getName(); //文件名字
//生成一个新名字：不重复的
//UUID是通用唯一识别码
newName=UUID.randomUUID().toString().replace("-", "");
//生成动态的后缀名
String[] strings=oldName.split("\\."); //根据.来进行切割成数组
newName+="."+strings[strings.length-1]; //取最后一个
//保存到本地
item.write(new File("D:\\img\\"+newName));
}
}
//打印一下
out.println(title);
out.println(content);
// 图片上传的本质
// 自己的电脑上传到服务器的电脑
// 文件是保存在服务器?还是数据库呢?
// 一般保存在服务器中
// 用户怎么区分自己的数据呢?
// 1.将图片保存到硬盘中
// 2.将图片的路径存到数据库
// 我只要吧文件夹映射到服务器中,用户就可以访问那张保存的图片
// 我把文件夹映射到服务器中，它的路径是/img
out.print("<img src='/img/"+newName+"'>");
%>3.文件夹的映射
文件夹映射就是把文件夹中的文件显示在浏览器中，让用户在浏览器中看到该文件。
具体操作：
找到服务器，双击进来，Path是访问路径，Document Base 是文件路径
📔效果展示
今天就分享到这啦~
