如何在javascript中读取ckeditor文本框而不是普通文本框?

时间:2013-10-30 02:52:54

标签: javascript ckeditor

如何阅读ckeditor文本框而不是普通文本框?我的代码有我尝试的ckeditor代码(但是

这是从iframe读取文本框的代码(jsfiddle:http://jsfiddle.net/RTBJQ/12/):

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Copy to iframe 1 to iframe 2</title>
    </head>
    <body>
        <iframe src="http://fiddle.jshell.net/W88j8/show/" id="iframe1" height="600" width="500"></iframe>
        <button id="copyButton">Copy</button>
        <iframe id="iframe2" height="600" width="500"></iframe>
        <script>
            window.onload = function(){
                var iframe1 = document.getElementById('iframe1');
                var iframe2 = document.getElementById('iframe2');

                //After you will be able to use the DOM of the 2 iframes to read content
                var oDoc1 = (iframe1.contentWindow || iframe1.contentDocument);
                if (oDoc1.document) oDoc1 = oDoc1.document;
                var oDoc2 = (iframe2.contentWindow || iframe2.contentDocument);
                if (oDoc2.document) oDoc2 = oDoc2.document;

                //Where we gonna output the datas
                var outputBody = oDoc2.body;

                var copyButton = document.getElementById('copyButton');
                copyButton.onclick = function(){
            var inputs = oDoc1.getElementsByTagName('textarea');
            //var inputs =  iframe1.CKEDITOR.instances.test6.getData();
            //console.log(typeof inputs);  console.log(inputs.toString());
            outputBody.innerHTML = '<div>';
                    for (var i = 0 ; i < inputs.length ; i++){
                        outputBody.innerHTML += '<div>'+inputs[i].value+'</div>';
                    }
                    outputBody.innerHTML += '</div>';
                };
            };
        </script>
    </body>
</html>

我认为读取textarea的这一行应该是固定的(jsfiddle上的第27行):

var inputs = oDoc1.getElementsByTagName('textarea');

这是我尝试过的,但它不起作用(jsfiddle [注释]上的第28行):

var inputs =  iframe1.CKEDITOR.instances.test6.getData();

这是它应该读取的textarea(ckeditor)的类型,这是iframe#1中的HTML代码:

<script type="text/javascript" src="http://nightly.ckeditor.com/13-10-29-07-05/standard/ckeditor.js"></script>

<textarea class="ckeditor" id="test6" name="testa">asdfasdf</textarea>

感谢。

1 个答案:

答案 0 :(得分:0)

像这样:http://jsfiddle.net/RTBJQ/22/

至少在Chrome中,如果我明白你想做什么,它就有效。相关部分:

var input = iframe1.contentWindow.CKEDITOR.instances.test6.getData();
outputBody.innerHTML = '<div id="MagicalPonies">' + input + '</div>';

要遍历实例,您可以这样做:http://jsfiddle.net/RTBJQ/24/ - 相关部分:

var html = "";
for (var insta in iframe1.contentWindow.CKEDITOR.instances) { 
    var input = iframe1.contentWindow.CKEDITOR.instances[insta].getData();
    html += '<h1>'+insta+'</h1><div>' + input + '</div>';
}
outputBody.innerHTML = html;