富文本编辑器说明

最新推荐文章于 2022-11-11 15:11:04 发布

ZH.cat

最新推荐文章于 2022-11-11 15:11:04 发布

阅读量245

点赞数

本文链接：https://blog.csdn.net/Crazy_sounding/article/details/108362355

版权

1 介绍

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。

2 入门案例

<%@ 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>

在这里插入图片描述

3 编辑ItemDesc POJO对象

说明:在JT-COMMON中添加POJO对象

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

    @TableId
    private Long itemId; //与商品表的ID一致.
    private String itemDesc;

}

4 编辑ItemDescMapper接口

package com.jt.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jt.pojo.ItemDesc;

public interface ItemDescMapper extends BaseMapper<ItemDesc> {

}

2 商品详情入库操作

2.1 商品详情业务分析

在这里插入图片描述

2.2 编辑ItemController

/**
	 * 业务需求: 完成商品入库操作,返回系统vo对象
	 * url1: /item/save
	 * 参数: 整个form表单   itemDesc参数
	 * 返回值: SysResult对象
	 */
	@RequestMapping("save")
	public SysResult saveItem(Item item,ItemDesc itemDesc){
		//数据一起完成入库操作.
		itemService.saveItem(item,itemDesc);
		return SysResult.success();
		//全局异常的处理机制!!!!
		/*try {
			itemService.saveItem(item);
			return SysResult.success();
		}catch (Exception e){
			e.printStackTrace();
			return SysResult.fail();
		}*/
	}

2.3 编辑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支持,用户的操作可以实现自动的主键回显功能.
		//<!--<insert id="" keyProperty="id" keyColumn="id" useGeneratedKeys="true"></insert>-->

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

3 商品详情数据回显

3.1 业务结构分析

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

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

在这里插入图片描述

3.2 编辑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 返回业务数据
	}

3.2 编辑ItemService

	@Override
	public ItemDesc findItemDescById(Long itemId) {

		return itemDescMapper.selectById(itemId);
	}

3.3 页面效果展现

在这里插入图片描述

ZH.cat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
富文本编辑器说明

1 介绍KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。2 入门案例<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitio
复制链接

扫一扫