JavaWeb.10.富文本编辑器与文件上传

今天的分享内容是如何使用富文本编辑器和怎么实现文件上传

富文本编辑器

富文本编辑器是什么?
富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器,类似于 Microsoft Word 的编辑功能。
图示:
在这里插入图片描述

下载地址:
https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html
进入下载地址后,有很多版本可以选择,如下例图示,有基本套餐,标准套餐,完整套餐当然还可以自定义选择工具,可以根据自己想要的工具选择套餐下载
JavaWeb.10.富文本编辑器与文件上传_第1张图片

如何使用?
在编写代码之前,我们要先将解压后的文件夹导入到webapp的下方,就像这样:
JavaWeb.10.富文本编辑器与文件上传_第2张图片

再把相应需要的jar包导入
然后进行下列三部操作:
1.导入js
2.定义文本域,注意文本域需要id
3.根据id生成对应的富文本编辑器
完成后即可使用富文本编辑器进行内容的添加了
代码:
index.jsp:新闻添加页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--导入js--%>
    <script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<h1>新闻增加界面</h1>
<%--
文件上传必须注意的规则:
    1. 必须是post method="POST"
    2. 必须是多段式表单 enctype="multipart/form-data"
--%>
<form action="doAdd.jsp" method="post" enctype="multipart/form-data">
    <p><input type="text" name="title"></p>
    <p>
        <%--定义文本域  文本域需要id--%>
        <textarea id="myEditor"  name="content"></textarea>
    </p>
    <p>
        <%--文件选择器--%>
        <input type="file" name="myFile">
    </p>
    <button>提交</button>
</form>
<script>
    /*根据id生成对应的富文本编辑器*/
    CKEDITOR.replace( 'myEditor' );
</script>
</body>
</html>

doAdd.jsp:新闻操作页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<% 
   String  title=request.getParameter("title");
   String  content=request.getParameter("content");
   System.out.print(content);
   out.print(content);
%>

图片上传
按照以往思路,图片应该存进数据库,但是图片存入数据库并不方便,所以我们把图片保存在本地磁盘,再由本地磁盘发到服务器
文件上传必须注意的规则:必须是post method=“post”
必须是多段式表单 ectype=“multipart/form-date”
小知识点:
在doAdd.jsp界面中,item.getString()里面的参数是charset类型,所以我们应该写上utf-8,原理就是:破碎重组,防止乱码
String value = item.getString(“utf-8”);//对应的值
文件的映射
原理:只要把文件夹映射到服务器中,用户就可以访问那张保存的图片了
案例代码:
index.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>
	<%--导入js --%>
	<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<h1>新闻增加界面</h1>
<%--
	文件上传必须注意的规则:
	1. 必须是post  method="post"
	2. 必须是多段式表单 enctype="multipart/form-date"
 
 --%>
<form action="doAdd.jsp" method="post" enctype="multipart/form-date" >
	<p><input type="text" name="title"></p>
	<p>
		<%--定义文本域 文本域需要id --%>
		<textarea id="myEditor" name="content"></textarea>
	</p>
	<p>
		<%--文件选择器 --%>
		<input type="file" name="myFile">
	</p>
	<button>提交</button>
</form>
 
<script >
	/*根据id生成对应的富文本编辑器 */
	CKEDITOR.replace('myEditor');
</script>
</body>
</html>

doAdd.jsp:处理增加的界面

<%@ page import="org.apache.commons.fileupload.servlet.ServletFileUpload" %>
<%@ page import="org.apache.commons.fileupload.FileItem" %>
<%@ page import="java.util.List" %>
<%@ page import="org.apache.commons.fileupload.disk.DiskFileItemFactory" %>
<%@ page import="java.io.File" %>
<%@ page import="java.util.UUID" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
	//String title=request.getParameter("title");
	//String content=request.getParameter("content");
	//System.out.print(content);//所有在富文本编辑器里面写的东西,都会转成html语句
	//out.print(content);
	
    // 通过tomcat去上传图片
 
    // 用轮子 jar 文件上传的jar
    // 1. smartUpload (已经停止更新n年了)
    // 2. commons fileUpload
 
    // 为基于磁盘的文件项创建工厂
    // 接收到你的图片,将图片存到电脑磁盘上
    DiskFileItemFactory factory = new DiskFileItemFactory();
 
    // 创建一个新的文件上传处理程序
    ServletFileUpload upload = new ServletFileUpload(factory);
 
    // 设置整体请求大小限制
   // upload.setSizeMax(1024*5);//5mb
 
    // 让处理程序去解析请求中的数据
    List<FileItem> items = upload.parseRequest(request);
    //  在List中有普通的数据,文件数据
 
    String title="";
    String content="";
    String newName="";
 
    for (FileItem item : items) {
        // item有可能是文件,普通数据
        if (item.isFormField()) {//是不是普通数据
            System.out.println("普通:");
            // title,content
            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("文件:");
            //myFile
            String name = item.getFieldName();//表单中的name
            String oldName=item.getName();//文件名字
            System.out.println("\t"+name);
            System.out.println("\t"+oldName);
 
            //生成一个新的名字: 不重复
           // UUID:通用唯一识别码
            newName = UUID.randomUUID().toString().replace("-", "");
 
            //生成动态的后缀名
            //  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];
 
            //保存到本地
            item.write(new File("D:\\upload"+newName));
        }
    }
 
    //打印一下
    out.println(title);
    out.println(content);
 
    //图片上传的本质
    //  自己的电脑 -> 服务器的电脑
    //  文件是保存在服务器?还是数据库呢?
 
    //  用户怎么区分自己的数据呢?
    //  1.将图片保存到硬盘中
    //  2.将图片的路径存到数据库
 
    //  我只要吧文件夹映射到服务器中,用户就可以访问那张保存的图片
    //  我把文件夹映射到服务器中,它的路径是/images
    out.print("");
 
%>

本次分享就到这里了,拜拜

你可能感兴趣的:(web)