因為編者我還是一個初學入門者,無論是JS還是PHP,都是懂了點皮毛。今天在研究ckeditor編輯器的時候遇到了一些問題,雖然這只是我的個人問題,但覺得可以分享給其他人,或許也有像我這樣的初學者也會遇到這問題。

好了,現在談一下這問題。

在接觸ckeditor編輯器之前,編者製作的表單都是用的<textarea>標籤,比如製作的留言本、新聞釋出器等,但由於<textarea>的輸入框輸入的內容格式單一,基本沒什麼擴充套件功能,所以使用了ckeditor編輯器。在這裡先宣告,編者使用的是ckeditor3.6版本的。

在<textarea>的時候,我們用js判斷輸入框內容是否為空一般都是這麼寫的:

<script>
    function check_form(){
        if(myform.content.value==""){
            alert("請輸入內容!");
            return false;
        }
    }
</script>

下面是表單程式碼:

<form action="" name="myform" method="post">
    <textarea name="content" rows=10 cols=40>預設內容</textarea>
    <input type="submit" name="sub"  check_form()">
</form>

上面的兩端程式碼組合是可以進行輸入框內容驗證的。

那麼在使用了ckeditor3.6之後,如果js裡繼續使用myform.content.value獲取輸入框裡的內容的話是沒有效果的了。後來網上了解到,在ckeditor3.6版本里,要獲取到編輯器裡的內容,需要使用CKEDITOR.instances.content_name.getData(),其中content_name換成你自己的name屬性值,在3.0及之前版本使用CKEDITOR.instancesgetData()。而且獲取到的編輯器裡的內容是帶有html標籤的,這要注意了。


譬如編者最後改版的js程式碼如下:

<script>
function check_form(){
    var content= CKEDITOR.instances.content.getData();
    if(content==""||content.match("請在這裡輸入新聞內容!")){
        xw.content.focus();
        alert("請填寫新聞內容!");
        return false;
    }
}
</script>

JS程式碼可見,用CKEDITOR.instances.content_name.getData()獲取到編輯器裡的內容到變數content裡,再在if條件裡判斷content內容是否為空,也判斷是否包含下面我設定的預設值“請在這裡輸入新聞內容!”,一旦判斷有其中之一就認為沒有使用者填寫新聞內容。這裡之所以用content.match()方法判斷而不用content==”請在這裡輸入新聞內容!”是因為獲取到的編輯器裡的內容帶有html標籤,所以嘛,就不解釋了。

再看錶單程式碼如下(結合PHP):

<form name="myform" action="" method="post">
    //顯示編輯器(之前要建立CKEditor物件,這裡就不寫了)
    <?php $ed->editor("content","請在這裡輸入新聞內容!"); ?>
    <input type="submit" name="sub"  check_form()">
</form>

表單程式碼中可見,顯示的編輯器的name屬性值是content,預設顯示的文字是“請在這裡輸入新聞內容!”

這樣就完成了對ckeditor編輯器內容是否為空的檢測了。

當然可能這篇博文還有很多不完善的地方,希望各位高手們指出,以便日後完善一下。