Question

我正在体验CKEditor的东西。我阅读了文档，但是我找不到办法去做我想做的事情。（我在Java中，在jsp页面中）

我有路径

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

如果我理解得很好，这是正常的。如果我点击＆＃34;预览＆＃34;我会看到我想要看到的东西。但我想先看看它，我希望能够编辑它。

它将返回的文件是.html文件。所以我必须得到内心的HTML＆＃39;从该文件中以某种方式将其放在编辑器中。如果有更简单的数据获取方式，则不必是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文件只有＆＃34; test＆＃34;在里面。没有像<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

Answer 1

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

所以我从我的CKEditor中删除了<iframe>并添加了一个空的<p>。我只是将我的网址的返回数据放入<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); 
    }
});

CKEditor和iframe

1 个答案: