Web开发之富文本编辑器&文件上传功能

最新推荐文章于 2024-05-28 15:40:06 发布

小阿飞_

最新推荐文章于 2024-05-28 15:40:06 发布

阅读量2.1k

点赞数 14

分类专栏： Web 文章标签：前端 java 数据库 html5 知识图谱

本文链接：https://blog.csdn.net/yifei_345678/article/details/124023523

版权

Web 专栏收录该内容

30 篇文章 3 订阅

订阅专栏

富文本编辑器

什么是富文本编辑器

富文本编辑器，Multi-function Text Editor, 简称 MTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器

富文本编辑器提供类似于 Microsoft Word 的编辑功能。应用广泛，最先只有 IE 浏览器支持，其它浏览器相继跟进，在功能的丰富性来说，还是 IE 强些。虽然没有一个统一的标准，但对于最基本的功能，各浏览器提供的 API 基本一致，从而使编写一个跨浏览器的富文本编辑器成为可能。

下载富文本编辑器

💬：富文本编辑器的版本有很多，这里我主要讲的是第四代富文本编辑器（CKEditor 4），官网链接已经贴在下面了

Quick Start Guide - CKEditor 4 Documentationhttps://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html点击链接可以进入官网，虽然是纯英文，但是在页面上右键就可以选择中文格式了🙂：

在官网可以直接下载，下载后将文件解压

解压后的ckeditor文件夹：

使用富文本编辑器

使用之前要将富文本编辑器的文件夹复制到web项目的webapp目录下面：

这里先写两个简单的界面来模拟表单的提交，代码如下面两张图：

新闻增加界面：

使用富文本编辑器增加内容：

处理新闻增加的界面：

doAdd1.jsp运行后

在浏览器上打印了：

💬：因为使用了富文本编辑器，所以我们可以发现，上传到浏览器上的文本是具有文本格式和段落的：

在控制台上打印了：

其中，通过文件选择器上传的图片也会在控制台中被打印：

解释：img中的scr里面打印的是代码，不是图片路径

这是因为计算机将图片转成了文本数据来表示，将这个文本数据复制到文本文档中发现有很长一段文本数据，只要复制这个数据就可以显示对应的图片了：

文件上传

官网

文件上传功能

💬：可以上传的文件有很多，如图片，动图，视频......等等

注1：我这里的文件上传功能实现的是在支持web开发的eclipse中，使用文件选择器，将选中的文件保存到指定的电脑磁盘的文件夹中的这类操作

注2：可以使用别人写好的，用于文件上传的jar包： smartUpload (目前已经停止更新) 或者 commons fileUpload(用它) ：

先将用于文件上传的jar包导入到正在开发的web项目中：

此功能需要用到的界面：

a.jsp新闻增加界面，代码如下：

<%@ 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>

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

doAdd1.jsp处理新闻增加的界面中的方法：getString("utf-8")是带参数的方法：