如何创建JavaScript“;自己试试吧"编辑
How to create a JavaScript "Try It Yourself" Editor
我知道有很多"Try It Yourself"JavaScript编辑器,如W3School的Try It编辑器、JSBin和JSFiddle。
我正在开发一个图形JavaScript库,我想让人们在我自己的网站上试用(与其他编辑器的一个区别是,我的输出将是画布,而不是HTML框架)。不想重新发明轮子,是否有现成的方法来创建"自己尝试"功能,以考虑基于DOM的脚本漏洞等问题?
一个简单的设计是一个包含三个textarea
和一个iframe
的form
的起始页。textarea
包含html/css和javascript部分,iframe
包含结果:
<!--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/脚本保存到文件中,然后返回一个引用这些文件的页面,如下所示:
<!--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>
这根本不需要两个文件,实际上这可以很容易地完成:为了简单起见,我只创建一个文本区域,但如果你想创建3个文本区域并添加前缀,如<样式>或者<脚本>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>
你可以添加更多的css代码使其更漂亮,但这是我试图解释的基本版本。不需要担心安全性,因为这是完全安全的。
创建一个简单的html页面,首先使用textarea和iframe:
<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>
现在,用户编写的代码需要显示在iframe中,因此我们需要将代码存储在一个文件中。编写PHP代码来创建一个文件。以下是创建文件的代码。
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);
}
?>
编写以下php代码以显示默认输出,并在用户单击提交按钮后更改输出。
<?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";
} ?>
现在,将所有代码组合在一起,您将获得一个简单的"自己尝试"编辑器。
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 高亮显示时编辑文本大小和颜色
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 如何通过自己获得Chrome扩展的用户反馈/错误报告
- 将事件聚焦/模糊在可编辑内容的元素上
- 按我自己的类克隆另一个元素的内容和顺序
- 编辑HTML表的源数据
- ExtJS网格单元格编辑器,防止焦点松动问题
- 如何在visualstudio中调试web api时编辑javascript文件
- 如何配置分析以将数据发送到我自己的服务器
- 具有所有样式的文本正在复制到可编辑文本区域
- 如何使用我自己的所见即所得编辑器插入图像
- 在您自己的服务器上编辑上传
- 如何创建HTML和CSS“;自己试试吧"编辑
- 如何创建JavaScript“;自己试试吧"编辑
- 这是可能的编写自己的热键内容可编辑的HTML Jquery
- 如何使用JIRA AUI功能在我自己的自定义领域-速度编辑
- 编辑框:禁用用户格式,但添加我自己的
- 我怎么借PyroCMS'WYSIWYG编辑器的一个我自己的模块