web富文本编辑器

article/2025/11/9 10:54:24

哈喽，大家好，我今天给大家带来了一个富文本编辑器的使用，也就是如何在你的文本应用中使用富文本编辑器，我是使用的是CKeditor ，下面，就跟我一起去学习吧

一，为什么要使用富文本编辑器

富文本编辑器（Rich Text Editor，RTE）是一种可内嵌于浏览器，所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能，方便那些不太懂HTML用户使用，富文本编辑器的应用非常广泛，在一些情况下，用户不好编辑增加需要的文字，使用就需要富文本自编辑器来提升用户体验！

二，常用的富文本编辑器

TinyMCE是一个开源的所见即所得的HTML编辑器，界面相当清新，界面模拟本地软件的风格，顶部有菜单栏。支持图片在线处理，插件多，功能非常强大，易于集成，并且拥有可定制的主题。支持目前流行的各种浏览器，它可以达到微软Word类似的编辑体验。

Ckeditor也是一款非常经典的富文本编辑器，官方下载量过千万。Ckeditor有高性能的实时预览，它特有行内编辑功能，使得编辑内容更加直观，仿佛是在编辑网页一样，有很强的可扩展性，被各大网站广泛运用。

UEditor是由百度出品的富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源免费。这款编辑器用过的人也非常多，功能非常全面，插件很多，还可以很方便插入百度地图，接入十分简单。

** KindEditor**历史也很长了，用户数也不少，国内某公司出品。免费开源。界面类似于office
word，界面和功能中规中矩，文档齐全，使用还算方便。

WangEditors轻量级，小巧实用，配置方便，使用简单。可以自定义皮肤功能，免费开源。用户数量也很多，尤其是用在一些轻型环境，比如论坛社区回帖。wangEditor是国人出品的开源项目。

三，使用CKeditor

首先导入CKeditor
将你下载的CKeditor解压copy进你的项目
导入jar包（也可以自己写）
完成后是这样的
开始写代码

indext.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻系统</title><script src="ckeditor/ckeditor.js"></script>
</head>
<body><h1>新闻增加页面</h1><from action="doAdd.jsp" method="post" enctype="multipart/form-data"><p><input tyep="text" name="titli"></p><p><textarea name="content" id="MyEditor">  </textarea></p><p><input type="file"></p><button>提交</button></from><script>CKEDITOR.replace('MyEditor');</script>
</body>
</html>

处理-doAdd.jsp

<%@page import="java.io.File"%>
<%@page import="java.util.UUID"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@ page import="java.util.List"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%
/**String title = request.getParameter("title");
String content = request.getParameter("content");
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,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("E:\\code Resources\\icons\\upload\\" + newName));}
}//打印一下
out.println(title);
out.println(content);
//打印一下
out.println(title);
out.println(content);//图片上传的本质
//  自己的电脑 -> 服务器的电脑
//  文件是保存在服务器?还是数据库呢?//  用户怎么区分自己的数据呢?
//  1.将图片保存到硬盘中
//  2.将图片的路径存到数据库//  我只要吧文件夹映射到服务器中,用户就可以访问那张保存的图片
//  我把文件夹映射到服务器中，它的路径是/images
out.print("<img src='/upload/" + newName + "'>");
%>