如何創建一個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「自己試試」編輯器

回答

相關問題