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

原创已于 2022-04-10 01:24:08 修改

· 467 阅读

1 ·

版权

文章标签：

#编辑器 #web #java #eclipse

于 2022-04-09 23:42:01 首次发布

本文介绍了富文本编辑器CKEditor的下载与启动，详细讲解了如何在网页中集成CKEditor，并展示了文件上传的配置步骤，包括服务器设置、文件储存路径和网页访问路径的设定，以及文件上传的前端和后端处理代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.什么是富文本编辑器

富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。它是一种解决可一般的用户不同html等网页标记但是需要在网页上设置字体的颜色、大小、样式等信息问题一个文本编辑器。

如图：

富文本编辑器有很多种，我主要讲的是CKEditor。

二.CKEditor

1.CKEditor的下载

直接搜索链接到主页面

WYSIWYG HTML Editor with Collaborative Rich Text Editing

点击文档

根据自己的需要下载，我下载的是CKEditor4的标准套餐。

2.CKEditor的启动

<%@ 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">
          <p><input type="text" name="title"></p>
          <p>
            <%--2.定义文本域 文本域需要id --%>
            <textarea id="myEditor" name="content"></textarea>
          </p>
          <button>提交</button>
</form>
<script>
             /*3.根据id生成对应的富文本编辑器*/
             CKEDITOR.replace( 'myEditor' );
</script>
</body>
</html>

三.文件上传和访问

  <%-- 文件选择器--%>
          <input type="file">

文件上传需要两个jar包，这个大家可以去网上找一下。

把jar包复制到webapp文件下的WEB-INF的lib文件内，记得导包，详细的导包过程我已经讲了就不再写了。

双击服务器进入服务器设置页面，点击Modules

点击第二个选项会弹出一个界面，第一行填入你的文件储存路径，第二行填入你的网页访问路径（自定义）

界面代码：

<%@ 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   method="POST"
          2.必须是多段式表单   enctype="multipart/form-data"

 --%>
<form action="doAdd.jsp"  enctype="multipart/form-data" method="post">
          <p><input type="text" name="title"></p>
          <p>
            <%--2.定义文本域 文本域需要id --%>
            <textarea id="myEditor" name="content"></textarea>
          </p>
          <p>
          <%-- 文件选择器--%>
          <input type="file" name="myFile">
          </p>
          <button>提交</button>
</form>

<script>
             /*3.根据id生成对应的富文本编辑器*/
             CKEDITOR.replace( 'myEditor' );
</script>
</body>
</html>

处理代码：

（E:\\Web10是我电脑上的文件储存路径，/aa是我的网页访问路径）

注意：要在你的文件储存路径后再加上\\

<%@page import="java.util.UUID"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="java.util.List"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@page import="java.io.File"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
         
         // 为基于磁盘的文件创建工厂
         //接收到你的图片，将图片存到电脑磁盘上
         DiskFileItemFactory factory = new DiskFileItemFactory();

         //构建临时文件夹，一般提交图片需要审核时会建立临时文件夹
         //我这里不需要所有注掉了
         //ServletContext servletContext = this.getServletConfig().getServletContext();
         //File repository = (File) servletContext.getAttribute("javax.servlet.context.tempdir");
         //factory.setRepository(repository);

         // 创建一个新的文件上传处理程序
         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()) {
             //是不是不同数据
             //title，content
        		  String name = item.getFieldName();//表单中的name属性
        		  String value = item.getString("utf-8");//对应的值
        		  if(name.equals("title")){
        			  title=value;
        		  }
        		  if(name.equals("content")){
        			  content=value;
        		  }
              } else {
             //myFile，图片，视频
                  String name = item.getFieldName();//表单中的name属性
                  String oldName = item.getName();//文件名称
                  //生成一个新名字：不重复
                  newName=UUID.randomUUID().toString().replace("-","");
                  //生成动态的后缀名
                  String[] strings = oldName.split("\\.");
                  newName+="."+strings[strings.length-1];
                  //保存到本地
                  item.write(new File("E:\\Web10\\"+newName));
              }
         }
         
         //打印
         out.println(title);
         out.println(content);
         
         //  我只要把文件夹映射到服务器中,用户就可以访问那张保存的图片
         //  我把文件夹映射到服务器中，它的路径是/aa
         out.print("<img src='/aa/"+newName+"'>");
         
         
         
         
         
         
         
%>

今天到这里就结束了，拜拜(。・∀・)ノ。