如何使用 Javascript 创建基本的 HTML/CSS 编辑器？答案

【问题标题】：How can I create a basic HTML/CSS editor with Javascript?如何使用 Javascript 创建基本的 HTML/CSS 编辑器？
【发布时间】：2018-10-03 06:35:05
【问题描述】：

如何使用 Javascript 创建基本的 HTML/CSS 编辑器？我有下面的代码，当我按下按钮时，HTML 和 CSS 部分的代码应该在元素中显示格式。

<html>
<head>
    <style>
        textarea {
            width: 45%;
            height: 200px;
            background: #eee;
            margin: 0 2%;
        }
        #content {
            margin: 0 20px;
            border: 1px solid #aaa;
            min-height: 200px
        }
        h1 {
            text-align: center;
            font-size: 20px
        }
        h2 {
            font-size: 18px
        }
    </style>
</head>
<body>
    <h1>A basic HTML / CSS editor</h1>
    <textarea id="html-code" placeholder="Insert HTML here"></textarea>
    <textarea id="css-code" placeholder="Insert CSS here"></textarea>
    <button  onclick="editor()">Apply HTML and CSS</button>
    <h2>Result</h2>
    <div id="content">
       
    </div>
  
</body>
</html>

【问题讨论】：

您是否希望将代码保存到您的计算机并进行更新？还是您希望它在浏览器中运行？喜欢 SO 代码 sn-ps？
在浏览器中。
那么我唯一能想到的就是将它链接到节点服务器，以便您可以覆盖文件

标签： javascript

【解决方案1】：

使用iframe 显示内容 HTML 和 CSS。

您可以从 HTML 和 CSS 文本字段创建 HTML 代码。

然后使用解决方案：

How to set HTML content into an iframe

Html code as IFRAME source rather than a URL

在 iframe 中显示。

【讨论】：

我可以知道为什么投反对票吗？这样我就可以纠正自己了。
我没有投反对票，但我想这是因为当您提供链接时，您应该对它们的内容有一个摘要，以便何时（不是如果；这就是今天的网络）他们腐烂了，有人仍然会发现这个答案很有用。如果该解决方案不适合答案，则意味着问题太宽泛了。编辑：我看到这些链接指向 SO，但我认为这一点是正确的。