使用jQuery抓住從CKEditor的的iframe

我有編輯內容使用CKEditor *（FCKEditor的V3）自定義編寫的CMS內容。我還使用插件在基於AJAX的提交之前檢查所有字段是否存在錯誤。我正在使用serialize()函數將數據傳遞給PHP後端。使用jQuery抓住從CKEditor的的iframe

問題是，serialize設法正確抓取所有字段，除了在CKEditor中鍵入的實際內容。像所有其他所見即所得編輯器一樣，這個編輯器也將iframe覆蓋在現有的文本框上。而序列化會忽略iframe，並只看內容的文本框，當然，它沒有找到，因此返回一個空白的內容主體。

我的這種方法是創建一個鉤子上的CKEditor的的onchange事件，並同時更新文本框（CKEDITOR.instances.[textboxname].getData()返回的內容）或在編輯器中所做的任何更改一些其他的隱藏字段。

但是，由於CKEditor仍處於測試階段，嚴重缺乏文檔，我無法找到一個合適的API調用，使我能夠做到這一點。

有沒有人有關於如何去做這個？

來源

2009-05-29 miCRoSCoPiC_eaRthLinG

我已經想出了儘可能多的從iframe中獲取內容： $（'#cke_contents_body iframe'）.contents（）。find（'body'）.html（）...最接近直接可尋址的元素，是一個帶有id的td，'cke_contents_body'。 CKEditor用這個td包裝了iframe。 – 2009-05-29 03:49:09

還是要去..一種通過掛接到CKEditor的變化事件來自動更新帶有數據的文本框的方法。有任何想法嗎？任何人？ – 2009-05-29 03:54:20

新的CKEditor版本已經解決了這個問題 – Ivan 2011-07-06 18:09:22

這應該這樣做...

CKEDITOR.instances["editor1"].document.on('keydown', function(event) 
{ 
    CKEDITOR.tools.setTimeout(function() 
    { 
     $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0); 
}); 

CKEDITOR.instances["editor1"].document.on('paste', function(event) 
{ 
    CKEDITOR.tools.setTimeout(function() 
    { 
     $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0); 
});

編輯：增加了部分粘貼後更新的文本框，太...

來源

2009-05-29 04:25:08 Stobor

感謝您的回覆......但它一直告訴我：「CKEDITOR.instances.editor1.document未定義」！ – 2009-05-29 09:20:56

順便說一句，你能解釋一下爲什麼你在這裏使用setTimeout而不是直接在按鍵時複製內容？ – 2009-05-29 09:23:06

用你的文本框名替換editor1。setTimeout是爲了確保我們在添加按鍵之後獲取內容，而不是之前。 – Stobor 2009-06-01 04:03:56

我也一直在想今天解決這個問題。我意識到上述代碼不適用於我的原因是因爲在引用文檔屬性時CKEditor實例尚未準備好。所以你必須調用「instanceReady」事件，並且可以使用文檔的事件，因爲在此之前它不存在。

這個例子可能會爲你工作：

CKEDITOR.instances["editor1"].on("instanceReady", function() 
{ 
//set keyup event 
this.document.on("keyup", CK_jQ); 

//and paste event 
this.document.on("paste", CK_jQ); 
}); 

function CK_jQ() 
{ 

    CKEDITOR.tools.setTimeout(function() 
    { 
     $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0); 
}

來源

2009-09-24 16:17:07

我一直在嘗試整夜得到這個工作，但還沒有成型。你能解釋一下你放置這個腳本的位置嗎？

我從xquery生成我的頁面，所以我不能把這個腳本放在頁面中，因爲它包含打破xquery處理的「{」。將腳本放在cdata中會破壞腳本。因此，我將instanceReady監聽器放置在創建編輯器的同一腳本中，並調用外部腳本來添加其餘腳本。例如：

<script type="text/javascript"> 
    var editor = CKEDITOR.replace('editor1'); 
    editor.on("instanceReady", updateInstance()) 
</script>

然後updateInstance包含：

function updateInstance() 
{ 
CKEDITOR.instances["editor1"].document.on('keydown', function(event) 
{ 
    CKEDITOR.tools.setTimeout(function() 
    { 
     $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0); 
}); 

CKEDITOR.instances["editor1"].document.on('paste', function(event) 
{ 
    CKEDITOR.tools.setTimeout(function() 
    { 
     $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0); 
}); 

}

來源

2009-11-13 01:05:11 Fraser

我剛剛發佈了一個CKEditor的jQuery插件，這將照顧這一切的背景，沒有任何額外的代碼： http://www.fyneworks.com/jquery/CKEditor/

來源

2009-11-25 20:23:26

我採取了一個稍微不同的方法我認爲使用ckeditor的更新功能會更好，並且由於正在使用keyup，所以不需要超時

CKEDITOR.instances["editor1"].on("instanceReady", function() 
{ 
//set keyup event 
this.document.on("keyup", CK_jQ); 

//and paste event 
this.document.on("paste", CK_jQ); 
} 

function CK_jQ() 
{ 
    CKEDITOR.instances.editor1.updateElement(); 
}

來源

2009-12-18 17:36:09 mcgrailm

到這一點的另一個通用的解決方案，可運行以下每當你嘗試提交表單

for (instance in CKEDITOR.instances) 
      CKEDITOR.instances[instance].updateElement();

這將迫使所有CKEDITOR實例的形式來更新各自領域

來源

2010-01-05 16:28:15

我成功與此：

console.log(CKEDITOR.instances.editor1.getData());

來源

2010-03-13 03:27:12

這樣做會更好：

CKEDITOR.instances.editor1.on('contentDom', function() { 
      CKEDITOR.instances.editor1.document.on('keyup', function(event) {/*your instructions*/}); 
     });

裁判：http://cksource.com/forums/viewtopic.php?f=11&t=18286

來源

2010-04-13 01:33:25 netfed

的contentDom事件爲我工作，而不是instanceReady ......我真的想知道是什麼事件，AE，但我相信他們是私有的......

var editor = CKEDITOR.replace('editor'); 

CKEDITOR.instances.editor.on("instanceReady", function(){ 
    this.on('contentDom', function() { 
     this.document.on('keydown', function(event) { 
      CKEDITOR.tools.setTimeout(function(){ 
       $(".seldiv").html(CKEDITOR.instances.editor.getData()); 
      }, 1); 
     }); 
    }); 
    this.on('contentDom', function() { 
     this.document.on('paste', function(event) { 
      CKEDITOR.tools.setTimeout(function(){ 
       $(".seldiv").html(CKEDITOR.instances.editor.getData()); 
      }, 1); 
     }); 
    }); 
    edits_clix(); 
    var td = setTimeout("ebuttons()", 1); 
})

來源

2011-02-17 10:34:46 GoodNews

CKEDITOR.instances.wc_content1.getData()將返回CKEditor的數據
CKEDITOR.instances.wc_content1.setData()將設置CKEditor的數據

來源

2011-07-22 20:08:09 Mahesh

我覺得用r正在詢問關於序列化的問題，我正在努力序列化一個表單來提交，這給了我很多問題。

這是爲我工作：

$(document).ready(function() { 
$('#form').submit(function(){ 
if (CKEDITOR.instances.editor1.getData() == ''){ 
    alert('There is no data available');//an alert just to check if its working 
}else{ 
    var editor_data = CKEDITOR.instances.editor1.getData(); 
    $("#editor1").val(editor_data); //at this point i give the value to the textarea 
    $.ajax({ 
        //do your ajax here 

        }); 

     } 
return false; 
    }); 
});

來源

2011-11-09 16:14:56 user731144

我解決了這個問題與當前版本：http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js

後線55this.submit（函數（事件）{ - 我添加此代碼：

if (typeof CKEDITOR !== "undefined") { 
    for (instance in CKEDITOR.instances) 
     CKEDITOR.instances[instance].updateElement(); 
}

來源

2012-01-17 12:45:45 heuri

使用jQuery抓住從CKEditor的的iframe

回答

相關問題