• kindEditor 富文本编辑器 使用介绍


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

    image

    第二步:< kindEditor 插件的引用> :JS引用

    image

      1 <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
      2 <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>

    image

    第三步:在Jsp 中添加一个 textarea域

      1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
      2 <link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
      3 <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
      4 <script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
      5 <div style="padding:10px 10px 10px 10px">
      6 	<form id="itemAddForm" class="itemForm" method="post">
      7 	    <table cellpadding="5">
      8 
      9 	        <tr>
     10 	            <td>商品描述:</td>
     11 	            <td>
     12 	                <textarea style="800px;height:300px;visibility:hidden;" name="desc"></textarea>
     13 	            </td>
     14 	        </tr>
     15 
     16 	    </table>
     17 	    <input type="hidden" name="itemParams"/>
     18 	</form>
     19 	<div style="padding:5px">
     20 	    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
     21 	    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>
     22 	</div>
     23 </div>
     24 <script type="text/javascript">
     25 	var itemAddEditor ;
     26 	//页面初始化完毕后执行此方法
     27 	$(function(){
     28 		//创建富文本编辑器
     29 		itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");
     30 		//初始化类目选择和图片上传器
     31 		TAOTAO.init({fun:function(node){
     32 			//根据商品的分类id取商品 的规格模板,生成规格信息。第四天内容。
     33 			//TAOTAO.changeItemParam(node, "itemAddForm");
     34 		}});
     35 	});
     36 	//提交表单
     37 	function submitForm(){
     38 		//有效性验证
     39 		if(!$('#itemAddForm').form('validate')){
     40 			$.messager.alert('提示','表单还未填写完成!');
     41 			return ;
     42 		}
     43 		//取商品价格,单位为“分”
     44 		$("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);
     45 		//同步文本框中的商品描述
     46 		itemAddEditor.sync();
     47 		//取商品的规格
     48 		/*
     49 		var paramJson = [];
     50 		$("#itemAddForm .params li").each(function(i,e){
     51 			var trs = $(e).find("tr");
     52 			var group = trs.eq(0).text();
     53 			var ps = [];
     54 			for(var i = 1;i<trs.length;i++){
     55 				var tr = trs.eq(i);
     56 				ps.push({
     57 					"k" : $.trim(tr.find("td").eq(0).find("span").text()),
     58 					"v" : $.trim(tr.find("input").val())
     59 				});
     60 			}
     61 			paramJson.push({
     62 				"group" : group,
     63 				"params": ps
     64 			});
     65 		});
     66 		//把json对象转换成字符串
     67 		paramJson = JSON.stringify(paramJson);
     68 		$("#itemAddForm [name=itemParams]").val(paramJson);
     69 		*/
     70 		//ajax的post方式提交表单
     71 		//$("#itemAddForm").serialize()将表单序列号为key-value形式的字符串
     72 		$.post("/item/save",$("#itemAddForm").serialize(), function(data){
     73 			if(data.status == 200){
     74 				$.messager.alert('提示','新增商品成功!');
     75 			}
     76 		});
     77 	}
     78 
     79 	function clearForm(){
     80 		$('#itemAddForm').form('reset');
     81 		itemAddEditor.html('');
     82 	}
     83 </script>
     84 

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

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

    common.js

      1 Date.prototype.format = function(format){
      2     var o =  {
      3     "M+" : this.getMonth()+1, //month 
      4     "d+" : this.getDate(), //day 
      5     "h+" : this.getHours(), //hour 
      6     "m+" : this.getMinutes(), //minute 
      7     "s+" : this.getSeconds(), //second 
      8     "q+" : Math.floor((this.getMonth()+3)/3), //quarter 
      9     "S" : this.getMilliseconds() //millisecond 
     10     };
     11     if(/(y+)/.test(format)){
     12     	format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
     13     }
     14     for(var k in o)  {
     15 	    if(new RegExp("("+ k +")").test(format)){
     16 	    	format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
     17 	    }
     18     }
     19     return format;
     20 };
     21 
     22 var TT = TAOTAO = {
     23 	// 编辑器参数
     24 	kingEditorParams : {
     25 		//指定上传文件参数名称
     26 		filePostName  : "uploadFile",
     27 		//指定上传文件请求的url。
     28 		uploadJson : '/pic/upload',
     29 		//上传类型,分别为image、flash、media、file
     30 		dir : "image"
     31 	},
     32 	// 格式化时间
     33 	formatDateTime : function(val,row){
     34 		var now = new Date(val);
     35     	return now.format("yyyy-MM-dd hh:mm:ss");
     36 	},
     37 	// 格式化连接
     38 	formatUrl : function(val,row){
     39 		if(val){
     40 			return "<a href='"+val+"' target='_blank'>查看</a>";
     41 		}
     42 		return "";
     43 	},
     44 	// 格式化价格
     45 	formatPrice : function(val,row){
     46 		return (val/1000).toFixed(2);
     47 	},
     48 	// 格式化商品的状态
     49 	formatItemStatus : function formatStatus(val,row){
     50         if (val == 1){
     51             return '正常';
     52         } else if(val == 2){
     53         	return '<span style="color:red;">下架</span>';
     54         } else {
     55         	return '未知';
     56         }
     57     },
     58 
     59     init : function(data){
     60     	// 初始化图片上传组件
     61     	this.initPicUpload(data);
     62     	// 初始化选择类目组件
     63     	this.initItemCat(data);
     64     },
     65     // 初始化图片上传组件
     66     initPicUpload : function(data){
     67     	$(".picFileUpload").each(function(i,e){
     68     		var _ele = $(e);
     69     		_ele.siblings("div.pics").remove();
     70     		_ele.after('
     71     			<div class="pics">
     72         			<ul></ul>
     73         		</div>');
     74     		// 回显图片
     75         	if(data && data.pics){
     76         		var imgs = data.pics.split(",");
     77         		for(var i in imgs){
     78         			if($.trim(imgs[i]).length > 0){
     79         				_ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='80' height='50' /></a></li>");
     80         			}
     81         		}
     82         	}
     83         	//给“上传图片按钮”绑定click事件
     84         	$(e).click(function(){
     85         		var form = $(this).parentsUntil("form").parent("form");
     86         		//打开图片上传窗口
     87         		KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){
     88         			var editor = this;
     89         			editor.plugin.multiImageDialog({
     90 						clickFn : function(urlList) {
     91 							var imgArray = [];
     92 							KindEditor.each(urlList, function(i, data) {
     93 								imgArray.push(data.url);
     94 								form.find(".pics ul").append("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>");
     95 							});
     96 							form.find("[name=image]").val(imgArray.join(","));
     97 							editor.hideDialog();
     98 						}
     99 					});
    100         		});
    101         	});
    102     	});
    103     },
    104 
    105     // 初始化选择类目组件
    106     initItemCat : function(data){
    107     	$(".selectItemCat").each(function(i,e){
    108     		var _ele = $(e);
    109     		if(data && data.cid){
    110     			_ele.after("<span style='margin-left:10px;'>"+data.cid+"</span>");
    111     		}else{
    112     			_ele.after("<span style='margin-left:10px;'></span>");
    113     		}
    114     		_ele.unbind('click').click(function(){
    115     			$("<div>").css({padding:"5px"}).html("<ul>")
    116     			.window({
    117     				'500',
    118     			    height:"450",
    119     			    modal:true,
    120     			    closed:true,
    121     			    iconCls:'icon-save',
    122     			    title:'选择类目',
    123     			    onOpen : function(){
    124     			    	var _win = this;
    125     			    	$("ul",_win).tree({
    126     			    		url:'/item/cat/list',
    127     			    		animate:true,
    128     			    		onClick : function(node){
    129     			    			if($(this).tree("isLeaf",node.target)){
    130     			    				// 填写到cid中
    131     			    				_ele.parent().find("[name=cid]").val(node.id);
    132     			    				_ele.next().text(node.text).attr("cid",node.id);
    133     			    				$(_win).window('close');
    134     			    				if(data && data.fun){
    135     			    					data.fun.call(this,node);
    136     			    				}
    137     			    			}
    138     			    		}
    139     			    	});
    140     			    },
    141     			    onClose : function(){
    142     			    	$(this).window("destroy");
    143     			    }
    144     			}).window('open');
    145     		});
    146     	});
    147     },
    148 
    149     createEditor : function(select){
    150     	return KindEditor.create(select, TT.kingEditorParams);
    151     },
    152 
    153     /**
    154      * 创建一个窗口,关闭窗口后销毁该窗口对象。<br/>
    155      *
    156      * 默认:<br/>
    157      * width : 80% <br/>
    158      * height : 80% <br/>
    159      * title : (空字符串) <br/>
    160      *
    161      * 参数:<br/>
    162      * width : <br/>
    163      * height : <br/>
    164      * title : <br/>
    165      * url : 必填参数 <br/>
    166      * onLoad : function 加载完窗口内容后执行<br/>
    167      *
    168      *
    169      */
    170     createWindow : function(params){
    171     	$("<div>").css({padding:"5px"}).window({
    172     		width : params.width?params."80%",
    173     		height : params.height?params.height:"80%",
    174     		modal:true,
    175     		title : params.title?params.title:"",
    176     		href : params.url,
    177 		    onClose : function(){
    178 		    	$(this).window("destroy");
    179 		    },
    180 		    onLoad : function(){
    181 		    	if(params.onLoad){
    182 		    		params.onLoad.call(this);
    183 		    	}
    184 		    }
    185     	}).window("open");
    186     },
    187 
    188     closeCurrentWindow : function(){
    189     	$(".panel-tool-close").click();
    190     },
    191 
    192     changeItemParam : function(node,formId){
    193     	$.getJSON("/item/param/query/itemcatid/" + node.id,function(data){
    194 			  if(data.status == 200 && data.data){
    195 				 $("#"+formId+" .params").show();
    196 				 var paramData = JSON.parse(data.data.paramData);
    197 				 var html = "<ul>";
    198 				 for(var i in paramData){
    199 					 var pd = paramData[i];
    200 					 html+="<li><table>";
    201 					 html+="<tr><td colspan="2" class="group">"+pd.group+"</td></tr>";
    202 
    203 					 for(var j in pd.params){
    204 						 var ps = pd.params[j];
    205 						 html+="<tr><td class="param"><span>"+ps+"</span>: </td><td><input autocomplete="off" type="text"/></td></tr>";
    206 					 }
    207 
    208 					 html+="</li></table>";
    209 				 }
    210 				 html+= "</ul>";
    211 				 $("#"+formId+" .params td").eq(1).html(html);
    212 			  }else{
    213 				 $("#"+formId+" .params").hide();
    214 				 $("#"+formId+" .params td").eq(1).empty();
    215 			  }
    216 		  });
    217     },
    218     getSelectionsIds : function (select){
    219     	var list = $(select);
    220     	var sels = list.datagrid("getSelections");
    221     	var ids = [];
    222     	for(var i in sels){
    223     		ids.push(sels[i].id);
    224     	}
    225     	ids = ids.join(",");
    226     	return ids;
    227     },
    228 
    229     /**
    230      * 初始化单图片上传组件 <br/>
    231      * 选择器为:.onePicUpload <br/>
    232      * 上传完成后会设置input内容以及在input后面追加<img>
    233      */
    234     initOnePicUpload : function(){
    235     	$(".onePicUpload").click(function(){
    236 			var _self = $(this);
    237 			KindEditor.editor(TT.kingEditorParams).loadPlugin('image', function() {
    238 				this.plugin.imageDialog({
    239 					showRemote : false,
    240 					clickFn : function(url, title, width, height, border, align) {
    241 						var input = _self.siblings("input");
    242 						input.parent().find("img").remove();
    243 						input.val(url);
    244 						input.after("<a href='"+url+"' target='_blank'><img src='"+url+"' width='80' height='50'/></a>");
    245 						this.hideDialog();
    246 					}
    247 				});
    248 			});
    249 		});
    250     }
    251 };
    252 

    第五步: 表单提交:

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

      1 	//提交表单
      2 	function submitForm(){
      3 		//有效性验证
      4 		if(!$('#itemAddForm').form('validate')){
      5 			$.messager.alert('提示','表单还未填写完成!');
      6 			return ;
      7 		}
      8 		//取商品价格,单位为“分”
      9 		$("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);
     10 		//同步文本框中的商品描述
     11 		
    itemAddEditor.sync();
     12 
     13 		$.post("/item/save",$("#itemAddForm").serialize(), function(data){
     14 			if(data.status == 200){
     15 				$.messager.alert('提示','新增商品成功!');
     16 			}
     17 		});
     18 	}
     
    总结:
    1:工程级别的引入 kindEdirtor 插件源码
    2:页面级别的控件初始化:
          步骤一: 引入 kindEditor js在页面的引入
          步骤二:创建文本域,并初始化富文本控件    
        KindEditor.create(select, TT.kingEditorParams);
    3:表单提交,一定要先把富文本编辑器与 textarea 文本域内容同步合并
            itemAddEditor.sync();
     
     
     
     
     
  • 相关阅读:
    自我介绍
    秋季学期总结
    第七周编程总结
    第六周作业
    第五周编程总结
    第四周编程总结
    第三周作业
    第二周作业
    抓老鼠啊~亏了还是赚了
    币值转换
  • 原文地址:https://www.cnblogs.com/ios9/p/JavaCode_Jsp_kindEditor_init.html
Copyright © 2020-2023  润新知