KindEditor使用

KindEditor

富文本编辑器
纯JS开发，与后台语言没有关系
此外，还有UEditor、CKEditor等编辑器

官网
http://kindeditor.net/demo.php

使用方式

引入CSS、JS文件
语言包，默认是中文，可加可不加

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

在表单form元素中 添加一个textarea控件

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

实现原理

Textarea，隐藏的，不可见
富文本编辑器，可见的

富文本编辑器，不能随着表单提交
提交表单时，把数据内容，存放到Textarea里面
随着表单一起提交

初始化富文本编辑器
页面加载完成之后，初始化编辑器
此时，从textarea里面读取数据，展示到页面上

数据内容
实际上存储的是带HTML标签的文本
保存到存到数据库，是整个带HTML标签的文本

提交重置

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

JS代码

<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形式的字符串
        alert($("#itemAddForm").serialize());
        $.post("/item/save",$("#itemAddForm").serialize(), function(data){
            if(data.status == 200){
                $.messager.alert('提示','新增商品成功!');
            }
        });
    }

    function clearForm(){
        $('#itemAddForm').form('reset');
        itemAddEditor.html('');
    }
</script>

页面初始化完成
执行初始化编辑器的方法

itemAddEditor
保存创建的编辑器

TAOTAO.createEditor(“#itemAddForm [name=desc]”);
创建编辑器，并返回

createEditor : function(select){
    return KindEditor.create(select, TT.kingEditorParams);
}

KindEditor
编辑器的JS提供的对象
调用create方法，创建一个编辑器

Select
绑定的页面textarea控件
作为编辑器的初始化控件，jQuery的name选择器

TT.kingEditorParams
指定图片上传的参数信息

// 编辑器参数
kingEditorParams : {
    //指定上传文件参数名称
    filePostName  : "uploadFile",
    //指定上传文件请求的url。
    uploadJson : '/pic/upload',
    //上传类型，分别为image、flash、media、file
    dir : "image"
}

itemAddEditor.sync();
表单提交之前，把编辑器的内容
同步到textarea控件