Web10——富文本编辑器与文件上传

最新推荐文章于 2024-08-03 11:41:10 发布

洛洛虎虎生威

最新推荐文章于 2024-08-03 11:41:10 发布

阅读量1.4k

点赞数 5

文章标签： web 前端

本文链接：https://blog.csdn.net/weixin_65975275/article/details/124067194

版权

大家好呀，我带着热乎乎的知识来啦~

今天我们要讲的是富文本编辑器与文件上传功能，大家好好听哦~

一.富文本编辑器

1.什么是富文本编辑器？

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

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

2.富文本的下载

Quick Start Guide - CKEditor 4 Documentation

3.富文本的使用

下载过来之后，先把压缩包解压，然后再把下列中的ckeditor文件夹放到我们项目的webapp下

4.使用富文本的三个必须条件

<%--1.导入js --%>

<%--2.定义文本域文本域需要id --%>

<%--3.根据你的id生成对应的富文本编辑器--%>

5.新闻增加界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <%--1.导入js --%>
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<h1>新闻增加界面</h1> 
<form action="doAdd.jsp" method="post" enctype="multipart/form-data">
    <p> <input type="text" name="title"></p>
    <%--2.定义文本域  文本域需要id --%>
    <p> <textarea name="content" id="myEditor"></textarea></p> 
    <p>  
    <%--文件选择器 --%>
     <input type="file">
    </p>
    
    <p> <button>提交</button> </p>
</form>

<script type="text/javascript">
<%--3.根据你的id生成对应的富文本编辑器--%>
CKEDITOR.replace('myEditor');

</script>
</body>
</html>

处理增加界面的功能

<%@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 import="java.util.UUID"%>
<%@page import="java.io.File"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
//接收信息
 String title =request.getParameter("title");
 String content=request.getParameter("content");
 System.out.print(content);
 out.print(content);

%>

界面显示就是这样的：

二.文件上传

官网：https://commons.apache.org/proper/commons-fileupload/using.html

1.文件上传必须注意的规则：
<1>.必须是post
<2>.必须是多段式表单 enctype="multipart/form-data"

2. 设置整体请求大小限制：upload.setSizeMax();

3.图片上传的本质（自己的电脑-》服务器的电脑）（一般保存在服务器）

4.用户怎么区分自己的数据？

<1>.将图片保存到硬盘中
<2>.将图片的路径存到数据库

Test.jsp新闻增加界面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <%--1.导入js --%>
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<h1>新闻增加界面</h1>

<%--文件上传必须注意的规则：
    1.必须是post
    2.必须是多段式表单 enctype="multipart/form-data"
 --%>
 
<form action="doAdd.jsp" method="post" enctype="multipart/form-data">
    <p> <input type="text" name="title"></p>
    <%--2.定义文本域  文本域需要id --%>
    <p> <textarea name="content" id="myEditor"></textarea></p> 
    <p>  
    <%--文件选择器 --%>
     <input type="file">
    </p>
    
    <p> <button>提交</button> </p>
</form>



<script type="text/javascript">
<%--3.根据你的id生成对应的富文本编辑器--%>
CKEDITOR.replace('myEditor');

</script>
</body>
</html>

doAdd.jsp处理新闻增加界面：

<%@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 import="java.util.UUID"%>
<%@page import="java.io.File"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");
//接收信息
 //String title =request.getParameter("title");
 //String content=request.getParameter("content");
 //System.out.print(content);
 //out.print(content);

 
 //为基于磁盘的文件项创建工厂
 //接收到你的图片，将图片存到电脑磁盘上
 DiskFileItemFactory factory=new DiskFileItemFactory();
 
 //创建一个新的文件上传处理程序
 ServletFileUpload upload=new ServletFileUpload(factory);
 
 //设置整体请求大小限制
 // upload.setSizeMax(1024*5);//最大是5mb
 
 //让处理程序去解析请求中的数据
 List<FileItem> items=upload.parseRequest(request);
 //在List中有普通的数据，也有文件数据
 
  String newName=""; 
  String title ="";
  String content="";
 for(FileItem item:items){
	 System.out.println("普通：");
	 //item有可能是文件，也有可能是文件数据
	 if(item.isFormField()){//是不是普通数据
	 String name=item.getFieldName();//表单中的name
	 String value=item.getString("utf-8");//对应的值
	 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("-","");
		 //生成动态的后缀名
		 String[] strings=oldName.split("\\.");
		 newName+="."+strings[strings.length-1];
		 //保存到本地
		item.write(new File("D:\\JSP\\"+newName)); 
	 }
 }
 
 //打印一下
 out.println(title);
 out.println(content);
 
 //图片上传的本质 （自己的电脑-》服务器的电脑）（一般保存在服务器）
 //用户怎么区分自己的数据
 
 //1.将图片保存到硬盘中
 //2.将图片的路径存到数据库
 
 //我只要把文件夹配置到服务器中，用户就可以访问
 //jia/img是因为我把文件夹映射到服务器中，它的路径是/img
 out.print("<img src='/img/"+newName+"'>");
 
%>

好啦，今天的课堂就到这里啦，下期见！