Question

我知道有很多“自己动手”的JavaScript编辑器，比如W3School的Try It编辑器，JSBin和JSFiddle。

我正在开发一个图形化的Html和CSS库，我想让人们从我自己的网站上试用（我希望能够像其他编辑一样在同一页面上显示结果）。我在网上寻求创建其中一个的帮助，我似乎无法找到任何信息。我试图拼凑一些东西，所以如果有人可以看一下，那将是值得赞赏的。我真的想创建一个页面，其中包含一个用于html的框和另一个用于css的框，然后有一个执行页面的按钮，然后在页面的右侧显示信息。这是我到目前为止的代码，希望有人可以帮助我。提前谢谢。

<!DOCTYPE html>
<html>
<form method="post" action="tryit.php" target="result">
<button>Try it</button>
<table>
<tr>
    <td><textarea name="html"></textarea></td>
    <td><textarea name="css"></textarea></td>
</tr>
<tr>

    <td><iframe name="result"></iframe></td>
</tr>
<head>
<style type='text/css'>
    <?php echo $_POST["html"]; ?>
    <?php echo file_get_contents('css contents')?>
</style>
</script>
 </head>
<body>
<?php echo file_get_contents('html contents')?>
</form>
</body>
</html>

Answer 1

我在这台计算机上没有PHP，所以我无法测试任何东西......但是这可以给你基本的想法。自从我接触PHP以来已经有一年了...可能存在语法错误。抱歉。 HTML也不是我最好的语言。

注意：我写这个就像是提交给自己......有点儿。

<html>
   <body>
      <?php if (!isset($_POST['html']) or empty($_POST['html'])) { ?>
               <form method="post" action="tryit.php">
                  <table>
                     <tr><td><textarea name="html"></textarea></td></tr>
                  </table>
                  <input type="submit" value="Try It">
               </form>
      <?php } 
      else  { echo $_POST['html']; } ?>
   </body>
</html>

我更喜欢这个（注意：它确实使用jquery ...我只能在你真正想要的时候提供js）：

<html>
   <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <style> textarea { width: 400px; } </style>
   </head>
   <body> 
      <form id='tryitform' method="post" action="tryit.php">
         <table>
            <tr><td><textarea name="html"><b>hello!</b></textarea></td></tr>

            <!-- tr><td><textarea name="html"><script>window.location = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";</script></textarea></td></tr -->

            <tr><td><textarea name="css">body { background-color: #ccc; }</textarea></td></tr>
         </table>
         <input type="submit" value="Try It">
      </form> 
      <div id='htmlcontent'></div>
   </body>
</html>

<script> 
$(document).ready(function(){ 
   $('#tryitform').submit(function(e){
      e.preventDefault(); 
      $('#htmlcontent').html( $(':input[name=html]').val() );
      $('head').append( '<style>' + $(':input[name=css]').val() + '</style>' ); 
   }); 
}); 
</script>

如何创建HTML和CSS“自己动手”编辑器

1 个答案: