在iframe中获取CKEditor的内容

Question

I have the following code to display a CKEditor at http://www.wilsea.com/iframe . 我使用以下代码在http://www.wilsea.com/iframe上显示CKEditor。 I can get and set the data within the html document. 我可以获取并设置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>

I followed this answer here: http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/ 我在这里遵循了这个答案： http : //simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

So I added: 所以我补充说：

<div id="someID">Hello world!</div>.

I have uploaded the app to www.wilsea.com/iframe so there should be no cross domain issues. 我已将应用程序上传到www.wilsea.com/iframe，因此应该没有跨域问题。

The button code is: 按钮代码为：

var HTML1 =  $('#iFrame1').contents().find('#someID').html();
alert(HTML1);


var HTML1 =  $('#iFrame1').contents().find('#editor1').html();
alert(HTML1);

I have used the developer tools in Chrome and I see that 'id someID' exits so what part of this am I not understanding here? 我已经在Chrome中使用过开发人员工具，并且看到“ id someID”退出了，所以我在这里不了解其中的哪一部分？

My goal is to be able to: 我的目标是能够：

Populate the html content of the CKEditor from my database. 从我的数据库中填充CKEditor的html内容。
Allow the client to edit / add images etc. 允许客户端编辑/添加图像等。
Save the html content of the CKEditor to my database. 将CKEditor的html内容保存到我的数据库中。

Answer 1

I got the answer from here: 我从这里得到答案：

https://getsatisfaction.com/application_craft/topics/accessing_an_iframe?utm_source=notification&utm_medium=email&utm_campaign=new_reply&utm_content=reply_button&reply[id]=14399739#reply_14399739 https://getsatisfaction.com/application_craft/topics/accessing_an_iframe?utm_source=notification&utm_medium=email&utm_campaign=new_reply&utm_content=reply_button&reply[id]=14399739#reply_14399739

The key is that the DOM element id is not the AC widget name. 关键是DOM元素ID不是AC小部件名称。 But you can get and use the DOM id fairly easily with the following ('contextMenu' is the AC name of an iFrame widget in this example) 但是，您可以通过以下操作轻松获得和使用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

It maybe not relevant to everyone as it is specific to application craft but the thought process may help others. 它可能与每个人都不相关，因为它特定于应用程序，但思考过程可能会帮助其他人。

MRWarby MRWarby

在iframe中获取CKEditor的内容

问题描述

1 个解决方案

解决方案1
0 2014-06-16 12:30:22

在iframe中获取CKEditor的内容

问题描述

1 个解决方案

解决方案1 0 2014-06-16 12:30:22

解决方案1
0 2014-06-16 12:30:22