1

好的，首先，我不是一个经验丰富的程序员。我的领域主要是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>

查询

    $（函数（）{
    函数变化（）{
    var iFrame = document.getElementById('display-inner');
    变量 iFrameBody;
    如果（iFrame.contentDocument）
    { // FF
    iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0];
    }
    否则如果（iFrame.contentWindow）
    { // IE
    iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0];
    }
    iFrameBody.innerHTML = document.getElementById('input-inner').value;
    }
    });

我想要完成的工作：
我正在为我通常为其创建布局的用户创建一个实时编辑器，并且我有自由编辑模式和保存功能，所有这些都可以正常工作。我也有我的两个基本布局，它们经常被上传并显示在 iframe 中，你可以从下拉列表中调用布局或自由编辑，以显示在右侧，在编辑器旁边。

这里的目标是让您能够单击三种模式中的任何一种，然后在左侧编码并查看您的更新影响右侧 iframe 中已有的内容，而不是清除它并将其替换为您的 textarea 内容（即它目前的作用。）

什么需要起作用，什么不能起作用：
当您单击 Complete Style 或 Generator 时，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>

4

1 回答 1

2

如果我要涵盖您需要发生的所有方面以使其按照您需要的方式工作，这将是一个很长的答案，所以我会给您一些有用的提示。

  • 您可以通过以下方式从主页访问 iFrame 的文档：document.getElementById('MY_IFRAME_ID').contentWindow.document
  • Element.outerHTML和Element.innerHTML属性将是您检索和更新页面代码的最佳朋友。
  • 要显示 HTML，您可以执行以下操作：iframeDocument.getElementsByTagName('html')[0].outerHTML这将包含整个页面的 HTML，包括所有内联 css/js。如果您还需要文档类型，请阅读此。将所有内容插入文本区域。
  • 要进行更新，您可以从 textarea 中获取 html 并将其插入回来，Element.innerHTML如下所示：iframeDocument.getElementsByTagName('html')[0].innerHTML = htmlFromTextarea
  • 对于外部 css/js，您需要一种正确的方式来显示代码，但我会留给您自己弄清楚其中的细节。
  • 要获得外部 css，您只需要迭代iframeDocument.styleSheets，并使用与上述类似的策略，尽管您可能需要牢记一些跨​​浏览器注意事项。
  • 对于外部 js，您可以以类似的方式找到它们。迭代iframeDocument.getElementsByTagName('script')并获取他们的内容Element.innerHTML
  • 您可以实施每次只更新部分而不是整个文档的策略，但这有点复杂。我建议您采取“更新整个文档”的路线，直到您对活动部件有更好的了解。
  • 语法高亮将非常有用，因此请考虑将您的代码放入“ Ace ”之类的代码编辑器中。

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

于 2016-06-03T14:30:58.890 回答