Kindeditor组件——富文本编辑插件

一、页面样式

 二、导入Kindeditor相关的js

 三、Kindeditor简单使用

　　　　　　 <tr>

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

 

    $(function(){
        //与itemDesc绑定
       var itemAddEditor = KindEditorUtil.createEditor("#itemAddForm [name=itemDesc]");
        KindEditorUtil.init({fun:function(node){
            KindEditorUtil.changeItemParam(node, "itemAddForm");
        }});
    });

 

var TT = KindEditorUtil = { 

 kingEditorParams : {
        filePostName  : "uploadFile",
        uploadJson : '/pic/upload',
        dir : "image"
    },
  // 初始化图片上传组件
    initPicUpload : function(data){
        $(".picFileUpload").each(function(i,e){
            var _ele = $(e);
            _ele.siblings("div.pics").remove();
            _ele.after('\
                <div class="pics">\
                    <ul></ul>\
                </div>');
            // 回显图片
            if(data && data.pics){
                var imgs = data.pics.split(",");
                for(var i in imgs){
                    if($.trim(imgs[i]).length > 0){
                        _ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='80' height='50' /></a></li>");
                    }
                }
            }
            $(e).click(function(){
                var form = $(this).parentsUntil("form").parent("form");
                KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){
                    var editor = this;
                    editor.plugin.multiImageDialog({
                        clickFn : function(urlList) {
                            var imgArray = [];
                            KindEditor.each(urlList, function(i, data) {
                                imgArray.push(data.url);
                                form.find(".pics ul").append("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>");
                            });
                            form.find("[name=image]").val(imgArray.join(","));
                            editor.hideDialog();
                        }
                    });
                });
            });
        });
    },
createEditor : function(select){
        return KindEditor.create(select, TT.kingEditorParams);
    },
  /**
     * 初始化单图片上传组件 <br/>
     * 选择器为：.onePicUpload <br/>
     * 上传完成后会设置input内容以及在input后面追加<img> 
     */
    initOnePicUpload : function(){
        $(".onePicUpload").click(function(){
            var _self = $(this);
            KindEditor.editor(TT.kingEditorParams).loadPlugin('image', function() {
                this.plugin.imageDialog({
                    showRemote : false,
                    clickFn : function(url, title, width, height, border, align) {
                        var input = _self.siblings("input");
                        input.parent().find("img").remove();
                        input.val(url);
                        input.after("<a href='"+url+"' target='_blank'><img src='"+url+"' width='80' height='50'/></a>");
                        this.hideDialog();
                    }
                });
            });
        });
    }
}