目录
一.什么是富文本编辑器？
二.CKEditor介绍
三.CKEditor下载
四.使用富文本编辑器
五.文件上传
一.什么是富文本编辑器？
富文本编辑器是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于我们在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。
链接：/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.replaceCKEDITOR.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包下载过来。
链接：/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.replaceCKEDITOR.replace('myEditor');</script></body></html>
2.点击提交以后跳转到daAdd.jsp代码如下
<%@page import="java.io.File"%><%@page import="java.util.UUID"%><%@page import="mons.fileupload.FileItem"%><%@page import="java.util.List"%><%@page import="mons.fileupload.servlet.ServletFileUpload"%><%@page import="mons.fileupload.disk.DiskFileItemFactory"%><%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%//先导入jar包 文件上传的jar包//jar包我们使用commons fileUpload//1. 为基于磁盘的文件项创建工厂//接收到你的图片,将图片存到电脑磁盘上//DiskFileItemFactory 有两个包，大家导包的时候导为//mons.fileupload.disk的这个包DiskFileItemFactory factory=new DiskFileItemFactory();//2.创建一个新的文件上传处理程序//ServletFileUpload 导包时导mons.fileupload.servletServletFileUpload 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();//表单中的nameString 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();//表单中的nameString oldName=item.getName();//把拿到的文件生成一个新的名字，并且不重复:UUID//由于我们拿到的名字中会有-所以替换成"";newName+=UUID.randomUUID().toString().replace("-","");//生成动态的后缀名// a.png -> .png// f.jpg -> .jpg//040.13.5221.mp4//[040,13,5221,mp4]//拿到文件的值，从.进行截取,这样子可以拿到文件的后缀名String[] String=oldName.split("\\.");//在我们新建的名字，在加上从该传过来的文件截取以后的后缀名newName+="."+String[String.length-1];//保存到本地//先在E盘中创建一个JavaWeb10文件item.write(new File("E:\\JavaWeb10\\"+newName));}}
小编今天主要给大家讲的是CKEditor富文本器，其他的富文本器大家也可以去使用一下，拓展一下，文件上传的代码大家仔细去看一下，上面有详细的注释。
