1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > kindeditor(富文本编辑器)的使用

kindeditor(富文本编辑器)的使用

时间:2019-04-13 16:35:46

相关推荐

kindeditor(富文本编辑器)的使用

1、导入js:

2、定义多行文本(不可见、给定name)

3、调用TT.createEditor

4、取文本编辑器中的内容

将编辑器的内容设置到原来的textarea控件里。editor.sync();

5、效果

6、使用语法

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="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><div style="padding:10px 10px 10px 10px"><form id="itemAddForm" class="itemForm" method="post"><table cellpadding="5"><tr><td>商品类目:</td><td><a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a><input type="hidden" name="cid" style="width: 280px;"></input></td></tr><tr><td>商品标题:</td><td><input class="easyui-textbox" type="text" name="title" data-options="required:true" style="width: 280px;"></input></td></tr><tr><td>商品卖点:</td><td><input class="easyui-textbox" name="sellPoint" data-options="multiline:true,validType:'length[0,150]'" style="height:60px;width: 280px;"></input></td></tr><tr><td>商品价格:</td><td><input class="easyui-numberbox" type="text" name="priceView" data-options="min:1,max:99999999,precision:2,required:true" /><input type="hidden" name="price"/></td></tr><tr><td>库存数量:</td><td><input class="easyui-numberbox" type="text" name="num" data-options="min:1,max:99999999,precision:0,required:true" /></td></tr><tr><td>条形码:</td><td><input class="easyui-textbox" type="text" name="barcode" data-options="validType:'length[1,30]'" /></td></tr><tr><td>商品图片:</td><td><a href="javascript:void(0)" class="easyui-linkbutton picFileUpload">上传图片</a><input type="hidden" name="image"/></td></tr><tr><td>商品描述:</td><td><textarea style="width:800px;height:300px;visibility:hidden;" name="desc"></textarea></td></tr><tr class="params hide"><td>商品规格:</td><td></td></tr></table><input type="hidden" name="itemParams"/></form><div style="padding:5px"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a></div></div><script type="text/javascript">var itemAddEditor ;//页面初始化完毕后执行此方法$(function(){//创建富文本编辑器itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");//初始化类目选择和图片上传器TAOTAO.init({fun:function(node){//根据商品的分类id取商品 的规格模板,生成规格信息。第四天内容。//TAOTAO.changeItemParam(node, "itemAddForm");}});});//提交表单function submitForm(){//有效性验证if(!$('#itemAddForm').form('validate')){$.messager.alert('提示','表单还未填写完成!');return ;}//取商品价格,单位为“分”$("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);//同步文本框中的商品描述itemAddEditor.sync();//取商品的规格/*var paramJson = [];$("#itemAddForm .params li").each(function(i,e){var trs = $(e).find("tr");var group = trs.eq(0).text();var ps = [];for(var i = 1;i<trs.length;i++){var tr = trs.eq(i);ps.push({"k" : $.trim(tr.find("td").eq(0).find("span").text()),"v" : $.trim(tr.find("input").val())});}paramJson.push({"group" : group,"params": ps});});//把json对象转换成字符串paramJson = JSON.stringify(paramJson);$("#itemAddForm [name=itemParams]").val(paramJson);*///ajax的post方式提交表单//$("#itemAddForm").serialize()将表单序列号为key-value形式的字符串$.post("/item/save",$("#itemAddForm").serialize(), function(data){if(data.status == 200){$.messager.alert('提示','新增商品成功!');}});}function clearForm(){$('#itemAddForm').form('reset');itemAddEditor.html('');}</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。