制作 javascript/html/css 编辑器答案

【问题标题】：make javascript/html/css editor制作 javascript/html/css 编辑器
【发布时间】：2014-02-17 07:41:54
【问题描述】：

我正在尝试制作一个 html/css/javascript 在线编辑器，所以我创建了一个 textarea 来编写代码并创建 Iframe 来显示它，所以这是 html：

 <textarea id="code"></textarea>

 <iframe id="output"></iframe>

 <button id="submit-b">submit</button>

这是jquery代码：

$("#submit-b").click(function(){
   code = $("#code").val();
   $('#output').contents().find('body').html(code);
});

它可以编辑 html 和 Css 而不是 JavaScript，我该怎么做？

【问题讨论】：

【解决方案1】：

解决方案是使用纯 JavaScript 代码：

function update() 
{
var w = document.getElementById("code").value;
document.getElementById('output').contentWindow.document.write(w);
}

因为 jquery 代码附加了没有 <html> 和 <body> 标记的 textarea 值

【讨论】：

【解决方案2】：

它对我有用：JSFiddle example。在 textarea 中输入类似这样的内容：

<script>alert('Boo!');</script>

您将拥有一个 Javascript 警报。

也就是说，为什么不使用现有的编辑器，例如 TinyMCE 或类似 JSFiddle 的东西，这取决于您的需要？

【讨论】：

【解决方案3】：

为什么不使用代码镜像？

以下是该框架如何实现的示例：

【讨论】：

我的第一个 JavaScript