Jquery 對Ckeditor 取值

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") 是否為空是不行的。理由上面已經講到了，這點需要注意下。