如何创建一个 JavaScript “自己尝试”编辑器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8794998/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a JavaScript "Try It Yourself" Editor
提问by David Koelle
I know there are a number of "Try It Yourself" JavaScript editors, such as W3School's Try It editor, JSBin, and JSFiddle.
我知道有许多“自己尝试”的 JavaScript 编辑器，例如W3School 的 Try It 编辑器、JSBin和JSFiddle。
I'm developing a graphical JavaScript library that I'd like to let people try out from my own site (one difference from other editors is that my output would be to a canvas, not an HTML frame). Not wanting to reinvent the wheel, are there established ways for creating a "Try It Yourself" capability that consider issues like DOM-based scripting vulnerabilities?
我正在开发一个图形 JavaScript 库，我想让人们在我自己的网站上试用它（与其他编辑器的一个不同之处在于我的输出将是画布，而不是 HTML 框架）。不想重新发明轮子，是否有既定的方法来创建考虑基于 DOM 的脚本漏洞等问题的“自己尝试”功能？
采纳答案by eolsson
A simple design would be a start page with a formcontaining three textarea's and one iframe. The textarea's contain the html/css and javascript parts, and the iframecontains the result:
一个简单的设计是一个form包含三个textarea和一个的起始页iframe。该textarea的包含HTML / CSS和JavaScript的部分，并将iframe包含的结果：
<!--index.html-->
<html>
<form method="post" action="tryit-result.php" target="result">
<button>Try it</button>
<table>
<tr>
<td><textarea name="html"></textarea></td>
<td><textarea name="css"></textarea></td>
</tr>
<tr>
<td><textarea name="js"></textarea></td>
<td><iframe src="tryit-result.php" name="result"></iframe></td>
</tr>
</table>
</form>
</html>
The submit is then handled at the server by saving the html/css/scripts to file and then returning a page that references these files, something in the line of:
然后通过将 html/css/scripts 保存到文件并返回引用这些文件的页面，在服务器上处理提交，内容如下：
<!--tryit-result.php-->
<html>
<head>
<style type='text/css'>
<?php echo file_get_contents('css contents')?>
</style>
<script type='text/javascript'>
$(function() {
<?php echo file_get_contents('js contents')?>
});
</script>
</head>
<body>
<?php echo file_get_contents('html contents')?>
</body>
</html>
回答by Avson1023
Create a simple html page with textarea and iframe first :
首先使用 textarea 和 iframe 创建一个简单的 html 页面：
<html>
<head>
<script type="text/javascript">
function data_submit()
{
document.form1.txt_data.value= document.form1.txt_html.value;
}
</script>
<title>Try It yourself Online Editor</title>
</head>
<body>
<form name="form1" id="form1" method="post" action="" >
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<tr >
<td>
<input type="submit" name="bt_submit" value="Click to Execute " align="top" onClick="data_submit();"/>
</td>
<td align="center">Output</td>
</tr>
<tr>
<td width="50%" >
<input type="text" name="txt_data" value="" style="visibility:hidden;" />
<textarea rows="35" width="90px" height="550px" cols="77" name="txt_html">
</textarea>
</td>
<td width="50%" style="border-width:10px;border-style:none;">
<iframe height="550px" width="100%" src="try_it.php" name="iframe_a"></iframe>
</td>
</table>
</form>
</body>
</html>
Now code written by the user need to be displayed in the iframe so we need to store the code in a file. Write PHP code to create a file. following is the code create a file.
现在用户编写的代码需要显示在 iframe 中，因此我们需要将代码存储在文件中。编写 PHP 代码以创建文件。以下是创建文件的代码。
if(isset($_POST['bt_submit']))
{
$file = "try_it.php";
$fp = fopen($file, 'w');
//Following code will store the content in textarea in a variable which will create a file.
$content = $_POST['txt_data'];
fwrite($fp, $content);
fclose($fp);
}
?>
Following php code is written to display a default output and changed output after submit button is clicked by the user.
编写以下 php 代码以在用户单击提交按钮后显示默认输出和更改的输出。
<?php
if(isset($_POST['bt_submit']))
{
echo trim($content);
}
else
{
echo "<html>\n";
echo "<body>\n";
echo "<h1>Hello World!!!</h1>\n";
echo "</body>\n";
echo "</html>\n";
} ?>
Now combine all the code and you will get a simple try it yourself editor.
现在结合所有代码，您将获得一个简单的自己尝试编辑器。
回答by Shrikanth Buds
This doesnt require 2 files at all infact this can be done very easily: For simplicity im just creating a single textarea but you can create 3 textarea if you want to and add prefixes such as <style> or <script> etc
这根本不需要 2 个文件，事实上这可以很容易地完成：为简单起见，我只是创建一个文本区域，但如果您愿意，可以创建 3 个文本区域并添加前缀，例如 <style> 或 <script> 等
<body>
<textarea id="code" oninput="putcode(this.value)">
</textarea>
<iframe frameborder="0"></iframe>
<script>
var val;
function putcode(val){
document.querySelector("iframe").srcdoc=val;
}
</script>
</body>
You can add further css code to make it prettier but this is quite a basic version of what im trying to explain.and there is no need to worry about security as this is perfectly secure.
您可以添加更多 css 代码以使其更漂亮，但这是我试图解释的内容的基本版本。并且无需担心安全性，因为这是完全安全的。
