CKEditor and iframes

CKEditor and iframes

本文关键字：iframes and CKEditor      更新时间：2023-09-26

我正在使用CKEditor。我读了文档，但我找不到一种方法来做我想做的事情

我有一条路径

String path = request.getContextPath();

我需要把这条路称为

<%=path%>/docX/Controller

我所拥有的是非常基本的：

<div id="editor">
    <h1>Hello world!</h1>
</div>
<script>
    initSample();
</script>

这非常有效，但我想在页面加载时添加内容。

我试着用我的路径在代码中手动添加一个iframe，比如

<iframe src="<%=path%>/docX/Controller"></iframe>

但它显示了这样的东西：http://docs.cksource.com/images/9/93/CKEditor_iframe_example1.png

如果我理解得很好，这是正常的。如果我点击"预览"，我会看到我应该看到的内容。但我想先看看它，我想能够编辑它。

它将返回的文件将是一个.html文件。因此，我必须从该文件中获取"innerHTML"，并以某种方式将其放入编辑器中。如果有更简单的方法来获取数据，那么它不一定是iframe。

现在我正试图从iframe中获取html，并将其放入<p>中。到目前为止，我得到的是这样的：

<%
    String path = request.getContextPath();
%>
<div class="main">
    <div class="grid-container">
        <div class="grid-width-100">
            <div id="editor">
                <h1>Hello world!</h1>
                <iframe id="frame" src="<%=path%>/docX/Controller"></iframe>
            </div>
        </div>
    </div>
</div>
<script>
    initSample();
    var iframe = document.getElementById("frame");
    var iframe_contents = iframe.contentDocument.body.innerHTML;
    alert(iframe_contents);
</script>

我的alert()显示了一个空字符串，但如果我点击预览，我可以看到文本。

任何形式的帮助都是值得感激的。

编辑：我的html文件里面只有"test"，没有<html> <head>之类的东西。我试过

$(document).ready(function () {
     var test = $("#frame").contents().find("html").html();
     alert(test);
})

但它返回<html></html><body></body>

编辑2:

我把它换成

$(document).ready(function () {
      var mydocument = document.getElementById("frame").contentDocument;
      var serializer = new XMLSerializer();
      var content = serializer.serializeToString(mydocument);
      alert(content);
})

我的结果是：<html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css"></style></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;"></pre></body></html>

如果我打开我的.html文件，我看到的只是test

我会回答我的问题，所以如果有人有同样的问题，他可以尝试这个解决方案。

因此，我从CKEditor中删除了<iframe>，并添加了一个空的<p>。我只是将返回的URL数据放入<p>中。

<%
    String path = request.getContextPath();
%>
<div class="main">
    <div class="grid-container">
        <div class="grid-width-100">
            <div id="editor">
                <p id="content"></p>
            </div>
        </div>
    </div>
</div>
<script>
    initSample();
    $(document).ready(function () {
        $.get('<%=path%>/docX/Controller').then(function(responseData) {
            $("#content").append(responseData);
        });
    })
</script>

在我的情况下，responseData返回"test"。例如，如果您的文本是粗体，那么它也将使用属性。

这将在IE中工作。但为了使其在chrome中工作，在我的情况下，它将返回object XMLDocument。我不得不这样做：

$.ajax({
    url: '<%=path%>/docX/Controller',
    type: 'GET',
    dataType: 'text',
    success: function(data){
        alert(data); 
    }
});
相关文章：