實時編輯器，用於在文本區域（或類似區域）內編輯iframe的HTML和CSS。

Question

好的，作為序言，我不是一個經驗豐富的程序員。 我的領域主要是HTML和CSS，所以我有點被困在這里，而且我在網上搜索很多東西，找不到所需的內容。 無論是我的措辭不好還是缺乏信息，我都不確定，哈哈。

現場版

的HTML
<select ONCHANGE="document.getElementById('display-inner').src = this.options[this.selectedIndex].value"> <option value="http://tessisamess.com/freeedit.html">Free Edit</option> <option value="http://tessisamess.com/completestyle.html">Complete Style</option> <option value="http://tessisamess.com/generator.html">Generator</option>

JQUERY

$(function() {
    function change() {
    var iFrame =  document.getElementById('display-inner');
    var iFrameBody;
    if ( iFrame.contentDocument ) 
    { // FF
    iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
    }
    else if ( iFrame.contentWindow ) 
    { // IE
    iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
    }
    iFrameBody.innerHTML = document.getElementById('input-inner').value;
    }
    });

我要完成的工作：
我正在為通常為其創建布局的用戶創建一個實時編輯器，並且我擁有了“自由編輯”模式和“保存”功能。 我還獲得了兩個基本布局，這些布局通常會重新設置樣式並上傳並顯示在iframe中，您可以從下拉菜單中調用布局或自由編輯，以顯示在編輯器旁邊的右側。

這里的目標是使您能夠單擊這三種模式中的任何一種，然后在左側進行編碼，然后查看更新會影響右側iframe中已經存在的內容，而不是清除它並將其替換為textarea內容（即目前正在做什么。）

什么需要起作用，什么不起作用：
當您單擊“完整樣式”或“生成器”時，文本區域（左）需要顯示人們用來對每個布局進行樣式設置的基本代碼。 當您開始編輯該面時（通過使用為您生成的代碼或將其替換為預制的布局編輯），所做的更改將影響右側所連接的iframe。 （示例：將背景圖像添加到body將更改iframe中的頁面背景，依此類推。）

目的：
我使用它作為一種工具，為那些經常在網站上使用我的自由布局的用戶提供了麻煩，這些用戶在使用網站的過時資源進行編輯時遇到了麻煩。 我希望他們能夠放入我的自定義CSS並根據需要對其進行編輯，以便他們可以將其帶回網站並在其實際日記中實現。

請注意，如果需要，我可以更改已經起作用的方式。 我希望它能正常工作，而不是堅持現有的東西。 我並不是真的想上傳TinyMCE，但是如果選項很小，那就嘿。 沒什么吧？

 $(function() { function change() { var iFrame = document.getElementById('display-inner'); var iFrameBody; if ( iFrame.contentDocument ) { // FF iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0]; } else if ( iFrame.contentWindow ) { // IE iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0]; } iFrameBody.innerHTML = document.getElementById('input-inner').value; } }); $(function() { function saveTextAsFile() { var textToWrite = document.getElementById('input-inner').value; var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'}); var fileNameToSaveAs = "mycode_tessisamess.txt"; var downloadLink = document.createElement("a"); downloadLink.download = fileNameToSaveAs; downloadLink.innerHTML = "Download File"; if (window.webkitURL != null) { // Chrome allows the link to be clicked // without actually adding it to the DOM. downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob); } else { // Firefox requires the link to be added to the DOM // before it can be clicked. downloadLink.href = window.URL.createObjectURL(textFileAsBlob); downloadLink.onclick = destroyClickedElement; downloadLink.style.display = "none"; document.body.appendChild(downloadLink); } downloadLink.click(); } var button = document.getElementById('save'); button.addEventListener('click', saveTextAsFile); }); 

 @import url(https://fonts.googleapis.com/css?family=Open+Sans); ::selection{background:#EAA2B9;} ::-moz-selection{background:#EAA2B9;} body,html{height:100%;} body{margin:0;} #input, #display{display:inline-block;height:100%;vertical-align:top;overflow:hidden;} #input{position:relative;background:#ddd url(http://i.imgur.com/wBSwx5F.jpg)center no-repeat fixed;width:35%;-webkit-box-shadow:inset -10px 0 10px -10px rgba(0,0,0,0.6);box-shadow:inset -10px 0 10px -10px rgba(0,0,0,0.6);} #controls{font-family:Open Sans,Helvetica,arial,sans-serif;font-size:13px;text-align:right;height:24px;background:#fff;padding:7px;border-bottom:1px solid #ccc;-webkit-box-shadow:inset -10px 0 10px -10px rgba(0,0,0,0.6);box-shadow:inset -10px 0 10px -10px rgba(0,0,0,0.6);} .c-button, select, option{background:#fff;cursor:pointer;border:1px solid rgba(0,0,0,0.3);border-radius:4px;padding:2px 10px;margin:0 2px;font-family:Open Sans,Helvetica,arial,sans-serif;} #input-inner{position:absolute;bottom:4px;top:38px;width:97%;margin:0;background:transparent;border:none;padding:10px;color:#000;overflow:auto;} input:focus, textarea:focus, select:focus, option:focus{outline:none;} #display{width:65%;} #display-inner{height:100%;overflow:auto;border:none;width:100%;} #display-inner p{max-width:600px;display:block;margin:0 auto;padding:100px;text-align:justify;font-family:Open Sans,Helvetica,arial,sans-serif;line-height:150%;font-size:115%;color:#444;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <form id="input"> <div id="controls">Options: <select ONCHANGE="document.getElementById('display-inner').src = this.options[this.selectedIndex].value"> <option value="http://tessisamess.com/freeedit.html">Free Edit</option> <option value="http://tessisamess.com/completestyle.html">Complete Style</option> <option value="http://tessisamess.com/generator.html">Generator</option> </select> <button type="button" value="save" id="save" class="c-button">save</button> <input type="reset" class="c-button" value="clear"> </div> <textarea id="input-inner" onkeyup="change();" placeholder="You are in Free Edit mode! You can paste your code here, or start coding from scratch. To style a layout instead, select your base from the dropdown above, and start with the base CSS given to create a new layout, or replace it with the free layout coding you wish to edit. All changes will appear on the righthand side as you make them."></textarea> </form><!--- ---><div id="display"> <iframe id="display-inner" src="http://tessisamess.com/freeedit.html"> </iframe> </div> </body> 

Answer 1

如果我要涵蓋使您按照需要的方式工作所需要發生的所有方面，那么這將是一個非常長的答案，因此，我將給您一些有用的提示。

• 您可以從主頁訪問iFrame document.getElementById('MY_IFRAME_ID').contentWindow.document ： document.getElementById('MY_IFRAME_ID').contentWindow.document
• Element.outerHTML和Element.innerHTML屬性將是您檢索和更新頁面代碼的最佳朋友。
• 要顯示HTML，您可以執行以下操作： iframeDocument.getElementsByTagName('html')[0].outerHTML ，它將包含整個頁面的HTML，包括所有內聯css / js。 如果您還需要doctype，請閱讀此內容 。 將所有內容插入到textarea中。
• 要進行更新，您可以從文本區域中獲取html，然后使用Element.innerHTML將其重新插入，如下所示： iframeDocument.getElementsByTagName('html')[0].innerHTML = htmlFromTextarea
• 對於外部css / js，您將需要一種適當的方式來顯示代碼，但我將留給您自己來弄清楚代碼的細節。
• 要獲得外部CSS，您可能需要迭代iframeDocument.styleSheets ，並使用與上述方法類似的策略，盡管您可能需要牢記一些跨瀏覽器的注意事項 。
• 對於外部js，您可以以類似的方式找到它們。 遍歷iframeDocument.getElementsByTagName('script')並使用Element.innerHTML獲取其內容
• 您可以實施每次僅更新部分而不是整個文檔的策略，但這涉及更多。 我建議您采用“更新整個文檔”的路線，直到您對活動部件有了更好的了解。
• 語法高亮會很有幫助，因此請考慮將代碼放入“ Ace ”之類的代碼編輯器中。

我希望這個幫助能祝你好運！ 如果您認為此答案可以解決您的問題，請不要忘記將其視為正確答案。