本章目标富文本编辑器,怎么使用富文本编辑器
一、富文本编辑器
1.什么是富文本编辑器
富文本编辑器,Multi-function Text Editor,简称 MTE,是一种可嵌入于浏览器,所见即所得的文本编辑器
好处就是:在富文本编辑器里面编辑的内容,到浏览器去查看,格式都是一样的
注意:所有在富文本编辑器里面写的东西,都会转成html语句,在控制台能看到
2.富文本编辑器下载方式
富文本编辑器有多种,今天主要讲的是第四代富文本编辑器(CKEditor 4),有想深入了解的朋友,可以去官网上查找:
为了方便,这是链接:
https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html
在官网里面下载成功后,可以将文件解压:
3.富文本编辑器的使用
在编写代码之前,我们要先将解压后的文件夹导入到webapp的下方,就像这样:
三部曲:
1.导入js
2.定义文本域,注意文本域需要id
3.根据id生成对应的富文本编辑器
使用富文本编辑器增加内容,看下图:
文件上传编写:
可以上传图片,视频,动图等
文件的上传,需要用到我们的文件选择器,
那么首先我们得先导入两个jar包,咱不用smartUpload,因为目前已经停更了,咱可以用commons fileUpload的jar包,
还记得吗,我们导入的jar包应该放在哪个目录下面呢?(lib项目下方哦~),导入后,右键选择Build Path,点击牛奶瓶,一系列操作成功后,就会出来三个牛奶瓶:
1)图片的上传
图片上传本质:
自己的电脑——>服务器的电脑
文件是保存在服务器?还是数据库呢?
用户怎么区分自己的数据呢?
-
将图片保存到硬盘中
-
将图片的路径存到数据库
文件上传必须注意的规则:
-
必须是post method=“post”
-
必须是多段式表单 ectype=“multipart/form-date”
小知识点:
在doAdd.jsp界面中,item.getString()里面的参数是charset类型,所以我们应该写上utf-8,原理就是:破碎重组,防止乱码
String value = item.getString(“utf-8”);//对应的值
4.文件夹的映射
原理:只要把文件夹映射到服务器中,用户就可以访问那张保存的图片了
二、具体的代码展示:
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("<img src='/upload/"+newName+"'>");
%>