富文本编辑器

富文本编辑器

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中添加富文本编辑器引用

• 在jsp中添加一个textarea域

      

            

                
商品描述:
                

                    
                
            
      

• 初始化文本编辑器

• 提交表单前，先将文本编辑器中的内容与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('提示','新增商品成功!');
            }
        });
    }