JavaWeb10（富文本编辑器及文件上传功能）_java 富文本上传图片功能-优快云博客

富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于 Microsoft Word 的编辑功能，容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱。

富文本编辑器不同于文本编辑器，程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里（当然付费的功能会更强大些），方便用户编辑文章或信息。比较好的文本编辑器有kindeditor,fckeditor等。

富文本编辑器的下载：

下载地址：

https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.htmlhttp://CKEditor 4 Quick Start Guide

建议下载第二个标准套餐，既不会太繁琐，该有的功能也都有。

下载完成过后将压缩包解压，然后将文件夹复制粘贴到项目中的webapp目录下面去

然后我们再新建一个jsp文件，（如何建jsp文件可以查看博主前面的博客，其中有具体介绍

https://blog.youkuaiyun.com/weixin_65474399/article/details/123724366?spm=1001.2014.3001.5502http://xn--javawebweb-9j5ph93bg3op4j03mpiutncwxiqq9el3lmpzhx0efpy8a6a）然后我们写一个简易的表单，来测试一下富文本编辑器的效果：

效果图:

注意：所有在富文本编辑器中编写的语句都会变成html语句，那些加粗，斜体之类的效果都是用html语句来完成的。

现在我们已经完成了文字的添加，这时候很多朋友就会提出疑问了，难道富文本编辑器只能用来编写文字嘛，接下来博主就来给大家分享一下，富文本编辑器如何搭配文件选择器来实现文件上传功能。

代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index01</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>

二，文件上传

官网地址：

https://commons.apache.org/proper/commons-fileupload/using.htmlhttps://commons.apache.org/proper/commons-fileupload/using.html

文件上传需要注意的规则：

必须是post method="POST"
必须是多段式表单 enctype="multipart/form-data

找到官网中的这段代码，复制粘贴到新建的jsp文件中去，然后进行使用

生成动态的文件后缀名：

            //生成动态的后缀名
            //  a.png -> .png
            //  f.jpg -> .jpg
            //      2022040.13.5221.mp4
            //      [2022040,13,5221,mp4]
            String[] strings = oldName.split("\\.");

            // id.jpg
            newName+="."+strings[strings.length-1];

生成随机的不重复文件名：

            //生成一个新的名字: 不重复
            newName = UUID.randomUUID().toString().replace("-", "");

将文件保存到本地：

             //保存到本地
             item.write(new File("D:\\code Resources\\icons\\upload\\"+newName));

效果图：

代码：

<%@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));
    	}
    }
%>