富文本编辑框的使用（Demo：实现商品添加功能）

富文本编辑框的使用

KindEditor

纯js开发，跟后台语言没有关系。

使用方法

第一步：在jsp中引入KindEditor的css和js代码。

第二步：在表单中添加一个textarea控件。是一个富文本编辑器的载体。类似数据源。

第三步：初始化富文本编辑器。使用官方提供的方法初始化。

第四步：取富文本编辑器的内容。

表单提交之前，把富文本编辑器的内容同步到textarea控件中。

商品添加Demo

controller层

@RequestMapping("/save")
@ResponseBody
public E3Result saveItem(TbItem item,String desc){
    E3Result result = itemService.save(item,desc);

    return result;
}

Service层

public E3Result save(TbItem item, String desc) {
    // 保存商品基本信息

    // 1.通过当前日期生成商品的id
    Long itemId = IDUtils.genItemId();
    // 2.将id设置到item中
    item.setId(itemId);
    // 3.保存
    itemMapper.insert(item);

    // 保存商品详情
    TbItemDesc itemDesc = new TbItemDesc();
    // 1.设置id，由于是一对一关系，所以与itemid一样
    itemDesc.setItemId(itemId);
    // 2.设置其它属性
    itemDesc.setCreated(new Date());
    itemDesc.setUpdated(new Date());
    itemDesc.setItemDesc(desc);
    // 3.保存
    itemDescMapper.insert(itemDesc);

    // 返回ok.
    return E3Result.ok();
}

 1 package cn.e3mall.common.utils;
 2 
 3 import java.util.Random;
 4 
 5 /**
 6  * 各种id生成策略
 7  * <p>Title: IDUtils</p>
 8  * <p>Description: </p>
 9  * <p>Company: www.itcast.com</p> 
10  * @author    入云龙
11  * @date    2015年7月22日下午2:32:10
12  * @version 1.0
13  */
14 public class IDUtils {
15 
16     /**
17      * 图片名生成
18      */
19     public static String genImageName() {
20         //取当前时间的长整形值包含毫秒
21         long millis = System.currentTimeMillis();
22         //long millis = System.nanoTime();
23         //加上三位随机数
24         Random random = new Random();
25         int end3 = random.nextInt(999);
26         //如果不足三位前面补0
27         String str = millis + String.format("%03d", end3);
28         
29         return str;
30     }
31     
32     /**
33      * 商品id生成
34      */
35     public static long genItemId() {
36         //取当前时间的长整形值包含毫秒
37         long millis = System.currentTimeMillis();
38         //long millis = System.nanoTime();
39         //加上两位随机数
40         Random random = new Random();
41         int end2 = random.nextInt(99);
42         //如果不足两位前面补0
43         String str = millis + String.format("%02d", end2);
44         long id = new Long(str);
45         return id;
46     }
47     
48     public static void main(String[] args) {
49         for(int i=0;i< 100;i++)
50         System.out.println(genItemId());
51     }
52 }

通过当前时间生成id的工具类IDUtils

  1 package cn.e3mall.common.utils;
  2 
  3 import java.util.List;
  4 
  5 import com.fasterxml.jackson.databind.JsonNode;
  6 import com.fasterxml.jackson.databind.ObjectMapper;
  7 
  8 /**
  9  * 淘淘商城自定义响应结构
 10  */
 11 public class E3Result {
 12 
 13     // 定义jackson对象
 14     private static final ObjectMapper MAPPER = new ObjectMapper();
 15 
 16     // 响应业务状态
 17     private Integer status;
 18 
 19     // 响应消息
 20     private String msg;
 21 
 22     // 响应中的数据
 23     private Object data;
 24 
 25     public static E3Result build(Integer status, String msg, Object data) {
 26         return new E3Result(status, msg, data);
 27     }
 28 
 29     public static E3Result ok(Object data) {
 30         return new E3Result(data);
 31     }
 32 
 33     public static E3Result ok() {
 34         return new E3Result(null);
 35     }
 36 
 37     public E3Result() {
 38 
 39     }
 40 
 41     public static E3Result build(Integer status, String msg) {
 42         return new E3Result(status, msg, null);
 43     }
 44 
 45     public E3Result(Integer status, String msg, Object data) {
 46         this.status = status;
 47         this.msg = msg;
 48         this.data = data;
 49     }
 50 
 51     public E3Result(Object data) {
 52         this.status = 200;
 53         this.msg = "OK";
 54         this.data = data;
 55     }
 56 
 57 //    public Boolean isOK() {
 58 //        return this.status == 200;
 59 //    }
 60 
 61     public Integer getStatus() {
 62         return status;
 63     }
 64 
 65     public void setStatus(Integer status) {
 66         this.status = status;
 67     }
 68 
 69     public String getMsg() {
 70         return msg;
 71     }
 72 
 73     public void setMsg(String msg) {
 74         this.msg = msg;
 75     }
 76 
 77     public Object getData() {
 78         return data;
 79     }
 80 
 81     public void setData(Object data) {
 82         this.data = data;
 83     }
 84 
 85     /**
 86      * 将json结果集转化为TaotaoResult对象
 87      * 
 88      * @param jsonData json数据
 89      * @param clazz TaotaoResult中的object类型
 90      * @return
 91      */
 92     public static E3Result formatToPojo(String jsonData, Class<?> clazz) {
 93         try {
 94             if (clazz == null) {
 95                 return MAPPER.readValue(jsonData, E3Result.class);
 96             }
 97             JsonNode jsonNode = MAPPER.readTree(jsonData);
 98             JsonNode data = jsonNode.get("data");
 99             Object obj = null;
100             if (clazz != null) {
101                 if (data.isObject()) {
102                     obj = MAPPER.readValue(data.traverse(), clazz);
103                 } else if (data.isTextual()) {
104                     obj = MAPPER.readValue(data.asText(), clazz);
105                 }
106             }
107             return build(jsonNode.get("status").intValue(), jsonNode.get("msg").asText(), obj);
108         } catch (Exception e) {
109             return null;
110         }
111     }
112 
113     /**
114      * 没有object对象的转化
115      * 
116      * @param json
117      * @return
118      */
119     public static E3Result format(String json) {
120         try {
121             return MAPPER.readValue(json, E3Result.class);
122         } catch (Exception e) {
123             e.printStackTrace();
124         }
125         return null;
126     }
127 
128     /**
129      * Object是集合转化
130      * 
131      * @param jsonData json数据
132      * @param clazz 集合中的类型
133      * @return
134      */
135     public static E3Result formatToList(String jsonData, Class<?> clazz) {
136         try {
137             JsonNode jsonNode = MAPPER.readTree(jsonData);
138             JsonNode data = jsonNode.get("data");
139             Object obj = null;
140             if (data.isArray() && data.size() > 0) {
141                 obj = MAPPER.readValue(data.traverse(),
142                         MAPPER.getTypeFactory().constructCollectionType(List.class, clazz));
143             }
144             return build(jsonNode.get("status").intValue(), jsonNode.get("msg").asText(), obj);
145         } catch (Exception e) {
146             return null;
147         }
148     }
149 
150 }

整个商城的自定义响应工具类 E3Utils

 

转载于:https://www.cnblogs.com/x54256/p/8634346.html