百度出品的富文本编辑器：
开发目录和部署目录：
富文本编辑器引入代码：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>
</html>ue代表了富文本编辑器；
富文本编辑器实现例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.7.1.min.js"></script>
</head>
<body>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="utf8-jsp/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="utf8-jsp/ueditor.all.js"></script>
<input type='button' value='提交' class='btn'>
<!-- 实例化编辑器 -->
<div class="aaa"></div>
<script type="text/javascript">
var ue = UE.getEditor('container');
$(".btn").on("click",function(){
console.log(ue.getContent())
$(".aaa").html(ue.getContent())//获取编辑器里的内容
})
</script>
</body>
</html> 
在项目中的应用流程：
add.html写入富文本编辑器模块---add.js引入编辑器参数，ajax中传给后端参数----后端接受编辑器参数，拼接sql--数据库增加introduce字段---数据库更新
update.html写入编辑器---update.js回显设置编辑器内容，修改传入参数--SearchById,UpdateSelvet接收参数
student.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/jquery.cookie.min.js"></script>
<script src="js/student.js" defer></script>
<style type="text/css">
.page{
display:flex;
margin-left:-40px;
}
.page li{
list-style:none;
border:1px solid #444;
font-size:14px;
padding:5px;
cursor:pointer;
margin-right:5px;
}
.page li.current{
background:#444;
color:#fff;
}
</style>
</head>
<body>
<input type='button' value='添加'' class='add'>
<input type='button' value='批量删除' class='deteleMore'>
<table border='1'>
<thead>
<tr>
<th><input type='checkbox' class='checkAll'></th>
<th>id</th>
<th>name</th>
<th>age</th>
<th>sex</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!--<div class='addModel'>
姓名:<input type='text' class='addName'><br>
性别:<input type='text' class='addSex'><br>
年龄:<input type='text' class='addAge'><br>
<input type='button' value="添加" class='addBtn'>
<input type='button' value="取消" class='back'>
</div> -->
<ul class="page">
</ul>
</body>
</html>student.js:
//查找学生
var page=1
var pageSize=6
var loadData=function(){
$.ajax({
url:"SearchServlett",
type:"get",
data:{
page,
pageSize
},
success:function(value){
var arr = value.data
$("tbody").empty()
for(var i=0;i<arr.length;i++){
$("tbody").append("<tr>"+
"<th><input type='checkbox' class='delitem' index='"+arr[i].id+"'></th>"+
"<td>"+arr[i].id+"</td>"+
"<td>"+arr[i].name+"</td>"+
"<td>"+arr[i].age+"</td>"+
"<td>"+arr[i].sex+"</td>"+
"<td><input type='button' value='修改 ' class='update' index='"+arr[i].id+"'> <input type='button' value='删除' class='delete' index='"+arr[i].id+"'> </td>"+
"</tr>")
}
},
error:function(){
alert("出错啦！")
},
})
}
loadData()
//加载页码
$.ajax({
url:"GetCountServlet",
type:"get",
success:function(value){
$(".page").append("<li class='first'>首页</li>")
$(".page").append("<li class='prev'>上一页</li>")
for(var i=0;i<Math.ceil(value.num/pageSize);i++){
if(i==0){
$(".page").append("<li class='current item'>"+(i+1)+"</li>")
}else{
$(".page").append("<li class='item'>"+(i+1)+"</li>")
}
}
$(".page").append("<li class='next'>下一页</li>")
$(".page").append("<li class='last'>尾页</li>")
},
error:function(){
alert("出错啦！")
},
})
//任意页码切换
$(".page").on("click",".item",function(){
//数据切换
page=$(this).text()
loadData()
//样式切换
$(this).addClass("current")
$(this).siblings().removeClass("current")
})
//首页
$(".page").on("click",".first",function(){
//数据切换
page=1
loadData()
//样式切换
$(".item").removeClass("current")
$(".item").first().addClass("current")
})
//尾页
$(".page").on("click",".last",function(){
//数据切换
page=$(".item").length
loadData()
//样式切换
$(".item").removeClass("current")
$(".item").last().addClass("current")
})
//上一页切换
$(".page").on("click",".prev",function(){
if(page==1){
alert("已经是第一页啦！")
return
}
//数据切换
page--
loadData()
//样式切换
//.eq() 方法用于从匹配的元素集合中获取指定索引位置的元素
$(".item").removeClass("current")
$(".item").eq(page-1).addClass("current")
})
//下一页切换
$(".page").on("click",".next",function(){
if(page==$(".item").length){
alert("已经是最后一页啦")
return
}
//数据切换
page++
loadData()
//样式切换
$(".item").removeClass("current")
$(".item").eq(page-1).addClass("current")
})
//批量删除
$(".deteleMore").on("click",function(){
// 初始化一个空字符串，用于存储选中的id（格式如："1,2,3"）
var ids="";
//$(".delItem:checked")选择所有 被勾选的复选框（class为 delItem 且状态为 checked 的元素）
//循环拿到index的值，// 遍历所有被选中的复选框
for(var i=0;i<=$(".delitem:checked").length-1;i++){
// 如果是最后一个选中的元素，不加逗号
if(i==$(".delitem:checked").length-1){
ids+=$(".delitem:checked").eq(i).attr("index")
}else{
ids+=$(".delitem:checked").eq(i).attr("index")+","
}
}
if(ids.length==0){
alert("请至少删除一项")
return
}
//弹出确认对话框，防止误操作。
if(confirm("确定删除？")){
$.ajax({
url:"DeteleMoreServlet",
type:"post",
data:{
ids
},
success:function(value){
alert(value)
location.reload()
},
error:function(){
alert("出错啦")
}
})
}
else{
alert("未执行删除操作")
}
})
//全选
$(".checkAll").on("click",function(){
//.prop() DOM元素的当前属性（property） 动态值（如 checked, disabled, selected）
//.attr() HTML标签的原始属性（attribute） 静态值（如 id, class, data-*）
检查全选复选框（class="checkAll"）是否被勾选
if($(".checkAll").prop("checked")){
// // 如果全选按钮被勾选，将所有单项复选框（class="delItem"）设置为勾选状态
$(".delitem").prop("checked",true)
}else{
// // 如果全选按钮取消勾选，将所有单项复选框（class="delItem"）设置为未勾选状态
$(".delitem").prop("checked",false)
}
})
//反选
$("tbody").on("click",".delitem",function(){
var flag=true
for(var i=0;i<=$(".delitem").length-1;i++){
flag=flag & $(".delitem").eq(i).prop("checked")
}
if(flag){
$(".checkAll").prop("checked",true)
}else{
$(".checkAll").prop("checked",false)
}
})
//添加小模块呈现
$(".add").click(function(){
//页面跳转
location.href="add.html"
})
//修改小模块回显+信息在小模块复现
//未来元素:HTML里没有，在js里追加的元素 传入包含未来元素的HTML元素
$("tbody").on("click",".update",function(){
$.cookie("id",$(this).attr("index"))
location.href="update.html"
})
//删除
$("tbody").on("click",".delete",function(){
var id = $(this).attr("index")
$.ajax({
url:"DeleteServlet",
type:"post",
data:{
id
},
success:function(value){
alert(value)
location.reload()
},
error:function(){
alert("出错啦")
},
})
})添加模块
添加模块中的编辑器：
add.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/add.js" defer></script>
<style>
.addModel,
.updateModel{
/* width:260px;
height:140px; */
border:5px solid gold;
margin-top:20px;
padding:10px;
}
</style>
</head>
<body>
<div class='addModel'>
姓名:<input type='text' class='addName'><br>
年龄:<input type='text' class='addAge'><br>
性别:<input type='text' class='addSex'><br>
自我介绍:
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="utf8-jsp/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="utf8-jsp/ueditor.all.js"></script>
<input type='button' value="添加" class='addBtn'>
<input type='button' value="取消" class='back'>
</div>
</body>
</html>add.js
var ue = UE.getEditor('container');
//取消 小模块隐藏
$(".back").click(function(){
// $(".addModel").css("display","none")
// $(".updateModel").css("display","none")
location.href="student.html"
})
//添加（从前端页面拿到输入数据）
$(".addBtn").click(function(){
//val 获取输入框里的值，trim()去掉空格
//从输入框获取姓名
var name=$(".addName").val().trim()
var age=$(".addAge").val().trim()
var sex=$(".addSex").val().trim()
var introduce=ue.getContent()//新传入文本编辑器的参数
if(name==""){
alert("姓名不能为空")
return
}
if(age==""){
alert("年龄不能为空")
return
}
if(sex==""){
alert("性别不能为空")
return
}
$.ajax({
url:"AddServlet",
type:"post",
//name:name ,age:age..因为相同，所以省略，只写一个；
//如果前面不同，则不能简写
data:{
name,
age,
sex,
introduce
},
success:function(value){
alert(value)
//页面刷新（不需要重新启动）
location.href="student.html"
},
error:function(){
alert("出错啦")
}
})
})
addSelvet.java
package com.qc.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.qc.db.MysqlUtil;
/**
* Servlet implementation class AddServlet
*/
@WebServlet("/AddServlet")
public class AddServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AddServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// //接受参数
String name=request.getParameter("name");
String age=request.getParameter("age");
String sex=request.getParameter("sex");
String introduce=request.getParameter("introduce");
introduce=introduce.replaceAll("\"", "\'");
//拼接sql
String sql="insert into student(name,age,sex,introduce) values(\""+name+"\","+age+",\""+sex+"\",\""+introduce+"\")";
System.out.println(sql);
//执行sql,返回所在行数
int num=MysqlUtil.add(sql);
//返回信息
String res="添加失败";
if(num>0) {
res="添加成功";
}
response.setCharacterEncoding("utf-8");
response.getWriter().write(res);
}
}
修改模块中添加编辑器：
update.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.7.1.min.js" ></script>
<script src="js/jquery.cookie.min.js"></script>
<script src="js/update.js" defer></script>
<title>Insert title here</title>
<style>
.addModel,
.updateModel{
/* <!---width:260px;
height:140px;----!> */
border:5px solid gold;
margin-top:20px;
padding:10px;
}
</style>
</head>
<body>
<div class='updateModel'>
姓名:<input type='text' class='updateName'><br>
性别:<input type='text' class='updateSex'><br>
年龄:<input type='text' class='updateAge'><br>
自我介绍:
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="utf8-jsp/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="utf8-jsp/ueditor.all.js"></script>
<input type='button' value="修改" class='updateBtn'>
<input type='button' value="取消" class='back'>
</div>
</body>
</html>update.js
var ue = UE.getEditor('container');
//取消 小模块隐藏
$(".back").click(function(){
//页面跳转
location.href="student.html";
})
//回显
var id=$.cookie("id")
$.ajax({
url:"SearchById?id="+id,
type:"get",
success:function(value){
var obj=value.data[0]
$(".updateName").val(obj.name)
$(".updateAge").val(obj.age)
$(".updateSex").val(obj.sex)
$(".updateBtn").attr("index",obj.id)
ue.ready(function(){//等编辑器准备好之后才设置编辑器里的内容
ue.setContent(obj.introduce);
});
},
error:function(){
alert("出错啦")
}
})
//修改
$(".updateBtn").click(function(){
var name=$(".updateName").val().trim()
var sex=$(".updateSex").val().trim()
var age=$(".updateAge").val().trim()
var id=$.cookie("id")
var introduce=ue.getContent()
$.ajax({
url:"UpdateServlet",
type:"post",
data:{
name,
age,
sex,
id,
introduce
},
success:function(value){
alert(value)
location.href="student.html";
},
error:function(){
alert("出错啦")
}
})
})SearchByIdSelvet.java
package com.qc.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.qc.db.MysqlUtil;
/**
* Servlet implementation class SearchById
*/
@WebServlet("/SearchById")
public class SearchById extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public SearchById() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.从请求参数中获取id值
String id=request.getParameter("id");
//2.拼接SQL查询语句
String sql="select * from student where id="+id;
//3.定义需要从数据库结果集中提取的列名
String[] colums= {"id","sex","age","name","introduce"};
//4.调用工具类方法执行SQL查询并获取JSON格式的结果
String res=MysqlUtil.getJsonBySql(sql, colums);
//5.设置响应内容类型为JSON格式
response.setContentType("text/json;charset=utf-8");
//6.将JSON字符串写入响应输出流，返回给前端
response.getWriter().write(res);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}UpdateSerlvet.java
package com.qc.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.qc.db.MysqlUtil;
/**
* Servlet implementation class UpdateServlet
*/
@WebServlet("/UpdateServlet")
public class UpdateServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public UpdateServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String name=request.getParameter("name");
String age=request.getParameter("age");
String sex=request.getParameter("sex");
String id=request.getParameter("id");
String introduce=request.getParameter("introduce");
introduce=introduce.replaceAll("\"","\'");
//拼接sql
String sql="update student set name=\""+name+"\",age="+age+",sex=\""+sex+"\",introduce=\""+introduce+"\" where id="+id;
//执行sql
int num=MysqlUtil.update(sql);
//返回信息
String res="修改失败";
if(num>0) {
res="修改成功";
}
response.setCharacterEncoding("utf-8");
response.getWriter().write(res);
}
}2025-04-23 文本编辑器
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
