富文本编辑器

富文本编辑器

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