富文字編輯器

富文字編輯器是一種可內嵌於瀏覽器，所見即所得的文字編輯器。這裡用的富文字編輯器是KindEditor。

1.搭建富文字編輯器

1. 在專案中新增富文字編輯器js檔案，jsp檔案新增引用

引入文字框外掛，引入提示語言

要用KindEditor外掛，就得引入該js

1. 新增textarea

textarea設定為不可見

這裡顯示的是KindEditor的編輯器，而textarea是用來同步KindEditor編輯器的內容，以做提交。

1. jq初始化KindEditor控制元件

   • 顯示的頁面：

     $(function
      
     (){
         //建立富文字編輯器
         itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");
         //初始化類目選擇和圖片上傳器
         TAOTAO.init({fun:function(node){
             //根據商品的分類id取商品 的規格模板，生成規格資訊。第四天內容。
             //TAOTAO.changeItemParam(node, "itemAddForm");
         }});
     });

   • 引入的common.js

      createEditor : function(select){
         return
      
      KindEditor.create(select, TT.kingEditorParams);
      },

     ​ 配置編輯器引數

     var TT = TAOTAO = {
     // 編輯器引數
     kingEditorParams : {
         //指定上傳檔案引數名稱
         filePostName  : "uploadFile",
         //指定上傳檔案請求的url。
         uploadJson : '/pic/upload',
         //上傳型別，分別為image、flash、media、file
         dir : "image"
     },
     ...

     ​ 提交表單

     //提交表單
     function
      
      submitForm(){
         //有效性驗證
         if(!$('#itemAddForm').form('validate')){
             $.messager.alert('提示','表單還未填寫完成!');
             return ;
         }
         //取商品價格，單位為“分”
         $("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);
         //同步文字框中的商品描述
         itemAddEditor.sync();

     …

         $.post("/item/save",$("#itemAddForm").serialize(), function(data){   //序列化表單內容
             if(data.status == 200){
                 $.messager.alert('提示','新增商品成功!');
             }
         });
     }

     1. 點選提交按鈕執行的操作，校驗內容有沒有填完整，然後把KindEditor的內容同步到隱藏的textarea中，提交到save方法。
     2. 根據後臺的狀態碼判斷提交的狀態，200則輸出成功。

2.後臺接收

1.定義響應狀態

定義相應結構的作用是對返回的資訊進行處理，例如輸出狀態碼等。將其放在pojo包下面，以便呼叫。

響應工具主要有以下資訊：

    // 響應業務狀態
    private Integer status;

    // 響應訊息
    private String msg;

    // 響應中的資料
    private Object data;

前端在提交資料之後需要知道提示什麼資訊，狀態怎麼樣，這些都由響應工具實現。需要什麼資訊根據前端外掛來定。

【響應POJO】，該工具不做具體介紹。

2.編寫Service介面和實現方法

    @Override
    public TaotaoResult createItem(TbItem item) {
    //item補全   
        //生成商品id
        Long itemId = IDUtils.genItemId();
        item.setId(itemId);
        //商品狀態     1-正常  2-下架   3-刪除
        item.setStatus((byte)1);
        item.setCreated(new Date());
        item.setUpdated(new Date());
        //插入到資料庫
        itemMapper.insert(item);
        return TaotaoResult.ok();
    }

返回的型別為定義狀態的pojo，（IDUtils類工具可參考文章6）itemMapper的insert方法是是用逆向工程生成的insert方法。（可檢視文章2）

這裡將前端的資訊儲存進item中，而那些沒有的資訊需要後臺進行補充。像id，建立修改日期，狀態等

3.編寫Controller方法

    @RequestMapping(value="/item/save",method=RequestMethod.POST)
    @ResponseBody
    private TaotaoResult createItem(TbItem item) {
        return itemService.createItem(item);
    }

接收url方法，並且指定為POST請求。