如何创建一个HTML和CSS“自己试试”编辑器

-2

我知道有一些“尝试自己”的JavaScript编辑器，比如W3School的Try It编辑器，JSBin和JSFiddle。如何创建一个HTML和CSS“自己试试”编辑器

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

来源

2014-10-02 johnny Depp

你需要做的工作一个浏览器并不容易！ – deKajoo 2014-10-02 22:17:17

当你让人们提交代码时要小心......但是，只需使用JavaScript来加载任何动态（html，css）。这是一个非常开放的问题，有很多方法可以解决这个问题......你现在特别有什么问题？ – 2014-10-02 22:18:28

使用'echo $ _POST [“html”];'和php会将收到的HTML代码写入文档。 – 2014-10-02 22:20:18

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

来源

2014-10-02 22:36:27

它可能没有PHP做他/她想要的，所以我会避免这种做法 – Markasoftware 2014-10-02 22:40:19

@Markasoftware我会怎么做一个不同的方式？ – 2014-10-02 22:42:13

我要发表一个答案，但它已关闭......我会尝试编辑它然后可能重新打开它并发布答案 – Markasoftware 2014-10-02 22:42:47

如何创建一个HTML和CSS“自己试试”编辑器

回答

相关问题