Cách tạo Trình chỉnh sửa JavaScript "Thử Chính mình"

Tôi biết có một số trình chỉnh sửa JavaScript "Thử Chính bạn", chẳng hạn như W3School's Try It editor, JSBin và JSFiddle.Cách tạo Trình chỉnh sửa JavaScript "Thử Chính mình"

Tôi đang phát triển một thư viện JavaScript đồ họa mà tôi muốn cho mọi người thử từ trang web của riêng tôi (một sự khác biệt so với các trình soạn thảo khác là đầu ra của tôi sẽ là canvas, không phải khung HTML). Không muốn phát minh lại bánh xe, có cách nào được thiết lập để tạo ra khả năng "Tự thử nghiệm" xem xét các vấn đề như lỗ hổng tập lệnh dựa trên DOM không?

Nguồn

2012-01-09 David Koelle

JSFiddle chỉ lấy HTML, CSS và JavaScript bạn cung cấp và tải nó vào iFrame. –

Tương tự như vậy, nó nói về các biên tập viên Try-It, nhưng không đến được _development_ của trình soạn thảo như vậy: http://stackoverflow.com/questions/2814453/javascript-online-try-it-editor, http: // stackoverflow.com/questions/2114160/how-to-create-a-online-javascript-editor –

Bạn đang lo lắng về những lỗ hổng nào? Về cơ bản nó không giống như người dùng có bảng điều khiển gỡ lỗi mở? (Mặc dù có thể tôi đã bỏ lỡ điều gì đó!) –

Thiết kế đơn giản sẽ là trang bắt đầu có số form chứa ba số textarea và iframe. Các textarea 's chứa html/css và các bộ phận javascript, và iframe chứa kết quả:

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

các trình sau đó được xử lý tại máy chủ bằng cách tiết kiệm html/css/script để nộp và sau đó quay trở lại một trang tham chiếu đến những tập tin này, một cái gì đó trong dòng:

<!--tryit-result.php--> 
<html> 
<head> 
    <style type='text/css'> 
     <?php echo file_get_contents('css contents')?> 
    </style> 
    <script type='text/javascript'> 
    $(function() { 
     <?php echo file_get_contents('js contents')?> 
    }); 
    </script> 
</head> 
<body> 
    <?php echo file_get_contents('html contents')?> 
</body> 
</html>

Nguồn

2012-01-11 13:36:48 eolsson

Có an toàn để sử dụng mã này không? Có thể người dùng nhập nội dung nào đó vào máy chủ bị lỗi! –

Tạo một trang html đơn giản với textarea và iframe đầu tiên:

<html> 
    <head> 
<script type="text/javascript"> 
function data_submit() 
{ 
document.form1.txt_data.value= document.form1.txt_html.value; 
} 
</script> 

    <title>Try It yourself Online Editor</title> 
</head> 
    <body> 
    <form name="form1" id="form1" method="post" action="" > 
<table width="100%" cellspacing="0" cellpadding="0" border="1"> 
    <tr > 

    <td> 
<input type="submit" name="bt_submit" value="Click to Execute " align="top" onClick="data_submit();"/> 
</td> 
     <td align="center">Output</td> 
    </tr> 
     <tr> 
     <td width="50%" > 
     <input type="text" name="txt_data" value="" style="visibility:hidden;" /> 

     <textarea rows="35" width="90px" height="550px" cols="77" name="txt_html"> 

    </textarea> 
      </td> 
     <td width="50%" style="border-width:10px;border-style:none;"> 
      <iframe height="550px" width="100%" src="try_it.php" name="iframe_a"></iframe> 
     </td> 
    </table> 
    </form> 
    </body> 
    </html>

Bây giờ c ode được viết bởi người dùng cần được hiển thị trong khung nội tuyến vì vậy chúng tôi cần lưu trữ mã trong tệp. Viết mã PHP để tạo một tập tin. sau đây là mã tạo một tập tin.

if(isset($_POST['bt_submit'])) 
{ 
$file = "try_it.php"; 
$fp = fopen($file, 'w'); 
//Following code will store the content in textarea in a variable which will create a file. 
$content = $_POST['txt_data']; 
fwrite($fp, $content); 
    fclose($fp); 
    } 
?>

Sau mã php được viết để hiển thị đầu ra mặc định và đầu ra thay đổi sau khi người dùng nhấp vào nút gửi.

<?php 


if(isset($_POST['bt_submit'])) 
{ 
echo trim($content); 
    } 
    else 
    { 
    echo "<html>\n"; 
echo "<body>\n"; 


echo "<h1>Hello World!!!</h1>\n"; 


echo "</body>\n"; 
echo "</html>\n"; 
} ?>

Bây giờ, hãy kết hợp tất cả mã và bạn sẽ tự mình thử trình chỉnh sửa đơn giản.

Nguồn

2012-07-06 10:46:43 Avson1023

Điều này không đòi hỏi 2 file ở tất cả Infact này có thể được thực hiện rất dễ dàng: Để đơn giản im chỉ cần tạo một textarea đơn nhưng bạn có thể tạo ra 3 textarea nếu bạn muốn và thêm tiền tố như < phong cách > hoặc < kịch bản > vv

<body> 
    <textarea id="code" oninput="putcode(this.value)"> 
    </textarea> 
    <iframe frameborder="0"></iframe> 
    <script> 
    var val; 
    function putcode(val){ 
     document.querySelector("iframe").srcdoc=val; 
    } 
    </script> 
</body>

Bạn có thể thêm mã css hơn nữa để làm cho nó đẹp hơn nhưng điều này là khá một phiên bản cơ bản của những gì im cố gắng để explain.and không cần phải lo lắng về an ninh như thế này là hoàn toàn an toàn.

Nguồn

2016-06-19 08:12:23

Nếu bạn đang nhập nội dung nào đó trong văn bản "mã", điều này có tải JavaScript không đúng vào khung nội tuyến - và đó có phải là sự cố không? –

Bạn ngụ ý gì bởi javascript không chính xác? Bất kỳ điều gì bạn viết trong vùng văn bản sẽ hiển thị trong khung nội tuyến và được coi là một trang hoàn toàn khác .. –

Cách tạo Trình chỉnh sửa JavaScript "Thử Chính mình"

Trả lời

Các vấn đề liên quan