31 Java编程中的富文本编辑器

最新推荐文章于 2025-07-27 10:35:20 发布

原创最新推荐文章于 2025-07-27 10:35:20 发布 · 713 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java

Java代码专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍KindEditor富文本编辑器的使用，包括其在Java Web项目中的集成配置及与数据库的交互过程。通过示例代码，展示了如何将富文本编辑器的内容保存至数据库，并在页面上进行回显。

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>

<script type="text/javascript">
	$(function(){
		KindEditor.ready(function(){
		    //在指定的位置创建富文本编辑器
			KindEditor.create("#editor")
		})
	})
</script>
</head>
<body>
<h1>富文本编辑器</h1>
<textarea style="width:700px;height:350px" id="editor"></textarea>
</body>
</html>

编辑ItemDesc POJO对象说明:在通用依赖项目中如:JT-COMMON中添加POJO对象

@TableName("tb_item_desc")
@Data
@Accessors(chain = true)
public class ItemDesc extends BasePojo {

    @TableId
    //与商品表的ID一致.即随着商品一起写入数据库即可(注:若是单独拿出图片存储另外需要单独的controller和service,
    //而不需要pojo类,因为可以让单独的图片存入本地-本服务器的磁盘上,
    //用nginx服务器反向代理实现访问域名时跳转到访问实际的物理磁盘地址上的图片!)
    private Long itemId; 
    private String itemDesc;

}

编辑ItemService

@Override
	@Transactional  //注意事务控制   spring一般只能控制运行时异常,检查异常需要手动封装.
	public void saveItem(Item item, ItemDesc itemDesc) {
		//1.默认商品为上架状态
		//item.setStatus(1).setCreated(new Date()).setUpdated(new Date());
		item.setStatus(1);
		itemMapper.insert(item); //先入库之后才有主键,将主键动态的返回.
		//MP支持,用户的操作可以实现自动的主键回显功能.
		//若不用MP需要在mapper映射文件中sql语句上加上三个属性<!--<insert id="" keyProperty="id" keyColumn="id" useGeneratedKeys="true"></insert>-->

		//2.完成商品详情入库操作  要求 item的ID的应该与itemDesc的Id值一致的!!!!
		//知识点: id应该如何获取?
		itemDesc.setItemId(item.getId());
		itemDescMapper.insert(itemDesc);
	}

以上是将富文本内的信息插入数据库了,下面是将其内容回显到页面上

说明:根据itemId查询商品详情信息,之后封装为对象SysResult返回
ajax页面请求路径说明:

// 加载商品描述
$.getJSON('/item/query/item/desc/'+data.id,function(_data){
     if(_data.status == 200){
      //动态获取商品详情信息
    itemEditEditor.html(_data.data.itemDesc);
    }
});

在这里插入图片描述

编辑ItemController

/**
	 * 根据ItemId查询ItemDesc对象
	 * url:http://localhost:8091/item/query/item/desc/1474391989
	 * 参数: restFul形式
	 * 返回值: SysResult对象
	 */
	@RequestMapping("/query/item/desc/{itemId}")
	public SysResult findItemDescById(@PathVariable Long itemId){

		ItemDesc itemDesc = itemService.findItemDescById(itemId);
		return SysResult.success(itemDesc); //200 返回业务数据
	}

2.编辑ItemService

	@Override
	public ItemDesc findItemDescById(Long itemId) {

		return itemDescMapper.selectById(itemId);
	}