目录
富文本编辑器
什么是富文本编辑器
常用的富文本编辑器
使用富文本编辑器
文件上传
图片上传的本质
文件夹的映射
富文本编辑器
什么是富文本编辑器
富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，方便那些不太懂HTML用户使用，富文本编辑器的应用非常广泛，它的历史与图文网页诞生的历史几乎一样长。
常用的富文本编辑器
TinyMCE是一个开源的所见即所得的HTML编辑器，界面相当清新，界面模拟本地软件的风格，顶部有菜单栏。支持图片在线处理，插件多，功能非常强大，易于集成，并且拥有可定制的主题。支持目前流行的各种浏览器，它可以达到微软Word类似的编辑体验。
Ckeditor也是一款非常经典的富文本编辑器，官方下载量过千万。Ckeditor有高性能的实时预览，它特有行内编辑功能，使得编辑内容更加直观，仿佛是在编辑网页一样，有很强的可扩展性，被各大网站广泛运用。
UEditor是由百度出品的富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源免费。这款编辑器用过的人也非常多，功能非常全面，插件很多，还可以很方便插入百度地图，接入十分简单。
KindEditor历史也很长了，用户数也不少，国内某公司出品。免费开源。界面类似于office word，界面和功能中规中矩，文档齐全，使用还算方便。
WangEditors轻量级，小巧实用，配置方便，使用简单。可以自定义皮肤功能，免费开源。用户数量也很多，尤其是用在一些轻型环境，比如论坛社区回帖。wangEditor是国人出品的开源项目。
使用富文本编辑器
这里演示的是第四代富文本编辑器（CKEditor 4）下载地址
将下载好的富文本编辑器解压并放入项目中
在项目中创建页面.JSP文件如下图所示
文件上传
使用commons fileUpload实现文件上传
先将jar包导入到项目中
新闻增加页面，代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻增加界面</title>
<!-- 先将下载后的富文本编辑器文件夹复制到项目的webapp目录下，再： -->
<!-- 1.导入src:ckeditor目录下面的ckeditor.js -->
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<h1>新闻增加界面</h1>
<%--
文件上传中表单必须注意的规则:
1. 必须是post method="POST"
2. 必须是多段式表单 enctype="multipart/form-data"
但是多段式表单出现中文乱码情况时不能用request.getCharacterEncoding()来解决
，因为这种方法只对普通表单有用，对于多段式表单，可以使用破碎重组
--%>
<form action="doAdd1.jsp" method="post" enctype="multipart/form-data">
<p><input type="text" name="title"></p>
<p>
<!-- 2.定义文本域,具备id -->
<textarea name="content" id="myEditor"></textarea>
</p>
<%--文件选择器--%>
<input type="file" name="myFile">
<button>提交</button>
</form>
<script>
//根据id生成富文本编辑器
CKEDITOR.replace('myEditor');
</script>
</body>
</html>doAdd.jsp新闻添加处理页面
<%@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"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<%--
多段式表单 enctype="multipart/form-data"
但是多段式表单出现中文乱码情况时不能用request.getCharacterEncoding()来解决
，因为这种方法只对普通表单有用，对于多段式表单，可以使用破碎重组,或者getString("utf-8")在拿值的时候将它设置为中文
--%>
<%
// 为基于磁盘的文件项创建工厂
//比如：你上传一张图片到微信上
// 微信的服务器就会：接收到你的图片,将图片存到电脑磁盘上
DiskFileItemFactory factory = new DiskFileItemFactory();
// 创建一个新的文件上传处理程序：upload对象
ServletFileUpload upload = new ServletFileUpload(factory);
String title="";
String content="";
String newName="";
// 让处理程序（upload对象）去解析请求中的数据
// 因为请求中的数据不止是图片，还有很多数据需要解析处理
List<FileItem> items = upload.parseRequest(request);
// 在List中有普通的数据、文件数据
for (FileItem item : items) {
if(item.isFormField()){//是普通的数据,如新闻标题,新闻内容
//拿到这些数据
System.out.println("普通:");
String name = item.getFieldName();//取表单中的name属性
String value = item.getString("utf-8");//取name属性对应的值!
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("文件:");
String name = item.getFieldName();//取表单中的name
String oldName=item.getName();//取文件的名字!
System.out.println("\t"+name);
System.out.println("\t"+oldName);
//防止文件名字重复：生成一个新名字
newName = UUID.randomUUID().toString().replace("-", "");//UUID
//生成动态的文件后缀名:.png,.jpg,.gif,.mp4......等等
//将文件原来的名字进行切割：
//切割前：2022040.13.5221.mp4
//切割后：[2022040,13,5221,mp4]
String[] strings = oldName.split("\\.");//.代表任意字符,要使用转义符/将它转成真正的.点
newName+="."+strings[strings.length-1];//拿到切割后数组的最后一位：.xxx
//如果是文件就将文件保存到本地
item.write(new File("E:\\icons\\"+newName));
}
}
%>图片上传的本质
图片从自己的电脑保存到服务器的电脑，文件可以保存在服务器，数据库中，将图片保存到硬盘中，或者将图片的路径存到数据库都是文件的上传。
文件夹的映射
概念：把文件夹映射到服务器中，让用户可以在浏览器中通过文件夹映射后的路径来访问图片
具体操作：
在eclipse中双击服务器到如 下界面，再点击红色框按钮，分别填入要映射的电脑磁盘中的文件夹的路径和映射后的路径名称：
