一、富文本编辑器

1、下载富文本编辑器

2、富文本编辑器的应用

二、文件上传

文件上传必须要注意的规则：

文件上传案例

文件夹的访问

一、富文本编辑器

富文本编辑器在项目中很常见，它可以将文本，图片等信息存入数据库，再编辑一些图文混排的信息的时候很有用，比如商城项目的商品详情页，包含很多带有样式的文字和图片。

接下来我们来看看用法吧！

1、下载富文本编辑器

首先先下载好富文本编辑器，官方链接如下：

CKEditor 4 Quick Start Guidehttps://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html

点击进入页面根据上方提示下载好将文件解压

解压后的文件入下：

2、富文本编辑器的应用

将解压后的文件复制到webapp文件中

3、新建一个jsp页面，看看效果

界面效果如下：

界面代码如下：

实现富文本编辑器三步骤：

导入js
定义文本域文本域需要id
根据id生成对应的富文本编辑器

<%@ 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><form action="doAdd.jsp" method="post" enctype="multipart/form-data"><p><input type="text" name="title"></p><%--定义文本域 文本域需要id --%><p><textarea id="myEditor" type="text" name="content"></textarea></p><p><%--文件选择器 --%><input type="file" name="myFile"></p><button>提交</button>
</form><script>/*根据id生成对应的富文本编辑器*/CKEDITOR.replace('myEditor');
</script>
</body>
</html>

利用富文本显示器在浏览器中显示的效果

在控制台中显示的效果：

提示：实际上从index.jsp页面提交过去的数据是网页代码

doAdd.jsp代码

<%
String title=request.getParameter("title");
String content=request.getParameter("content");
System.out.print(content);
out.print(content);
%>

二、文件上传

文件上传的jar包有smartUpload 、commons fileUpload 但是smartUpload已经停止更新所以建议使用commons fileUpload 来进行文件上传

commons fileUpload 官网链接如下：

commons-fileuploadhttps://commons.apache.org/proper/commons-fileupload/using.html

在此官网里面我们可以看到如下示例代码我们可以进行借鉴分析

文件上传必须要注意的规则：

1、使用commons fileUpload 组件需要在项目中引入jar包。并将jar包添加到webapp/WEB-INF/lib目录下如下如所示：

2、需要设置表单的enctype属性

3、设置了enctype属性后，表单必须以post方式提交

文件上传案例

要求：

上传的文件保存到指定磁盘文件中并且命名不重复，上传的文件后缀名要对应

界面代码：

<%@ 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、必须是post2、必须是多段式表单 enctype="multipart/form-data"--%>
<form action="doAdd.jsp" method="post" enctype="multipart/form-data"><p><input type="text" name="title"></p><%--定义文本域 文本域需要id --%><p><textarea id="myEditor" type="text" name="content"></textarea></p><p><%--文件选择器 --%><input type="file" name="myFile"></p><button>提交</button>
</form><script>/*根据id生成对应的富文本编辑器*/CKEDITOR.replace('myEditor');
</script>
</body>
</html>

如何生成名字不重复？利用UUID

如何获取普通的文本值？（中文不乱码）

通过查看源码我们可以看到getString可以带有参数

String value = item.getString("utf-8");

处理界面的代码：

<%@ 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" %>
<%// 通过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,contentString name = item.getFieldName();//表单中的nameString 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("文件:");//myFileString name = item.getFieldName();//表单中的nameString oldName=item.getName();//文件名字System.out.println("\t"+name);System.out.println("\t"+oldName);//生成一个新的名字: 不重复newName = UUID.randomUUID().toString().replace("-", "");//生成动态的后缀名//  a.png -> .png//  f.jpg -> .jpg//      2022040.13.5221.mp4//      [2022040,13,5221,mp4]String[] strings = oldName.split("\\.");// id.jpgnewName+="."+strings[strings.length-1];//保存到本地item.write(new File("D:\\picture\\"+newName));}}//打印一下out.println(title);out.println(content);//图片上传的本质//  自己的电脑 -> 服务器的电脑//  文件是保存在服务器?还是数据库呢?//  用户怎么区分自己的数据呢?//  1.将图片保存到硬盘中//  2.将图片的路径存到数据库//  我只要把文件夹映射到服务器中,用户就可以访问那张保存的图片//  我把文件夹映射到服务器中，它的路径是/imagesout.print("<img src='/images/"+newName+"'>");%>

文件夹的访问

概念：把文件夹映射到服务器中，让用户可以在浏览器中通过文件夹映射后的路径来访问图片

首先双击服务器servers 进入如下界面点击左下角Modules 这里你可以看到自己的当前所有模块

随后点击右边框框框起来的按钮最后将文件夹的路径和命名设置好。（一定要保存！！！）

将服务器运行打开浏览器

将路径改为 http://localhost:8080/images/1.png(文件中的图片)

当然除了查看图片外还可以查看动图、视频等

文件上传的效果图如下：

界面图：

提交完成后的界面：

图片显示出来的重要代码如下：

    //  我只要把文件夹映射到服务器中,用户就可以访问那张保存的图片//  我把文件夹映射到服务器中，它的路径是/imagesout.print("<img src='/images/"+newName+"'>");

最后我们找到设置的路径就可以看到上传成功的图片！！

今天的分享就到这里结束啦！！✌

以上就是关于JavaWeb富文本编辑器与文件上传的一些内容！！

JavaWeb富文本编辑器与文件上传相关推荐

富文本编辑器CKeditor文件上传下载SmartUpload插件
目录富文本编辑器 1.概述 2.常用富文本编辑器 3.CKeditor介绍 4.CKeditor的使用步骤 4.1 进入官网,下载full版本(这个代表的是使用全部功能,如果是simple或者sta ...
Ueditor富文本编辑器修改图片上传路径
Ueditor富文本编辑器修改图片上传路径版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/QZPHP_L 由于网站后台使用Zend framewor ...
vue3中使用vue-quill富文本编辑器重写图片上传功能
最近开发的一个vue3+element-plus的项目,需要用到富文本编辑器,最终选择了VueQuill这一款轻便型的富文本编辑器. 说说遇到的问题:富文本编辑器的图片上传,默认是直接以base64图 ...
百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...
关于移动手机端富文本编辑器qeditor图片上传改造
日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...
edui 富文本编辑_改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...
使用 SpringBoot + Ckeditor 富文本编辑器、图片上传
一.前言在一些页面中,进行发表文章.评论等功能,都要涉及到富文本编辑器, 如 CSDN 的 markdown 编辑器使用传统的 textarea 标签是远远满足不了需求的, 现在流行的富文本编辑 ...
MVC+API 实现tinymce富文本编辑器上传图片、上传视频
首先是要下载一个版本,这里我自己用的放到GitHub上了 https://github.com/dhgr1/tinymce 之前我试过官网的以及别的地方的,但都会报错,我也没搞清楚原因,你们可以自己去 ...
vue-quill-editor富文本编辑器及图片上传到服务器
最近在做后台管理平台,该项目是使用vue+element-ui框架,有一个界面就是关于消息推送的,在网上找了一圈,比较适合的就是vue-quill-editor富文本编辑器 1.需求完成图: 此项目就 ...

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

一、富文本编辑器

1、下载富文本编辑器

2、富文本编辑器的应用

二、文件上传

文件上传必须要注意的规则：

文件上传案例

文件夹的访问

JavaWeb富文本编辑器与文件上传相关推荐

最新文章

热门文章