Menu
I know there are a number of "Try It Yourself" JavaScript editors, such as W3School's Try It editor, JSBin, and JSFiddle.
I'm developing a graphical JavaScript library that I'd like to let people try out from my own site (one difference from other editors is that my output would be to a canvas, not an HTML frame). Not wanting to reinvent the wheel, are there established ways for creating a "Try It Yourself" capability that consider issues like DOM-based scripting vulnerabilities?
680
The idea behind a try it yourself editor is more simpler than your thought. We just create a button, textarea and a iframe on the page and on click event of the button, load the content of textarea to iframe using JavaScript and all is done! So simple, let's do it…
If you are a beginner and want to go for a simple approach for writing JavaScript programs, use a simple text editor like Notepad++. It is free, open-source, and will work fine for JavaScript development. Notepad++ is a general-purpose editor that supports highlights the syntax of JavaScript and HTML code.
Microsoft Visual Studio Code is the most widely used and popular IDE. It is Microsoft developed and includes tools and extensions for various computer languages such as C #, C ++, Python, PHP, etc. JavaScript, TypeScript, NodeJS, and many more.
A simple design would be a start page with a form containing three textarea's and one iframe. The textarea's contain the html/css and javascript parts, and the iframe contains the result:
<!--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>
The submit is then handled at the server by saving the html/css/scripts to file and then returning a page that references these files, something in the line of:
<!--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>
This doesnt require 2 files at all infact this can be done very easily: For simplicity im just creating a single textarea but you can create 3 textarea if you want to and add prefixes such as <style> or <script> etc
<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>
You can add further css code to make it prettier but this is quite a basic version of what im trying to explain.and there is no need to worry about security as this is perfectly secure.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With