在iframe中獲取CKEditor的內容
[英]get the contents of a CKEditor within an Iframe
問題描述
我使用以下代碼在http://www.wilsea.com/iframe上顯示CKEditor。 我可以獲取並設置html文檔中的數據。
<!DOCTYPE html>
<html>
<head>
<script type="text/javaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script src="http://www.wilsea.com/ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea id="editor1" name="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor2
</textarea>
<div id="someID">Hello world!</div>
<script>
function myFunction() {
var html = 'this is my new text from function1 ';
alert('function 1 test121');
CKEDITOR.instances['editor1'].setData(html);
}
function myFunction2() {
var editorData = CKEDITOR.instances['editor1'].getData();
alert('new data' + editorData);
}
CKEDITOR.replace( 'editor1' );
</script>
<p>Click the button to trigger a function.</p>
<button onclick="myFunction()">Set Data</button>
<button onclick="myFunction2()">Get Data</button>
<p id="demo"></p>
</body>
</html>
我在這里遵循了這個答案： http : //simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/
所以我補充說：
<div id="someID">Hello world!</div>.
我已將應用程序上傳到www.wilsea.com/iframe，因此應該沒有跨域問題。
按鈕代碼為：
var HTML1 = $('#iFrame1').contents().find('#someID').html();
alert(HTML1);
var HTML1 = $('#iFrame1').contents().find('#editor1').html();
alert(HTML1);
我已經在Chrome中使用過開發人員工具，並且看到“ id someID”退出了，所以我在這里不了解其中的哪一部分？
我的目標是能夠：
- 從我的數據庫中填充CKEditor的html內容。
- 允許客戶端編輯/添加圖像等。
- 將CKEditor的html內容保存到我的數據庫中。
1 個解決方案
解決方案1
0 2014-06-16 12:30:22
我從這里得到答案：
關鍵是DOM元素ID不是AC小部件名稱。 但是，您可以通過以下操作輕松獲得和使用DOM ID（在此示例中，“ contextMenu”是iFrame小部件的AC名稱）
contextMenuId = 'iframe_' + app.w('contextMenu').base()[0].id;
document.getElementById(contextMenuId).contentDocument.getElementsByClassName('cke_wysiwyg_frame')[0].contentDocument.body.innerHTML
它可能與每個人都不相關，因為它特定於應用程序，但思考過程可能會幫助其他人。
MRWarby
如何獲取ckeditor的內容？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.