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

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

1. jsp中代码

< div class = "form-group" >

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

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

< div class = "col-sm-10" >

< textarea id = "content1" name = "content1" cols = "100" rows = "8" styl e= "widt h: 700p x; heigh t: 200p x; visibilit y: hidde n; ">< /textare a >

</ 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

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

< link rel = "stylesheet"

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

< link rel = "stylesheet"

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

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

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

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

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

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

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

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

< script charset = "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控件 里。