如何创建JavaScript“;自己试试吧"编辑

How to create a JavaScript "Try It Yourself" Editor

本文关键字：自己 编辑 quot 何创建 创建 JavaScript      更新时间：2023-09-26

我知道有很多"Try It Yourself"JavaScript编辑器，如W3School的Try It编辑器、JSBin和JSFiddle。

我正在开发一个图形JavaScript库，我想让人们在我自己的网站上试用（与其他编辑器的一个区别是，我的输出将是画布，而不是HTML框架）。不想重新发明轮子，是否有现成的方法来创建"自己尝试"功能，以考虑基于DOM的脚本漏洞等问题？

一个简单的设计是一个包含三个textarea和一个iframe的form的起始页。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>

然后在服务器上处理提交，方法是将html/css/脚本保存到文件中，然后返回一个引用这些文件的页面，如下所示：

<!--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>

这根本不需要两个文件，实际上这可以很容易地完成：为了简单起见，我只创建一个文本区域，但如果你想创建3个文本区域并添加前缀，如<样式>或者<脚本>etc

<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>

你可以添加更多的css代码使其更漂亮，但这是我试图解释的基本版本。不需要担心安全性，因为这是完全安全的。

创建一个简单的html页面，首先使用textarea和iframe：

<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>

现在，用户编写的代码需要显示在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);
  }
 ?>

编写以下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";
 } ?>

现在，将所有代码组合在一起，您将获得一个简单的"自己尝试"编辑器。

相关文章：