富文本編輯器
1、開(kāi)發(fā)組件
-
kindeditor
- kindeditor-4.1.10包
- kindeditor-4.1.10/kindeditor-all-min.js （必須）
- kindeditor-4.1.10/lang/zh_CN.js （中文提示，非必須）
- kindeditor-4.1.10包
項(xiàng)目實(shí)例目錄
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中添加一個(gè)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 = {
// 編輯器參數(shù)
kingEditorParams : {
//指定上傳文件參數(shù)名稱
filePostName : "uploadFile",
//指定上傳文件請(qǐng)求的url。
uploadJson : '/pic/upload',
//上傳類型，分別為image蕉斜、flash、media、file
dir : "image"
}
};
var itemAddEditor ;
//頁(yè)面初始化完畢后執(zhí)行此方法
$(function(){
//創(chuàng)建富文本編輯器
KindEditor.create("#itemAddForm [name=desc]", TT.kingEditorParams);
//初始化類目選擇和圖片上傳器
TAOTAO.init({fun:function(node){
//根據(jù)商品的分類id取商品 的規(guī)格模板宅此，生成規(guī)格信息机错。第四天內(nèi)容。
//TAOTAO.changeItemParam(node, "itemAddForm");
}});
});
</script>
- 提交表單前父腕，先將文本編輯器中的內(nèi)容與form表單中的內(nèi)容同步
//提交表單
function submitForm(){
//有效性驗(yàn)證
if(!$('#itemAddForm').form('validate')){
$.messager.alert('提示','表單還未填寫(xiě)完成!');
return ;
}
//取商品價(jià)格弱匪，單位為“分”
$("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);
//同步文本框中的商品描述
itemAddEditor.sync();
//取商品的規(guī)格
$.post("/item/save",$("#itemAddForm").serialize(), function(data){
if(data.status == 200){
$.messager.alert('提示','新增商品成功!');
}
});
}
