|
809
by William Grant
Merge killall-editarea branch. We now use CodePress instead, which is |
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
2 |
||
3 |
<html> |
|
4 |
<head> |
|
5 |
<title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title> |
|
6 |
||
7 |
<style> |
|
8 |
body {color:#000;background-color:white;font:15px georgia, "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; letter-spacing:0.01em;margin:15px;} |
|
9 |
p {margin:0 0 15px 0;} |
|
10 |
a,a:visited {color:#7f0055;} |
|
11 |
select {background:#ffffe1;} |
|
12 |
button {margin-top:5px;} |
|
13 |
button.actions {width:171px;font-family:arial;} |
|
14 |
h1 {color:#7f0055;margin:0;padding:0;font-size:42px;font-weight:normal;} |
|
15 |
h1 a {text-decoration:none;} |
|
16 |
h2 {margin:0;} |
|
17 |
h2 a {text-decoration:none;font-weight:normal;font-size:22px;color:black !important;} |
|
18 |
h3 {font-size:20px;font-weight:normal;padding:0;margin:25px 0 5px 0;color:#7f0055;font-weight:bold;border-bottom:2px dotted #d8d8d8;} |
|
19 |
h4 {font-size:18px;font-weight:normal;z-index:0;} |
|
20 |
code {color:#0080c0;font-size:13px;font-weight:bold;} |
|
21 |
ol, ul {padding:5px 0 5px 25px;margin:0;} |
|
22 |
ol li, ul li {margin:8px 0 8px 0;} |
|
23 |
||
24 |
#logo {text-align:center;background-color:#d6d6d6;padding:10px;-moz-border-radius:5px;border:1px solid silver;} |
|
25 |
#container {width:700px;margin:20px auto;padding:25px;border:3px solid #d9d9d9;-moz-border-radius:10px;background:#f8f8f8;} |
|
26 |
#languages {margin:5px 0;} |
|
27 |
||
28 |
#menu {width:100%;background:#7f0055;-moz-border-radius:4px;} |
|
29 |
#menu a {font:bold 17px georgia;color:white;padding:4px;display:block;border-left:1px solid white;text-align:center;text-decoration:none;} |
|
30 |
#menu a:hover {background:#b9669e;} |
|
31 |
||
32 |
.hidden-code {display:none;} |
|
33 |
.copycode {border:1px dotted gray;padding:10px;background:white;font-family:monospace;color:gray} |
|
34 |
</style> |
|
35 |
||
36 |
</head> |
|
37 |
||
38 |
<body> |
|
39 |
<div id="container"> |
|
40 |
||
41 |
<div id="logo"> |
|
42 |
<h1><a href="http://codepress.org/">CodePress</a></h1> |
|
43 |
<h2><a href="http://codepress.org/">Online Real Time Syntax Highlighting Editor</a></h2> |
|
44 |
</div> |
|
45 |
||
46 |
<br /> |
|
47 |
||
48 |
<table cellpadding="0" cellspacing="0" id="menu"> |
|
49 |
<tr> |
|
50 |
<td> |
|
51 |
<a href="http://www.codepress.org/index.php">Home/Download</a> |
|
52 |
</td> |
|
53 |
<td> |
|
54 |
<a href="http://www.codepress.org/install.php"> Install </a> |
|
55 |
</td> |
|
56 |
<td> |
|
57 |
<a href="http://www.codepress.org/to-do.php"> To-do </a> |
|
58 |
</td> |
|
59 |
<td> |
|
60 |
<a href="http://www.codepress.org/about.php" id="about"> About </a> |
|
61 |
</td> |
|
62 |
</tr> |
|
63 |
</table> |
|
64 |
||
65 |
<h4> |
|
66 |
CodePress is web-based source code editor with syntax highlighting written in JavaScript that colors text in real time while it's being typed in the browser. |
|
67 |
</h4> |
|
68 |
||
69 |
<p> |
|
70 |
Go to <strong><a href="http://codepress.org/">http://codepress.org/</a></strong> for updates. |
|
71 |
</p> |
|
72 |
||
73 |
<h3>Demo</h3> |
|
74 |
<div id="languages"> |
|
75 |
<em>choose example in:</em> |
|
76 |
<button onclick="cp1.edit('cp-php','php')">PHP</button> |
|
77 |
<button onclick="cp1.edit('cp-javascript','javascript')">JavaScript</button> |
|
78 |
<button onclick="cp1.edit('cp-java','java')">Java</button> |
|
79 |
<button onclick="cp1.edit('cp-perl','perl')">Perl</button> |
|
80 |
<button onclick="cp1.edit('cp-sql','sql')">SQL</button> |
|
81 |
<button onclick="cp1.edit('cp-html','html')">HTML</button> |
|
82 |
<button onclick="cp1.edit('cp-css','css')">CSS</button> |
|
83 |
</div> |
|
84 |
||
85 |
<textarea id="cp1" class="codepress php" style="width:700px;height:300px;" wrap="off"> |
|
86 |
<?php
|
|
87 |
// Very simple implementation of server side script
|
|
88 |
||
89 |
if(isset($_GET['file'])) {
|
|
90 |
$file = basename($_GET['file']);
|
|
91 |
$full_file = $path['server'].'/'.$path['webdocs'].'/'.$path['files']."/".$file;
|
|
92 |
if(file_exists($full_file)) {
|
|
93 |
$code = file_get_contents($full_file);
|
|
94 |
$code = preg_replace("/>/","&gt;",$code);
|
|
95 |
$code = preg_replace("/</","&lt;",$code);
|
|
96 |
$language = getLanguage($file);
|
|
97 |
}
|
|
98 |
}
|
|
99 |
?>
|
|
100 |
||
101 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
102 |
<html> |
|
103 |
<head> |
|
104 |
<title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title> |
|
105 |
<link type="text/css" href="languages/codepress-<?=$language?>.css" rel="stylesheet" id="cp-lang-style" /> |
|
106 |
<script type="text/javascript" src="codepress.js"></script> |
|
107 |
<script type="text/javascript"> |
|
108 |
CodePress.language = '<?=$language?>'; |
|
109 |
</script> |
|
110 |
</head> |
|
111 |
<body id="ffedt"><pre id="ieedt"><?=$code?></pre></body> |
|
112 |
</html> |
|
113 |
</textarea> |
|
114 |
||
115 |
<br /><br /> |
|
116 |
||
117 |
<textarea id="codepress2" class="codepress javascript linenumbers-off" style="width:700px;height:200px;" wrap="off"> |
|
118 |
//set language |
|
119 |
this.setLanguage = function() {
|
|
120 |
if(arguments[0]) {
|
|
121 |
language = (typeof(Content.languages[arguments[0]])!='undefined') ? arguments[0] : this.setLanguage(); |
|
122 |
cpLanguage.innerHTML = Content.languages[language].name; |
|
123 |
if(cpBody.document.designMode=='on') cpBody.document.designMode = 'off'; |
|
124 |
CodePress.loadScript(cpBody.document, '../languages/'+language+'.js', function () { cpBody.CodePress.syntaxHighlight('init'); })
|
|
125 |
cpBody.document.getElementById('cp-lang-style').href = '../languages/'+language+'.css';
|
|
126 |
this.hideMenu(); |
|
127 |
} |
|
128 |
else {
|
|
129 |
var extension = filename.replace(/.*\.([^\.]+)$/,'$1'); |
|
130 |
var aux = false; |
|
131 |
for(lang in Content.languages) {
|
|
132 |
extensions = ','+Content.languages[lang].extensions+','; |
|
133 |
if(extensions.match(','+extension+',')) aux = lang;
|
|
134 |
} |
|
135 |
language = (aux) ? aux : 'generic'; |
|
136 |
} |
|
137 |
} |
|
138 |
</textarea> |
|
139 |
||
140 |
<p> |
|
141 |
<button class="actions" onclick="alert(codepress2.getCode())">get code from editor</button> |
|
142 |
<button class="actions" onclick="codepress2.toggleEditor()">turn on/off CodePress</button> |
|
143 |
<button class="actions" onclick="codepress2.toggleLineNumbers()">show/hide line numbers</button> |
|
144 |
<button class="actions" onclick="codepress2.toggleAutoComplete()">turn on/off auto-complete</button> |
|
145 |
<button class="actions" onclick="codepress2.toggleReadOnly()">turn on/off read only</button> |
|
146 |
</p> |
|
147 |
||
148 |
||
149 |
||
150 |
<h3>Installation</h3> |
|
151 |
<ol> |
|
152 |
<li> |
|
153 |
<p> |
|
154 |
<a href="http://codepress.org/">Download</a> and uncompress CodePress under a directory inside your webserver.<br> |
|
155 |
Example:<strong> http://yourserver/codepress/</strong><br /> |
|
156 |
Since CodePress is pure JavaScript and HTML, you can also test it without a webserver. |
|
157 |
</p> |
|
158 |
</li> |
|
159 |
<li> |
|
160 |
<p> |
|
161 |
Insert CodePress script somewhere in your page inside the <code><head></code> or above the <code></body></code> tag. |
|
162 |
</p> |
|
163 |
||
164 |
<p class="copycode"> |
|
165 |
<script src="/codepress/codepress.js" type="text/javascript"></script> |
|
166 |
</p> |
|
167 |
</li> |
|
168 |
||
169 |
<li> |
|
170 |
<p> |
|
171 |
Add the <code><textarea></code> tag to the place on your page you want CodePress to appear. CodePress will inherit the width and height of your textarea. |
|
172 |
When the page loads, it will automatically replace your textarea with a CodePress window. |
|
173 |
</p> |
|
174 |
<p class="copycode"> |
|
175 |
<textarea id="myCpWindow" class="codepress javascript linenumbers-off"><br /> |
|
176 |
// your code here<br /> |
|
177 |
</textarea> |
|
178 |
</p> |
|
179 |
<ul> |
|
180 |
<li> |
|
181 |
The <code>javascript</code> portion of the class="" means that the language being edited is JavaScript. |
|
182 |
</li> |
|
183 |
<li> |
|
184 |
The <code>codepress</code> portion of the class="" is mandatory and indicates a textarea to be replaced for a CodePress window. |
|
185 |
</li> |
|
186 |
<li> |
|
187 |
Other class options are <code>linenumbers-off</code>, <code>autocomplete-off</code> and <code>readonly-on</code>. |
|
188 |
</li> |
|
189 |
<li> |
|
190 |
Careful not to use the same id for two different CodePress windows (<code><textarea id="<strong>xx</strong>"...></code>) |
|
191 |
</li> |
|
192 |
</ul> |
|
193 |
||
194 |
</li> |
|
195 |
</ol> |
|
196 |
||
197 |
<h3>You also can...</h3> |
|
198 |
<ol> |
|
199 |
<li> |
|
200 |
Open/edit code from a different textarea.<br /> |
|
201 |
Example: <code>textarea_id.edit('other_textarea_id','language')</code><br> |
|
202 |
</li> |
|
203 |
<li> |
|
204 |
Get code from CodePress window.<br /> |
|
205 |
Example: <code>textarea_id.getCode()</code><br> |
|
206 |
</li> |
|
207 |
<li> |
|
208 |
Turn on/off CodePress editor and return to the regular textarea.<br /> |
|
209 |
Example: <code>textarea_id.toggleEditor()</code><br> |
|
210 |
</li> |
|
211 |
<li> |
|
212 |
Turn on/off line numbers.<br /> |
|
213 |
Example: <code>textarea_id.toggleLineNumbers()</code><br> |
|
214 |
</li> |
|
215 |
<li> |
|
216 |
Turn on/off read only.<br /> |
|
217 |
Example: <code>textarea_id.toggleReadOnly()</code><br> |
|
218 |
</li> |
|
219 |
<li> |
|
220 |
Turn on/off auto-complete.<br /> |
|
221 |
Example: <code>textarea_id.toggleAutoComplete()</code><br> |
|
222 |
</li> |
|
223 |
||
224 |
</ol> |
|
225 |
||
226 |
<!-- p>
|
|
227 |
You may want to use [id].getCode() to get the content code from CodePress window and save it to your server since CodePress only edit files and do not save them.
|
|
228 |
</p>
|
|
229 |
<p>
|
|
230 |
You may also want to open files from server. You'll have to write a server side script and replace the JavaScript call on codepress.js from codepress.html to codepress.php (if your server side language is PHP, of course).
|
|
231 |
</p -->
|
|
232 |
||
233 |
<h3>License</h3> |
|
234 |
<p> |
|
235 |
CodePress is distributed under the <a href="http://www.opensource.org/licenses/lgpl-license.php">LGPL</a>. If your software is <a href="http://www.gnu.org/philosophy/license-list.html#GPLCompatibleLicenses">compatible</a> with this licence or it is under <a href="http://creativecommons.org/">Creative Commons</a>, you can use it as you want. Just keep the credits somewhere around. |
|
236 |
</p> |
|
237 |
||
238 |
||
239 |
</div><!--/container--> |
|
240 |
||
241 |
||
242 |
||
243 |
<!-- hidden codes for loading -->
|
|
244 |
<textarea id="cp-php" class="hidden-code"> |
|
245 |
<?php
|
|
246 |
// Very simple implementation of server side script
|
|
247 |
||
248 |
if(isset($_GET['file'])) {
|
|
249 |
$file = basename($_GET['file']);
|
|
250 |
$full_file = $path['server'].'/'.$path['webdocs'].'/'.$path['files']."/".$file;
|
|
251 |
if(file_exists($full_file)) {
|
|
252 |
$code = file_get_contents($full_file);
|
|
253 |
$code = preg_replace("/>/","&gt;",$code);
|
|
254 |
$code = preg_replace("/</","&lt;",$code);
|
|
255 |
$language = getLanguage($file);
|
|
256 |
}
|
|
257 |
}
|
|
258 |
?>
|
|
259 |
||
260 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
261 |
<html> |
|
262 |
<head> |
|
263 |
<title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title> |
|
264 |
<link type="text/css" href="languages/codepress-<?=$language?>.css" rel="stylesheet" id="cp-lang-style" /> |
|
265 |
<script type="text/javascript" src="codepress.js"></script> |
|
266 |
<script type="text/javascript"> |
|
267 |
CodePress.language = '<?=$language?>'; |
|
268 |
</script> |
|
269 |
</head> |
|
270 |
<body id="ffedt"><pre id="ieedt"><?=$code?></pre></body> |
|
271 |
</html> |
|
272 |
</textarea> |
|
273 |
||
274 |
<textarea id="cp-javascript" class="hidden-code"> |
|
275 |
CodePress = function(obj) {
|
|
276 |
var self = document.createElement('iframe');
|
|
277 |
self.textarea = obj; |
|
278 |
self.textarea.disabled = true; |
|
279 |
self.style.height = self.textarea.clientHeight +'px'; |
|
280 |
self.style.width = self.textarea.clientWidth +'px'; |
|
281 |
||
282 |
self.initialize = function() {
|
|
283 |
self.editor = self.contentWindow.CodePress; |
|
284 |
self.editor.body = self.contentWindow.document.getElementsByTagName('body')[0];
|
|
285 |
self.editor.setCode(self.textarea.value); |
|
286 |
self.editor.syntaxHighlight('init');
|
|
287 |
} |
|
288 |
||
289 |
self.edit = function(id,language) {
|
|
290 |
self.language = (language) ? language : self.textarea.className.replace(/ ?codepress ?/,''); |
|
291 |
self.src = cpPath+'modules/codepress.html?engine='+self.getEngine()+'&language='+self.language;
|
|
292 |
if(self.attachEvent) self.attachEvent('onload',self.initialize);
|
|
293 |
else self.addEventListener('load',self.initialize,false);
|
|
294 |
} |
|
295 |
} |
|
296 |
</textarea> |
|
297 |
||
298 |
<textarea id="cp-autoit" class="hidden-code"> |
|
299 |
#include |
|
300 |
IsNumber(15) |
|
301 |
@Macro |
|
302 |
;comment |
|
303 |
$var = "string" |
|
304 |
</textarea> |
|
305 |
||
306 |
<textarea id="cp-java" class="hidden-code"> |
|
307 |
import java.io.FileFilter; |
|
308 |
import java.io.IOException; |
|
309 |
import java.io.PrintWriter; |
|
310 |
||
311 |
/** |
|
312 |
* Project ECCO - File manager class |
|
313 |
* @author Fernando M.A.d.S. |
|
314 |
*/ |
|
315 |
public class FileManager extends HttpServlet {
|
|
316 |
||
317 |
private static final long serialVersionUID = 1L; |
|
318 |
private static String login = "feanndor"; // session var should come here |
|
319 |
private static String usersPath = System.getProperty("user.dir")+File.separator+"htdocs"+File.separator+"ecco"+File.separator+"users"+File.separator;
|
|
320 |
private static File dir = new File(usersPath+login+File.separator); |
|
321 |
static boolean existDirectories = false; |
|
322 |
static int isDirectory = 0; |
|
323 |
||
324 |
public FileFilter filterFiles(File dir) {
|
|
325 |
return (new FileFilter() {
|
|
326 |
public boolean accept(File pathname) {
|
|
327 |
return !(pathname.isDirectory()); |
|
328 |
} |
|
329 |
}); |
|
330 |
} |
|
331 |
} |
|
332 |
</textarea> |
|
333 |
||
334 |
<textarea id="cp-perl" class="hidden-code"> |
|
335 |
#!/usr/bin/perl |
|
336 |
# The first line of the script envokes Perl |
|
337 |
||
338 |
# Scalar variables |
|
339 |
$var1 = "Hello World"; |
|
340 |
$var2 = 14.6; |
|
341 |
||
342 |
# Array variables |
|
343 |
@arr1 = ("zero","one","two","three","four");
|
|
344 |
||
345 |
# Hash variable, or associative array |
|
346 |
%hash1 = ("one","Monday","two", "Tuesday","three", "Wednesday","four","Thursday");
|
|
347 |
||
348 |
# Some simple printing |
|
349 |
print $var1; |
|
350 |
||
351 |
# Subroutine |
|
352 |
sub test() {
|
|
353 |
print "ok"; |
|
354 |
} |
|
355 |
</textarea> |
|
356 |
||
357 |
<textarea id="cp-sql" class="hidden-code"> |
|
358 |
-- |
|
359 |
-- simple select example |
|
360 |
-- |
|
361 |
SELECT * FROM books |
|
362 |
WHERE price > 100.00 and price < 150.00 |
|
363 |
ORDER BY title |
|
364 |
||
365 |
SELECT books.title, count(*) AS Authors |
|
366 |
FROM books |
|
367 |
JOIN book_authors |
|
368 |
ON books.book_number = book_authors.book_number |
|
369 |
GROUP BY books.title |
|
370 |
||
371 |
-- insert, update and delete examples |
|
372 |
||
373 |
INSERT INTO my_table (field1, field2, field3) VALUES ('test', 'N', NULL); |
|
374 |
||
375 |
BEGIN WORK; |
|
376 |
UPDATE inventory SET quantity = quantity - 3 WHERE item = 'pants'; |
|
377 |
COMMIT; |
|
378 |
</textarea> |
|
379 |
||
380 |
<textarea id="cp-html" class="hidden-code"> |
|
381 |
<html> |
|
382 |
<head> |
|
383 |
<title>CodePress - Online Real Time Syntax Highlighting Editor</title> |
|
384 |
||
385 |
<style type="text/css"> |
|
386 |
@import url(styles.css); |
|
387 |
</style> |
|
388 |
<script type="text/javascript"> |
|
389 |
function getCode() { |
|
390 |
alert(textWithoutHighlighting); |
|
391 |
}
|
|
392 |
</script> |
|
393 |
</head> |
|
394 |
<body> |
|
395 |
<div id="logo"> |
|
396 |
<h1><a href="http://codepress.org/">CodePress</a></h1> |
|
397 |
<h2>Online Real Time Syntax Highlighting Editor</h2> |
|
398 |
<img src="testimage.gif" /> |
|
399 |
</div> |
|
400 |
<div id="languages"> |
|
401 |
<em>choose language:</em> |
|
402 |
<button onclick="edit('codepress.php',this)" id="default">PHP</button> |
|
403 |
<button onclick="edit('FileManager.java',this)">Java</button> |
|
404 |
</div> |
|
405 |
</body> |
|
406 |
</html> |
|
407 |
</textarea> |
|
408 |
||
409 |
<textarea id="cp-css" class="hidden-code"> |
|
410 |
/* CSS comment */ |
|
411 |
||
412 |
body {
|
|
413 |
color:#000; |
|
414 |
background-color:white; |
|
415 |
font:15px Georgia, "Lucida Grande", Arial, sans-serif; |
|
416 |
letter-spacing:0.01em; |
|
417 |
margin:15px; |
|
418 |
} |
|
419 |
||
420 |
p {
|
|
421 |
margin:0 0 15px 0; |
|
422 |
} |
|
423 |
||
424 |
a,a:visited {
|
|
425 |
color:#7f0055; |
|
426 |
} |
|
427 |
||
428 |
select {
|
|
429 |
background:#ffffe1; |
|
430 |
} |
|
431 |
||
432 |
h1 {
|
|
433 |
color:#7f0055; |
|
434 |
margin:0; |
|
435 |
padding:0; |
|
436 |
font-size:42px; |
|
437 |
} |
|
438 |
</textarea> |
|
439 |
||
440 |
||
441 |
<script src="codepress.js" type="text/javascript"></script> |
|
442 |
</body> |
|
443 |
</html> |