spring与ckeditor调整 _Web前端

spring与ckeditor整合

jsp部分代码

<tr>
<th style="height: 20px;">案例正文<em>(必填)</em>
</th>

<td>最多填写2000字</td>

</tr>

<tr>
<td colspan="2"><textarea class="w660 h100 mb10"
id="caseText" name="caseText"
onkeydown="if(this.value.length >2000) this.value=this.value.substr(0,2000);">
<c:out value="${cases.caseText}" escapeXml="true"></c:out> </textarea>
</td>
</tr>		
。。。。。。
<script type="text/javascript"
	src="<spring:url value="/static/js/base.js" htmlEscape="true" />"></script>
<script type="text/javascript"
	src="<spring:url value="/static/js/case.js" htmlEscape="true" />
?aa=<%=System.currentTimeMillis()%>"></script>
<script type="text/javascript"
	src="<spring:url value="/static/editor/ckeditor.js"></spring:url>"></script>
<script type="text/javascript"
	src="<spring:url value="/static/editor/config_front.js"></spring:url>"></script>
<script type="text/javascript">
	var editor = CKEDITOR.replace('caseText', {
		customConfig : 'config_front.js'
	});
</script>

?case.js

function save() {
	/* 必检字段 */
	var LastName = $("#LastName").val();// 客户姓氏
	var title = $("#title").val();// 案例标题
	var age = $("#age").val(); // 客户年龄
	var occupation = $("#occupation").val();// 客户身份
	var Income = $("#Income").val();// 月均收入
	var AnnualPremium = $("#AnnualPremium").val();// 年缴保费
	var CustomerDemand = $("#CustomerDemand").val();// 客户需求
	var caseText = editor.document.getBody().getHtml();
	// var caseText = $("#caseText").val();// 案例正文
	var InsuranceCompany = $("#InsuranceCompany").val(); // 保险公司
	var InsuranceProducts = $("#InsuranceProducts").val(); // 保险产品
	var appellation = $("#appellation").val(); // 称谓
	var sex = $("#sex").val(); // 性别

	var id = $("#id").val(); // id

	// 判断空
	if ($.trim(title) == '') {
		alert('案例标题');
		return false;
	}

	if ($.trim(LastName) == '') {
		alert('请输入姓氏');
		return false;
	}

	if ($.trim(age) == '') {
		alert('请选择年龄');
		return false;
	}

	if ($.trim(occupation) == '') {
		alert('请填写客户身份');
		return false;
	}

	if ($.trim(Income) == '') {
		alert('请填写月均收入');
		return false;
	}

	if ($.trim(AnnualPremium) == '') {
		alert('请填写年缴保费');
		return false;
	}

	if ($.trim(CustomerDemand) == '') {
		alert('请填写客户需求');
		return false;
	}

	if (CustomerDemand.length > 200) {
		alert("客户需求字数不能大于200字");
		return;
	}

	if ($.trim(editor.document.getBody().getText()) == '') {
		alert('请填写案例正文');
		return false;
	}

	if (caseText.length > 2000) {
		alert("案例正文字数不能大于2000字");
		return;
	}

	if ($.trim(InsuranceCompany) == 0) {
		alert('请填写保险公司');
		return false;
	}

	if ($.trim(InsuranceProducts) == '') {
		alert('请填写保险产品');
		return false;
	}

	// 判断格式
	if (!nameCheck('title')) {
		alert('请填写正确格式的标题！');
		return false;
	}

	if (!nameCheck('LastName')) {
		alert('请正确输入姓氏');
		return false;
	}

	if (!nameCheck('occupation')) {
		alert('请填写客户身份');
		return false;
	}

	if (!numCheck('Income')) {
		alert('请填写月均收入');
		return false;
	}

	if (!numCheck('AnnualPremium')) {
		alert('请填写年缴保费');
		return false;
	}

	if (!numCheck("Income")) {
		alert('请填写月均收入！');
		return false;
	}
	// $('#myForm').submit();//验证通过,提交到action
	// var content = $("#description").val();// 日程内容
	// var circulateFlg = $("#circulateFlg").val();// 重复flg
	// var LastName = $("#LastName").val();// 客户姓氏
	// var title = $("#title").val();// 案例标题
	// var age = $("#age").val(); // 客户年龄
	// var occupation = $("#occupation").val();// 客户身份
	// var Income = $("#Income").val();// 月均收入
	// var AnnualPremium = $("#AnnualPremium").val();// 年缴保费
	// var CustomerDemand = $("#CustomerDemand").val();// 客户需求
	// var caseText = $("#caseText").val();// 案例正文
	// var InsuranceCompany = $("#InsuranceCompany").val(); // 保险公司
	// var InsuranceProducts = $("InsuranceProducts").val(); // 保险产品
	/*
	 * var submitValue = "LastName=" + LastName + "&title=" + title + "&age=" +
	 * age + "&occupation=" + occupation + "&Income=" + Income +
	 * "&AnnualPremium=" + AnnualPremium + "&CustomerDemand=" + CustomerDemand +
	 * "&caseText=" + caseText + "&InsuranceCompany=" + InsuranceCompany +
	 * "&InsuranceProducts=" + InsuranceProducts + "&sex="+sex+
	 * "&appellation="+appellation+ "&id="+id;
	 */
	$.post("/cases/add", {
		LastName : LastName,
		title : title,
		age : age,
		occupation : occupation,
		Income : Income,
		AnnualPremium : AnnualPremium,
		CustomerDemand : CustomerDemand,
		caseText : caseText,
		InsuranceCompany : InsuranceCompany,
		InsuranceProducts : InsuranceProducts,
		sex : sex,
		appellation : appellation,
		id : id
	}, function(data) {

		if (data.status == 0) {
			$(".contact_tips").attr("style", "inline");

			if (id > 0) {
				document.getElementById("sp").innerText = "编辑成功";
			} else {
				document.form1.reset();
			}
			location.href = "#tips";
			// 清空选项
			// $("#reset").click();

		} else {
			alert("添加失败");
		}

	});
	// ajax提交数据
	// $.ajax({
	// type : 'post',
	// data : submitValue,
	// url : '/cases/add',
	// cache : false,
	// async : true,
	// success : function(data) {
	// if (data.status == 0) {
	// $(".contact_tips").attr("style", "inline");
	//						
	// if(id>0){
	// document.getElementById("sp").innerText ="编辑成功";
	// }else{
	// document.form1.reset();
	// }
	// location.href="#tips";
	// //清空选项
	// // $("#reset").click();
	//					
	// } else {
	// alert("添加失败");
	// }
	// }
	// });
}

注意：编辑页面和新增案例页面一致，同一个页面。

弄好后效果如图：

如果我提交时候，将case.js代码中注释掉得 $.ajax 代码放开，采用这个异步提交方式的话，我用火狐浏览器看post请求

caseText值是正常的，即html代码，但是我在类里面获取caseText值时候发现 <script>代码及后面的test都不见了。

莫非jquery中的 ajax方式将参数处理了？

时间紧只能用$.post方式，这回成功了，一堆html代码包括 <script>一堆转义的html代码传到了后台，后台直接插入数据库。

ckeditor本身采用了传递html代码方式，避免了恶意代码攻击，存到数据库也是html代码，但是我进入到编辑页面时候，需要将存入数据库的html代码再放入ckeditor文本框中，注意：不要做转义处理，ckeditor接受到方才提交的html代码，会自动转义的，这回就能看到刚才提交后的效果。

展示详情时候，需要将hmtl代码直接输出，${caseText} 或者用 <c:out value="${caseText}" escapeXml="false"></c:out>

这样输出到页面才是正确的值。

结论：进入编辑页面时候，ckeditor需要接收html代码，不是转义后的，因为ckeditor会自动转义回来的。

进入详情页时候直接输出即可。