如何创建JavaScript“自己动手”编辑 [英] How to create a JavaScript "Try It Yourself" Editor
问题描述
我知道有很多自己动手的JavaScript编辑器，例如 W3School的Try It编辑器， JSBin 和 JSFiddle 。
I know there are a number of "Try It Yourself" JavaScript editors, such as W3School's Try It editor, JSBin, and JSFiddle.
我正在开发一个图形化的JavaScript库，我想让人们从我自己的网站上试用（一个与其他编辑器的区别在于我的输出是画布，而不是HTML框架。不想重新发明轮子，是否已经建立了创建自己动手功能的方法，可以考虑基于DOM的脚本漏洞等问题？
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?
推荐答案
一个简单的设计是一个带有表单的起始页面，其中包含三个 textarea 和一个的iframe 。 textarea 包含html / css和javascript部分， iframe 包含结果：
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>
然后通过将html / css / scripts保存到文件然后返回来在服务器处理提交一个引用这些文件的页面，其中包含以下内容：
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>
这篇关于如何创建JavaScript“自己动手”编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
