BootStrap Validator插件与KindEditor富文本编辑器冲突时的解决方法

使用bootstrapvalidator验证富文本编辑器时后台取值为空的解决方法

1. jsp中代码

<divclass="form-group">

<labelfor="content1"class="col-sm-2 control-label">商品详情</label>

<!-- 富文本编辑器 -->

<divclass="col-sm-10">

<textareaid="content1"name="content1"cols="100"rows="8"style="width: 700px; height: 200px; visibility: hidden;"></textarea>

</div>

</div>

2、js中代码

//富文本编辑器

KindEditor.ready(function(K) {

var editor1 = K.create('textarea[name="content1"]',

{

cssPath : '${ctx}/kindeditor/plugins/code/prettify.css',

uploadJson : '${ctx}/kindeditor/jsp/upload_json.jsp',

fileManagerJson :'${ctx}/kindeditor/jsp/file_manager_json.jsp',

allowFileManager : true,

afterBlur: function(){this.sync();}

/* afterCreate : function() {

var self = this;

K.ctrl(document, 13, function() {

self.sync();

   document.forms['example'].submit();

});

K.ctrl(self.edit.doc, 13, function() {

self.sync();

document.forms['example'].submit();

});

} */

});

prettyPrint();

});

1. 需要添加的css和js

<!-- 富文本剪辑器开始 -->

<linkrel="stylesheet"

href="${ctx}/kindeditor/themes/default/default.css"/>

<linkrel="stylesheet"

href="${ctx}/kindeditor/plugins/code/prettify.css"/>

<scriptcharset="utf-8"src="${ctx}/kindeditor/kindeditor-all-min.js"></script>

<scriptcharset="utf-8"src="${ctx}/kindeditor/lang/zh-CN.js"></script>

<scriptcharset="utf-8"src="${ctx}/kindeditor/plugins/code/prettify.js"></script>

<!-- 富文本编辑器结束 -->

<!-- 富文本编辑器js开始 -->

<scriptcharset="utf-8"src="${ctx}/kindeditor/kindeditor-all-min.js"></script>

<scriptcharset="utf-8"src="${ctx}/kindeditor/lang/zh-CN.js"></script>

<scriptcharset="utf-8"

src="${ctx}/kindeditor/plugins/code/prettify.js"></script>

<!-- 富文本编辑器js结束 -->

问题1：添加bootStrap Validator验证插件之前，后台servlet可以根据富文本编辑器的name值获取输入的内容（以HTML标签的形式存储）。加入验证之后，富文本编辑器中的图片可以上传，但是后台获取的值为null（数据库中的内容为空）

解决方法（如下图所示）:

直接用表单的提交按钮<input type=”submit” value=”提交” />可以得到值。

而通过js的 submit()提交则为空值，解决办法就是在初始化kindeditor时加入一行代码：

afterBlur: function(){this.sync();}

这行代码的意思就是在textarea失去焦点之后执行this.sync();

这个函数就是同步KindEditor的值到textarea文本框。
官方解释：
sync()：将编辑器的内容设置到原来的textarea控件里。