允许在文本区域（或类似区域）中编辑 iframe 的 HTML 和 CSS 的实时编辑器。

Question

好的，首先，我不是一个经验丰富的程序员。我所在的区域主要在HTML和CSS，所以有点卡在这里，网上搜了好几下都没有找到我需要的；是我措辞不当还是缺乏信息，我不确定，哈哈。

THE LIVE VERSION

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 内容（这是它目前所做的。）

哪些需要起作用，哪些不需要：
当您单击 Complete Style 或 Generator 时，文本区域（左侧）需要显示人们用来设置每个布局样式的基本代码。当您开始编辑该侧时，无论是使用为您生成的代码，还是将其替换为预制布局编辑，这些更改都会影响它在右侧连接到的 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
Element.outerHTML and Element.innerHTML 属性将是您检索和更新页面代码的最佳伙伴。
要显示 HTML，您可以执行：iframeDocument.getElementsByTagName('html')[0].outerHTML，这将包含整个页面的 HTML，包括所有内联 css/js。如果您还需要文档类型，请阅读 this。将所有内容插入文本区域。
要进行更新，您可以从您的文本区域中获取 html，然后使用 Element.innerHTML 将其插入回去，如下所示：iframeDocument.getElementsByTagName('html')[0].innerHTML = htmlFromTextarea
对于外部 css/js，您将需要一种正确的方式来显示代码，但我会留给您来弄清楚其中的细节。
要获得外部 css，您只需迭代 iframeDocument.styleSheets，并使用与上述类似的策略，尽管 there are some cross browser considerations 您可能需要牢记.
对于外部js，你可以用类似的方式找到它们。迭代 iframeDocument.getElementsByTagName('script') 并使用 Element.innerHTML
您可以实施每次只更新部分而不是整个文档的策略，但这有点复杂。我建议采用 "update entire document" 路线，直到您更好地了解活动部件。
语法高亮会非常有用，因此请考虑将您的代码放入“Ace”等代码编辑器中。

希望对您有所帮助，祝您好运！如果您认为它解决了您的问题，请不要忘记检查此答案是否正确。

允许在文本区域（或类似区域）中编辑 iframe 的 HTML 和 CSS 的实时编辑器。

Live editor that allows for editing of an iframe's HTML and CSS within a textarea (or similar.)

javascript

iframe

jquery

textarea

liveedit

THE LIVE VERSION