如何创建 HTML 和 CSS“自己尝试”编辑器 [关闭]答案

【问题标题】：How to create a HTML and CSS "Try it yourself" Editor [closed]如何创建 HTML 和 CSS“自己尝试”编辑器 [关闭]
【发布时间】：2014-10-02 22:14:22
【问题描述】：

我知道有许多“自己尝试”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>

【问题讨论】：

你需要做一个不那么容易的浏览器工作！
让人们提交代码时要小心...但是，只需使用 javascript 动态加载任何内容（html、css）。这是一个非常开放式的问题，有很多方法可以解决...您现在具体有什么问题？
使用echo $_POST["html"];，php会将接收到的html代码写入到文档中。
这个不需要php
你见过只有 158 字节长的极简 JS-only 解决方案吗：xem.github.io/miniCodeEditor？

标签： javascript html css

【解决方案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>

【讨论】：

没有 php 也可以做他/她想做的事，所以我会避免这种做法
@Markasoftware 我该怎么做？
我要发布答案，但它已关闭...我会尝试编辑它然后重新打开它并发布答案
为什么关闭？我做错了什么哈哈。我只是在寻求帮助。
@johnnyDepp 它可能已关闭，因为您没有展示任何研究成果，并且此类问题通常被忽视（关于“我如何做到这一点”的问题，而不是一个明确的具体问题） .如果您编辑问题以显示您已经尝试过的内容以及到目前为止您对此的了解，则有可能（尽管很小）这将被重新打开