目录
一.什么是富文本编辑器？
富文本编辑器是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于我们在CSDN中写作的编辑功能，方便那些不太懂HTML用户使用。
二.CKEditor介绍
市面上有很多富文本编辑器，目前市面上最火的富文本编辑器有TinyMC，Ckeditor，UEditor，wangEditor，kindeditor，simditor，bootstrap-wysiwyg，summernote，Quill，FreeTextBox.....今天主要是介绍Ckeditor这一款富文本编辑器。
Ckeditor也是一款非常经典的富文本编辑器，官方下载量过千万，现在最新版是CKEditor 5，但是建议大家下载CKEditor 4。它是在非常著名的FCkEditor基础上开发的新版本，FckEditor的用户现在基本都转移到Ckeditor了。
Ckeditor有高性能的实时预览，它特有行内编辑功能，使得编辑内容更加直观，仿佛是在编辑网页一样，有很强的可扩展性，被各大网站广泛运用。
三.CKEditor下载
CKEditor版本已经出到5了，但是建议大家下载CKEditor 4。
链接：https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html
1.点击链接进入官网，官网中都是英文，大家可以点击鼠标右键点击翻译成中文，大家下载该版本。
2.下载完以后大家解压文件，将文件拖进eclipse便器中，web项目中的webapp文件下
四.使用富文本编辑器
大家看下下方代码，该代码有详细备注，教大大家如何使用富文本编辑器。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 1.先导js文件 -->
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<!-- 2.创建一个表单 -->
<!-- 使用文件选择器的注意事项:
1.必须是post 因为post不限字数 method="post"
2.必须是多段式表单 enctype="multipart/form-data"
这两个在有文件上传的时候一定要写 -->
<form action="daAdd.jsp" method="post" enctype="multipart/form-data">
<p><input type="text" name="title"></p>
<!-- textarea文本域 -->
<p><textarea id="myEditor" name="content"></textarea></p>
<!-- 文件选择器 file -->
<p><input type="file"></p>
<p><button>提交</button></p>
</form>
<script>
//根据标签的id名生成富文本编辑器 CKEDITOR.replace
CKEDITOR.replace('myEditor');
</script>
</body>
</html>富文本编辑器：我们可以在该富文本编辑器上面直接编辑文字，然后点击提交
3.当我们点击提交以后，跳转到daAdd界面，该界面拿到首页传过来的数据。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//先拿到传过来的数据，根据标签的name(名字拿到值)
String name=request.getParameter("title");
String text=request.getParameter("content");
out.print(text);
out.print(name);
%>五.文件上传
我们使用文件选择器时，需要使用到jar包，所以大家去官网把jar包下载过来。
链接：https://commons.apache.org/proper/commons-fileupload/using.html
文件选择器可以 上传的文件很多：图片，视频，动图....等等。
1. 进入官网将英文翻译成中文，点击左侧，点击下载，进入下载页面，下载红色框中的两个jar包。
2.jar包下载完成以后，导入web项目中。
3.文件上传功能代码
1.index页面代码如下
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 1.先导js文件 -->
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<!-- 2.创建一个表单 -->
<!-- 使用文件选择器的注意事项:
1.必须是post 因为post不限字数 method="post"
2.必须是多段式表单 enctype="multipart/form-data"
这两个在有文件上传的时候一定要写 -->
<form action="daAdd2.jsp" method="post" enctype="multipart/form-data">
<p><input type="text" name="title"></p>
<!-- textarea文本域 -->
<p><textarea id="myEditor" name="content"></textarea></p>
<!-- 文件选择器 file -->
<p><input type="file" name="myFile"></p>
<p><button>提交</button></p>
</form>
<script>
//根据标签的id名生成富文本编辑器 CKEDITOR.replace
CKEDITOR.replace('myEditor');
</script>
</body>
</html>2.点击提交以后跳转到daAdd.jsp代码如下
<%@page import="java.io.File"%>
<%@page import="java.util.UUID"%>
<%@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"%>
<%
//先导入jar包 文件上传的jar包
//jar包我们使用commons fileUpload
//1. 为基于磁盘的文件项创建工厂
//接收到你的图片,将图片存到电脑磁盘上
//DiskFileItemFactory 有两个包，大家导包的时候导为
//org.apache.commons.fileupload.disk的这个包
DiskFileItemFactory factory=new DiskFileItemFactory();
//2.创建一个新的文件上传处理程序
//ServletFileUpload 导包时导org.apache.commons.fileupload.servlet
ServletFileUpload upload=new ServletFileUpload(factory);
//3.设置整体请求大小
//当我们做一些软件时，这个可以去限制用户上传的图片的大小
//先注掉因为先给大家示范上传图片，该大小的限制不方便给大家做操作，大家在以后项目中可以运用到
//upload.setSizeMax(1024*5);//5mb
//4.让处理程序去解析请求中的数据
List<FileItem> items=upload.parseRequest(request);
//这是一个数组，里面有普通数据，有文件数据
//定义变量
String title="";
String textcont="";
String newName="";
//5.遍历数组
for(FileItem item:items){
//判断是什么文件
if(item.isFormField()) {//判断是否是普通文件
//普通数据
String name=item.getFieldName();//表单中的name
String vaule=item.getString("utf-8");//对应的值 在该里面加上utf-8是为了防止乱码
//需要进行判断取值
if(name.equals("title")){
title=vaule;
}
if(name.equals("content")){
textcont=vaule;
}
}else{
//文件
out.println(":");
String name=item.getFieldName();//表单中的name
String oldName=item.getName();
//把拿到的文件生成一个新的名字，并且不重复:UUID
//由于我们拿到的名字中会有-所以替换成"";
newName+=UUID.randomUUID().toString().replace("-","");
//生成动态的后缀名
// a.png -> .png
// f.jpg -> .jpg
// 2022040.13.5221.mp4
// [2022040,13,5221,mp4]
//拿到文件的值，从.进行截取,这样子可以拿到文件的后缀名
String[] String=oldName.split("\\.");
//在我们新建的名字，在加上从该传过来的文件截取以后的后缀名
newName+="."+String[String.length-1];
//保存到本地
//先在E盘中创建一个JavaWeb10文件
item.write(new File("E:\\JavaWeb10\\"+newName));
}
}
小编今天主要给大家讲的是CKEditor富文本器，其他的富文本器大家也可以去使用一下，拓展一下，文件上传的代码大家仔细去看一下，上面有详细的注释。
