Javascript “如何创建HTML和CSS”；你自己试试吧；编辑_Javascript_Html_Css

Javascript “如何创建HTML和CSS”；你自己试试吧；编辑

javascript html css

Javascript “如何创建HTML和CSS”；你自己试试吧；编辑,javascript,html,css,Javascript,Html,Css,我知道有很多“自己尝试”JavaScript编辑器，比如W3School的“尝试编辑器”、JSBin和JSFIDLE 我正在开发一个图形化的Html和CSS库，我想让人们在我自己的网站上试用（我希望能够像其他编辑器一样在同一页面上显示结果）。我在网上寻找了关于创建其中一个的帮助，但似乎找不到任何信息。我试着把一些东西拼凑起来，如果有人能看一下，我会很感激的。我真的想创建一个页面，其中有一个html框和另一个css框，然后有一个按钮来执行页面，然后在页面的右侧显示信息。这是我到目前为止的代码，希望

我知道有很多“自己尝试”JavaScript编辑器，比如W3School的“尝试编辑器”、JSBin和JSFIDLE

我正在开发一个图形化的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>


试试看

我这台计算机上没有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）：


text区域{宽度：400px；}
你好
正文{背景色：#ccc；}
$（文档）.ready（函数（）{
$（'#tryitform'）。提交（函数（e）{
e、 预防默认值（）；
$（'#htmlcontent'）.html（$（':input[name=html]'）.val（））；
$（'head'）.append（''+$（':input[name=css]'））.val（）+''；
}); 
});

你需要做的浏览器工作并不是那么简单！当你让别人提交代码时要小心。。。但是，只需使用javascript动态加载任何内容（html、css）。这是一个非常开放的问题，有很多方法可以解决。。。你现在在做什么特别有问题？使用

echo$\u POST[“html”]

和php会将收到的html代码写入文档中。你不需要php。你有没有见过仅158字节长的简约JS解决方案：？如果没有php，他/她可以做他/她想做的事情，所以我会避免这种情况approach@Markasoftware我该怎么做呢？我本来想发布一个答案，但它已经关闭了…我会尝试编辑它，然后可能会重新打开它并发布一个答案为什么关闭了？我做错了什么lol。我只是在寻求帮助。@johnnyDepp它可能因为你没有表现出任何研究成果而关闭了，像这样的问题通常会被看不起（关于“我如何做到这一点”的问题，而不是一个明确、具体的问题）。如果你编辑这个问题来展示你已经尝试了什么，以及到目前为止你对这个问题的了解，那么这个问题很可能会被重新打开

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