Ckeditor 前身是FCKeditor。一个还不错的富文本编辑器。
昨天用到了这个插件,这个插件本来在系统中已经使用过的,准备照搬代码,却发现,上一个离职的哥们写的代码,有点小问题。
代码如下
<script type="text/javascript" src="../js/ckeditor/ckeditor.js"></script>
<textarea id="content" name="content">${model.content}</textarea>
<script type="text/javascript">
CKEDITOR.replace( 'content' );
</script>
然后表单直接这样被提交到后台的话,后台取的是name为content的值,这样的话,后台是取不到任何的值的。
然后去网上找了半天,终于找到了可以用的,用jquery取Ckeditor 的值。
<script type="text/javascript" src="../js/ckeditor/ckeditor.js"></script>
<textarea id="content" name="content">${model.content}</textarea>
<script type="text/javascript">
CKEDITOR.replace( 'content' );
function getContenet(){
return CKEDITOR.instances.content.getData(); //获取textarea的值
}
</script>
这样的话,我们直接调用getContenet()这个方法,就可以取到当前这个textarea的值了。
因为我们系统是采用了Spring的MVC模式,所以再提交这个表单的时候,只需把取到的值再重新赋值给名字为content的textarea元素就可以了。
代码如下:
<script type="text/javascript">
var kcontent=getContenet();
if(kcontent.length==0){
errorMsg("提示信息:","邮件内容不能为空!");
}else{
$("#content").val(kcontent);
}
</script>
<textarea id="content" name="content">${model.content}</textarea>
<script type="text/javascript">
CKEDITOR.replace( 'content' );
function getContenet(){
return CKEDITOR.instances.content.getData(); //获取textarea的值
}
</script>
直接对content这个元素取值,是取不到的。$("#content")这样取出来的是空,我猜想,他这个插件应该是在内部用一种div的形式覆盖在了这个textarea元素上面。
具体的还有待查资料考证一下。
CKEDITOR.instances.content.getData(); //获取textarea的值
这段代码是重点。
当然,表单验证的话,也需要小小修改了。直接判断 $("#content") 是否为空是不行的。理由上面已经讲到了,这点需要注意下。