CKEditor和iframes

我正在體驗與CKEditor的東西。我讀的文檔，但我不能找到一種方法，做我想要做的事。（我在Java中，JSP頁面）CKEditor和iframes

我有一個路徑

String path = request.getContextPath();

我需要調用這個路徑

<%=path%>/docX/Controller

我有非常基本的：

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

工作得非常好，但我想，當PA添加內容ge負載。

我試着與我的道路代碼手動添加的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文件只有「測試」裏面。沒有什麼像<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

來源

2016-03-24 anthomaxcool

我會回答我的問題，如果有人有同樣的問題，他可以試試這個解決方案。

所以我刪除了我的CKEditor的，我添加了一個空的<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); 
    } 
});

來源

2016-03-29 13:38:01 anthomaxcool

CKEditor和iframes

回答

相關問題