富文本編輯器

1、開發組件

• kindeditor

  • kindeditor-4.1.10包
    • kindeditor-4.1.10/kindeditor-all-min.js （必須）
    • kindeditor-4.1.10/lang/zh_CN.js （中文提示，非必須）

• kingeditor官網

項目實例目錄

2、步驟

• 在js中添加富文本編輯器引用

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

• 在jsp中添加一個textarea域

<form id="itemAddForm" class="itemForm" method="post">

      <table cellpadding="5">
            <tr>
                <td>商品描述:</td>
                <td>
                    <textarea style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea>
                </td>
            </tr>
      </table>
</form>

• 初始化文本編輯器

<script type="text/javascript">

    var TT = TAOTAO = {
        // 編輯器參數
        kingEditorParams : {
            //指定上傳文件參數名稱
            filePostName  : "uploadFile",
            //指定上傳文件請求的url。
            uploadJson : '/pic/upload',
            //上傳類型，分別為image、flash、media、file
            dir : "image"
        }
    };
    var itemAddEditor ;
    //頁面初始化完畢后執行此方法
    $(function(){
        //創建富文本編輯器
         KindEditor.create("#itemAddForm [name=desc]", TT.kingEditorParams);
        //初始化類目選擇和圖片上傳器
        TAOTAO.init({fun:function(node){
            //根據商品的分類id取商品 的規格模板，生成規格信息。第四天內容。
            //TAOTAO.changeItemParam(node, "itemAddForm");
        }});
    });
</script>

• 提交表單前，先將文本編輯器中的內容與form表單中的內容同步

//提交表單
    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('提示','新增商品成功!');
            }
        });
    }