kindEditor 富文本编辑器 使用介绍

第一版：存放位置：  ---->把该创建的文件包放到javaWeb 过程的 WEB_INF 下；如图所示。

第二步：< kindEditor 插件的引用> ：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域

 <%@ 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="">

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

第四步：初始化富文本编辑器：

 var itemAddEditor ;
 	//页面初始化完毕后执行此方法
 	$(function(){
 		//创建富文本编辑器
 		itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");
 		//初始化类目选择和图片上传器
 		TAOTAO.init({fun:function(node){
 			//根据商品的分类id取商品 的规格模板，生成规格信息。第四天内容。
 			//TAOTAO.changeItemParam(node, "itemAddForm");
 		}});
 	});

common.js

 Date.prototype.format = function(format){
     var o =  {
     "M+" : this.getMonth()+1, //month
     "d+" : this.getDate(), //day
     "h+" : this.getHours(), //hour
     "m+" : this.getMinutes(), //minute
     "s+" : this.getSeconds(), //second
     "q+" : Math.floor((this.getMonth()+3)/3), //quarter
     "S" : this.getMilliseconds() //millisecond
     };
     if(/(y+)/.test(format)){
     	format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
     }
     for(var k in o)  {
 	    if(new RegExp("("+ k +")").test(format)){
 	    	format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : (""+ o[k]).substr((""+ o[k]).length));
 	    }
     }
     return format;
 };

 var TT = TAOTAO = {
 	// 编辑器参数
 	kingEditorParams : {
 		//指定上传文件参数名称
 		filePostName  : "uploadFile",
 		//指定上传文件请求的url。
 		uploadJson : '/pic/upload',
 		//上传类型，分别为image、flash、media、file
 		dir : "image"
 	},
 	// 格式化时间
 	formatDateTime : function(val,row){
 		var now = new Date(val);
     	return now.format("yyyy-MM-dd hh:mm:ss");
 	},
 	// 格式化连接
 	formatUrl : function(val,row){
 		if(val){
 			return "<a href='"+val+"' target='_blank'>查看</a>";
 		}
 		return "";
 	},
 	// 格式化价格
 	formatPrice : function(val,row){
 		return (val/1000).toFixed(2);
 	},
 	// 格式化商品的状态
 	formatItemStatus : function formatStatus(val,row){
         if (val == 1){
             return '正常';
         } else if(val == 2){
         	return '<span style="color:red;">下架</span>';
         } else {
         	return '未知';
         }
     },

     init : function(data){
     	// 初始化图片上传组件
     	this.initPicUpload(data);
     	// 初始化选择类目组件
     	this.initItemCat(data);
     },
     // 初始化图片上传组件
     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>");
         			}
         		}
         	}
         	//给“上传图片按钮”绑定click事件
         	$(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();
 						}
 					});
         		});
         	});
     	});
     },

     // 初始化选择类目组件
     initItemCat : function(data){
     	$(".selectItemCat").each(function(i,e){
     		var _ele = $(e);
     		if(data && data.cid){
     			_ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");
     		}else{
     			_ele.after("<span style='margin-left:10px;'></span>");
     		}
     		_ele.unbind('click').click(function(){
     			$("<div>").css({padding:"5px"}).html("<ul>")
     			.window({
     				width:'500',
     			    height:"",
     			    modal:true,
     			    closed:true,
     			    iconCls:'icon-save',
     			    title:'选择类目',
     			    onOpen : function(){
     			    	var _win = this;
     			    	$("ul",_win).tree({
     			    		url:'/item/cat/list',
     			    		animate:true,
     			    		onClick : function(node){
     			    			if($(this).tree("isLeaf",node.target)){
     			    				// 填写到cid中
     			    				_ele.parent().find("[name=cid]").val(node.id);
     			    				_ele.next().text(node.text).attr("cid",node.id);
     			    				$(_win).window('close');
     			    				if(data && data.fun){
     			    					data.fun.call(this,node);
     			    				}
     			    			}
     			    		}
     			    	});
     			    },
     			    onClose : function(){
     			    	$(this).window("destroy");
     			    }
     			}).window('open');
     		});
     	});
     },

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

     /**
      * 创建一个窗口，关闭窗口后销毁该窗口对象。<br/>
      *
      * 默认：<br/>
      * width : 80% <br/>
      * height : 80% <br/>
      * title : (空字符串) <br/>
      *
      * 参数：<br/>
      * width : <br/>
      * height : <br/>
      * title : <br/>
      * url : 必填参数 <br/>
      * onLoad : function 加载完窗口内容后执行<br/>
      *
      *
      */
     createWindow : function(params){
     	$("<div>").css({padding:"5px"}).window({
     		width : params.width?params.width:"80%",
     		height : params.height?params.height:"80%",
     		modal:true,
     		title : params.title?params.title:"",
     		href : params.url,
 		    onClose : function(){
 		    	$(this).window("destroy");
 		    },
 		    onLoad : function(){
 		    	if(params.onLoad){
 		    		params.onLoad.call(this);
 		    	}
 		    }
     	}).window("open");
     },

     closeCurrentWindow : function(){
     	$(".panel-tool-close").click();
     },

     changeItemParam : function(node,formId){
     	$.getJSON("/item/param/query/itemcatid/" + node.id,function(data){
 			  if(data.status == 200 && data.data){
 				 $("#"+formId+" .params").show();
 				 var paramData = JSON.parse(data.data.paramData);
 				 var html = "<ul>";
 				 for(var i in paramData){
 					 var pd = paramData[i];
 					 html+="<li><table>";
 					 html+="<tr><td colspan=\"2\" class=\"group\">"+pd.group+"</td></tr>";

 					 for(var j in pd.params){
 						 var ps = pd.params[j];
 						 html+="<tr><td class=\"param\"><span>"+ps+"</span>: </td><td><input autocomplete=\"off\" type=\"text\"/></td></tr>";
 					 }

 					 html+="</li></table>";
 				 }
 				 html+= "</ul>";
 				 $("#"+formId+" .params td").eq(1).html(html);
 			  }else{
 				 $("#"+formId+" .params").hide();
 				 $("#"+formId+" .params td").eq(1).empty();
 			  }
 		  });
     },
     getSelectionsIds : function (select){
     	var list = $(select);
     	var sels = list.datagrid("getSelections");
     	var ids = [];
     	for(var i in sels){
     		ids.push(sels[i].id);
     	}
     	ids = ids.join(",");
     	return ids;
     },

     /**
      * 初始化单图片上传组件 <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();
 					}
 				});
 			});
 		});
     }
 };
 

第五步： 表单提交：

思路： 提交表单之前，先把富文本编辑器中的内容和 textarea 中的内容进行 同步。

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

 

总结：

1：工程级别的引入 kindEdirtor 插件源码

2：页面级别的控件初始化：

      步骤一： 引入 kindEditor js在页面的引入

      步骤二：创建文本域，并初始化富文本控件    

    KindEditor.create(select, TT.kingEditorParams);

3：表单提交，一定要先把富文本编辑器与 textarea 文本域内容同步合并

        itemAddEditor.sync();