预览由 textarea 输入的完整 HTML 页面

编程问答 2022-04-28

问题描述

我正在创建一个模板应用程序，用户可以在其中在 textarea 中编写任何 HTML/CSS 代码（例如粘贴在 textarea 上的完整 html 页面）。这些用户大多熟悉 html 和 css，所以我们还没有实现 Markdown。我们要添加的一项重要功能是能够在提交之前预览 textarea 中的 html。我已经想到了可以完成这些操作的方法，但我不确定哪种方法是正确且最易于维护的。

  • 在同一页面的 div 中预览 html - 我在这里看到的问题是现有的 CSS 样式可能会干扰用户在 textarea 中键入的 CSS 样式。此外，如果用户在 textarea 中写入 body 标签，那么在实际页面的现有 body 标签中还会有另一个 body 标签，因此 html 可能会出现格式错误。
  • 在单独的窗口上预览 html - 问题是我对此没有太多控制（例如，如果用户使用弹出窗口阻止程序）
  • 在单独的选项卡上预览 html - 问题是用户可能会感到困惑（例如，关闭整个浏览器，认为它在新窗口中打开）
  • 在 iframe 上预览 html - 这是可行的，但需要我创建一个额外的 .html 文件仅用于预览
  • 在模态上预览 html - 这是可行的，但我不确定模态主体是否接受诸如标题或正文之类的顶级标签

谁能帮帮我？这些潜在的解决方案中哪一个是最好的？或者有更好的解决方案吗？

解决方法

你调查过 iframe 的 srcdoc 属性吗？它允许您拥有一个完整文档的字符串，而无需创建单独的文件。当然，您必须进行一些转义或其他操作来处理引号。

这是一个简单的例子：

file1.csv

fname.   age.  place 

Andy     16    a
kate.    15.   k
brian.   17.   b

file2.csv

fname.   age.  place

brian.  17.   c
kate.   15.   k
andy.   16.   a
laura.  18.   l

output file3.csv should be like
Andy.   a.   true
Kate.   k.   true
brian.  b.   false
,

我会使用 iframe。它可以在其中运行一个新的 body 和 html。因此，例如，如果有人为其中的正文设置样式，则不会影响其所在的页面。在这里，我为您编写了代码。试一试，在文本区域做一些 html 编码，然后点击“运行”

<p>type some HTML/CSS code in here:</p>
<textarea type="text" rows="15" cols="40"id="myText"></textarea>

<p>Your HTML output</p>
<iframe id="output" srcdoc="">
</iframe>

<p>Click the button to preview your code</p>

<button onclick="myFunction()">run</button>

<script>
function myFunction() {
  var x = document.getElementById("myText").value;
  document.getElementById("output").srcdoc  = "<!doctype html> <html>" + x + "</html>";
}
</script>

,

看看https://codemirror.net/

它是开源的，将为您提供开箱即用的完整 CodeEditor。

如果不是：

如果你想在 textarea 中显示 HTML 标记，你应该转义所有 '' 字符。

browserbrowserhtmlpreviewpreview