-
Notifications
You must be signed in to change notification settings - Fork 19
/
Copy pathindex.html
145 lines (115 loc) · 6.46 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>PHP Online Editor</title>
<link rel="stylesheet" id="font-awesome" href="libs/font-awesome.min.css" type="text/css" media="all" />
<script src="libs/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="css/php-einfach-online-php-editor.css" type="text/css" media="all" />
<style>
body {
font-family: Arial;
}
a {
text-decoration: none;
color: #20477a;
}
.ace_editor {
font-size: 14px !important;
}
</style>
</head>
<body>
<p><h1>PHP-Einfach.de Online PHP Editor</h1>
<a href="http://www.php-einfach.de/interaktiver-editor/" target="_blank">PHP-Einfach.de</a> / <a href="https://github.com/PHP-Einfach/online-php-editor" target="_blank">Github</a> </p>
<p>
This is an editor that allows the direct exection of PHP code. The code is send to our servers and is executed there. To avoid misusage, some PHP functions are disabled.
</p>
<p>
This code is provided under the GPL version 3. Feel free to change the code as you like. If you like this code, we would be happy if you could link to our website <a href="http://www.php-einfach.de" target="_blank">www.php-einfach.de</a>.
</p>
<p>
The code comes with no warranty. Please not that if you execute the PHP code on our servers, there is a potential security risks. If our server gets compromised, an attacker could inject harmful JavaScript code in the response, which would be execute in the browser of the vistor.
We took several steps to make our servers as secure as possible, but again, we cannot provide any warranty.
</p>
<h2>Normal Editor</h2>
<p>This is the defaul editor. Each editor must have the data attribute <em>data-ace-editor-id</em> with a unique id. This id
muss also appear in the the <em>id</em> attribute for the <div> and the <pre> tags.
</p>
<div class="code" id="code_1" data-ace-editor-id="1"
data-ace-editor-allow-execution="true" data-ace-editor-hide-vars="false"
data-ace-editor-script-name="page.php" data-ace-editor-default-get="" data-ace-editor-default-post="">
<pre class="editor" id="code_editor_1" ><?php
echo "Hi and welcome for our Online PHP Editor. The current time is: ".date("H:i:s")." <br />";
echo "Press the button below to execute the code";
?></pre></div>
<h2>Editor without $_GET / $_POST parameters</h2>
<p>By setting the <em>data-ace-editor-hide-vars</em> attribue to true, you can hide the control fields for the $_GET and the $_POST variables.</p>
<div class="code" id="code_2" data-ace-editor-id="2"
data-ace-editor-allow-execution="true" data-ace-editor-hide-vars="true">
<pre class="editor" id="code_editor_2" ><?php
echo "Hi and welcome for our Online PHP Editor. The current time is: ".date("H:i:s")." <br />";
echo "Press the button below to execute the code";
?></pre></div>
<h2>Editor with predefined $_GET / $_POST parameters</h2>
<p>By setting the <em>data-ace-editor-hide-vars</em> attribue to true, you can hide the control fields for the $_GET and the $_POST variables.</p>
<div class="code" id="code_3" data-ace-editor-id="3"
data-ace-editor-allow-execution="true" data-ace-editor-hide-vars="false"
data-ace-editor-script-name="getpost.php" data-ace-editor-default-get="variable1=value1&variable2=value2" data-ace-editor-default-post='"var1":"value1","var2":"value2"'>
<pre class="editor" id="code_editor_3" ><?php
echo "Hi and welcome for our Online PHP Editor. The current time is: ".date("H:i:s")." <br />";
echo "Press the button below to execute the code";
?></pre></div>
<h2>Using the editor on your website</h2>
<p>
The following dependencies are needed to run this editor on your own site. All dependencies are already included in this download.</p>
<ul>
<li><a href="https://jquery.com/">jQuery</a></li>
<li><a href="https://fortawesome.github.io/Font-Awesome/">Font Awesome</a></li>
<li><a href="https://github.com/eligrey/FileSaver.js/">FileSaver.js</a></li>
<li><a href="https://ace.c9.io/#nav=about">Ace Webeditor</a></li>
</ul>
<p>
Include the following code into your website:
<pre style="border: 1px solid #ccc; border-radius:3px; background-color:#f3f3f3; padding: 10px;">
<!-- Include the dependencies -->
<link rel="stylesheet" id="font-awesome" href="libs/font-awesome.min.css" type="text/css" />
<script type="text/javascript" src="libs/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="libs/ace/ace.js"></script>
<script type="text/javascript" src="libs/FileSaver.js"></script>
<!-- Include the script and css for the online php editor -->
<link rel="stylesheet" href="css/php-einfach-online-php-editor.css" type="text/css" />
<script type="text/javascript" src="js/php-einfach-online-php-editor.js"></script>
<!-- Include this code snippet where ever you like to have it in your site -->
<div class="code" id="code_1" data-ace-editor-id="1"
data-ace-editor-allow-execution="true" data-ace-editor-hide-vars="false"
data-ace-editor-script-name="page.php" data-ace-editor-default-get="" data-ace-editor-default-post="">
<pre class="editor" id="code_editor_1" > &lt;?php
echo "Hi and welcome for our Online PHP Editor. The current time is: ".date("H:i:s")." <br />";
echo "Press the button below to execute the code";
?&gt; </pre></div>
<!-- Call this script to transform your HTML code to actual editors -->
<script>
jQuery('div[data-ace-editor-id]').each(function() {
var url='http://execute.php-einfach.de:9999/execute.php';
var language = 'en'; //Choose 'de' for German
new OnlinePHPEditor(this, language, url);
});
</script>
</pre>
In order that the PHP-Code can be execute in this editor, you need a server backend. You can either use our backend at <em>http://execute.php-einfach.de:9999/execute.php</em> (without warranty) or setup your own server backend.
</p>
<script type='text/javascript' src='libs/ace/ace.js'></script>
<script type='text/javascript' src='libs/FileSaver.js'></script>
<script type='text/javascript' src='js/php-einfach-online-php-editor.js'></script>
<script>
jQuery('div[data-ace-editor-id]').each(function() {
var url='http://execute.php-einfach.de:9999/execute.php';
//var url='proxy.php'; // In case the browser supports cross domain requests, you can use this proxy script to forward the requests over your own server
var language = 'en'; //Choose 'de' for German
new OnlinePHPEditor(this, language, url);
});
</script>
</body>
</html>