mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
444 lines
14 KiB
HTML
444 lines
14 KiB
HTML
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
|
|
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
body {color:#000;background-color:white;font:15px georgia, "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; letter-spacing:0.01em;margin:15px;}
|
||
|
|
p {margin:0 0 15px 0;}
|
||
|
|
a,a:visited {color:#7f0055;}
|
||
|
|
select {background:#ffffe1;}
|
||
|
|
button {margin-top:5px;}
|
||
|
|
button.actions {width:171px;font-family:arial;}
|
||
|
|
h1 {color:#7f0055;margin:0;padding:0;font-size:42px;font-weight:normal;}
|
||
|
|
h1 a {text-decoration:none;}
|
||
|
|
h2 {margin:0;}
|
||
|
|
h2 a {text-decoration:none;font-weight:normal;font-size:22px;color:black !important;}
|
||
|
|
h3 {font-size:20px;font-weight:normal;padding:0;margin:25px 0 5px 0;color:#7f0055;font-weight:bold;border-bottom:2px dotted #d8d8d8;}
|
||
|
|
h4 {font-size:18px;font-weight:normal;z-index:0;}
|
||
|
|
code {color:#0080c0;font-size:13px;font-weight:bold;}
|
||
|
|
ol, ul {padding:5px 0 5px 25px;margin:0;}
|
||
|
|
ol li, ul li {margin:8px 0 8px 0;}
|
||
|
|
|
||
|
|
#logo {text-align:center;background-color:#d6d6d6;padding:10px;-moz-border-radius:5px;border:1px solid silver;}
|
||
|
|
#container {width:700px;margin:20px auto;padding:25px;border:3px solid #d9d9d9;-moz-border-radius:10px;background:#f8f8f8;}
|
||
|
|
#languages {margin:5px 0;}
|
||
|
|
|
||
|
|
#menu {width:100%;background:#7f0055;-moz-border-radius:4px;}
|
||
|
|
#menu a {font:bold 17px georgia;color:white;padding:4px;display:block;border-left:1px solid white;text-align:center;text-decoration:none;}
|
||
|
|
#menu a:hover {background:#b9669e;}
|
||
|
|
|
||
|
|
.hidden-code {display:none;}
|
||
|
|
.copycode {border:1px dotted gray;padding:10px;background:white;font-family:monospace;color:gray}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="container">
|
||
|
|
|
||
|
|
<div id="logo">
|
||
|
|
<h1><a href="http://codepress.org/">CodePress</a></h1>
|
||
|
|
<h2><a href="http://codepress.org/">Online Real Time Syntax Highlighting Editor</a></h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<table cellpadding="0" cellspacing="0" id="menu">
|
||
|
|
<tr>
|
||
|
|
<td>
|
||
|
|
<a href="http://www.codepress.org/index.php">Home/Download</a>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<a href="http://www.codepress.org/install.php"> Install </a>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<a href="http://www.codepress.org/to-do.php"> To-do </a>
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<a href="http://www.codepress.org/about.php" id="about"> About </a>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<h4>
|
||
|
|
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.
|
||
|
|
</h4>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Go to <strong><a href="http://codepress.org/">http://codepress.org/</a></strong> for updates.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3>Demo</h3>
|
||
|
|
<div id="languages">
|
||
|
|
<em>choose example in:</em>
|
||
|
|
<button onclick="cp1.edit('cp-php','php')">PHP</button>
|
||
|
|
<button onclick="cp1.edit('cp-javascript','javascript')">JavaScript</button>
|
||
|
|
<button onclick="cp1.edit('cp-java','java')">Java</button>
|
||
|
|
<button onclick="cp1.edit('cp-perl','perl')">Perl</button>
|
||
|
|
<button onclick="cp1.edit('cp-sql','sql')">SQL</button>
|
||
|
|
<button onclick="cp1.edit('cp-html','html')">HTML</button>
|
||
|
|
<button onclick="cp1.edit('cp-css','css')">CSS</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<textarea id="cp1" class="codepress php" style="width:700px;height:300px;" wrap="off">
|
||
|
|
<?php
|
||
|
|
// Very simple implementation of server side script
|
||
|
|
|
||
|
|
if(isset($_GET['file'])) {
|
||
|
|
$file = basename($_GET['file']);
|
||
|
|
$full_file = $path['server'].'/'.$path['webdocs'].'/'.$path['files']."/".$file;
|
||
|
|
if(file_exists($full_file)) {
|
||
|
|
$code = file_get_contents($full_file);
|
||
|
|
$code = preg_replace("/>/","&gt;",$code);
|
||
|
|
$code = preg_replace("/</","&lt;",$code);
|
||
|
|
$language = getLanguage($file);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
|
||
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title>
|
||
|
|
<link type="text/css" href="languages/codepress-<?=$language?>.css" rel="stylesheet" id="cp-lang-style" />
|
||
|
|
<script type="text/javascript" src="codepress.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
CodePress.language = '<?=$language?>';
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body id="ffedt"><pre id="ieedt"><?=$code?></pre></body>
|
||
|
|
</html>
|
||
|
|
</textarea>
|
||
|
|
|
||
|
|
<br /><br />
|
||
|
|
|
||
|
|
<textarea id="codepress2" class="codepress javascript linenumbers-off" style="width:700px;height:200px;" wrap="off">
|
||
|
|
//set language
|
||
|
|
this.setLanguage = function() {
|
||
|
|
if(arguments[0]) {
|
||
|
|
language = (typeof(Content.languages[arguments[0]])!='undefined') ? arguments[0] : this.setLanguage();
|
||
|
|
cpLanguage.innerHTML = Content.languages[language].name;
|
||
|
|
if(cpBody.document.designMode=='on') cpBody.document.designMode = 'off';
|
||
|
|
CodePress.loadScript(cpBody.document, '../languages/'+language+'.js', function () { cpBody.CodePress.syntaxHighlight('init'); })
|
||
|
|
cpBody.document.getElementById('cp-lang-style').href = '../languages/'+language+'.css';
|
||
|
|
this.hideMenu();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
var extension = filename.replace(/.*\.([^\.]+)$/,'$1');
|
||
|
|
var aux = false;
|
||
|
|
for(lang in Content.languages) {
|
||
|
|
extensions = ','+Content.languages[lang].extensions+',';
|
||
|
|
if(extensions.match(','+extension+',')) aux = lang;
|
||
|
|
}
|
||
|
|
language = (aux) ? aux : 'generic';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</textarea>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
<button class="actions" onclick="alert(codepress2.getCode())">get code from editor</button>
|
||
|
|
<button class="actions" onclick="codepress2.toggleEditor()">turn on/off CodePress</button>
|
||
|
|
<button class="actions" onclick="codepress2.toggleLineNumbers()">show/hide line numbers</button>
|
||
|
|
<button class="actions" onclick="codepress2.toggleAutoComplete()">turn on/off auto-complete</button>
|
||
|
|
<button class="actions" onclick="codepress2.toggleReadOnly()">turn on/off read only</button>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<h3>Installation</h3>
|
||
|
|
<ol>
|
||
|
|
<li>
|
||
|
|
<p>
|
||
|
|
<a href="http://codepress.org/">Download</a> and uncompress CodePress under a directory inside your webserver.<br>
|
||
|
|
Example:<strong> http://yourserver/codepress/</strong><br />
|
||
|
|
Since CodePress is pure JavaScript and HTML, you can also test it without a webserver.
|
||
|
|
</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<p>
|
||
|
|
Insert CodePress script somewhere in your page inside the <code><head></code> or above the <code></body></code> tag.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p class="copycode">
|
||
|
|
<script src="/codepress/codepress.js" type="text/javascript"></script>
|
||
|
|
</p>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<p>
|
||
|
|
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.
|
||
|
|
When the page loads, it will automatically replace your textarea with a CodePress window.
|
||
|
|
</p>
|
||
|
|
<p class="copycode">
|
||
|
|
<textarea id="myCpWindow" class="codepress javascript linenumbers-off"><br />
|
||
|
|
// your code here<br />
|
||
|
|
</textarea>
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
The <code>javascript</code> portion of the class="" means that the language being edited is JavaScript.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
The <code>codepress</code> portion of the class="" is mandatory and indicates a textarea to be replaced for a CodePress window.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Other class options are <code>linenumbers-off</code>, <code>autocomplete-off</code> and <code>readonly-on</code>.
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Careful not to use the same id for two different CodePress windows (<code><textarea id="<strong>xx</strong>"...></code>)
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<h3>You also can...</h3>
|
||
|
|
<ol>
|
||
|
|
<li>
|
||
|
|
Open/edit code from a different textarea.<br />
|
||
|
|
Example: <code>textarea_id.edit('other_textarea_id','language')</code><br>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Get code from CodePress window.<br />
|
||
|
|
Example: <code>textarea_id.getCode()</code><br>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Turn on/off CodePress editor and return to the regular textarea.<br />
|
||
|
|
Example: <code>textarea_id.toggleEditor()</code><br>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Turn on/off line numbers.<br />
|
||
|
|
Example: <code>textarea_id.toggleLineNumbers()</code><br>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Turn on/off read only.<br />
|
||
|
|
Example: <code>textarea_id.toggleReadOnly()</code><br>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
Turn on/off auto-complete.<br />
|
||
|
|
Example: <code>textarea_id.toggleAutoComplete()</code><br>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<!-- p>
|
||
|
|
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.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
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).
|
||
|
|
</p -->
|
||
|
|
|
||
|
|
<h3>License</h3>
|
||
|
|
<p>
|
||
|
|
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.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
|
||
|
|
</div><!--/container-->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!-- hidden codes for loading -->
|
||
|
|
<textarea id="cp-php" class="hidden-code">
|
||
|
|
<?php
|
||
|
|
// Very simple implementation of server side script
|
||
|
|
|
||
|
|
if(isset($_GET['file'])) {
|
||
|
|
$file = basename($_GET['file']);
|
||
|
|
$full_file = $path['server'].'/'.$path['webdocs'].'/'.$path['files']."/".$file;
|
||
|
|
if(file_exists($full_file)) {
|
||
|
|
$code = file_get_contents($full_file);
|
||
|
|
$code = preg_replace("/>/","&gt;",$code);
|
||
|
|
$code = preg_replace("/</","&lt;",$code);
|
||
|
|
$language = getLanguage($file);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
?>
|
||
|
|
|
||
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>CodePress - Real Time Syntax Highlighting Editor written in JavaScript</title>
|
||
|
|
<link type="text/css" href="languages/codepress-<?=$language?>.css" rel="stylesheet" id="cp-lang-style" />
|
||
|
|
<script type="text/javascript" src="codepress.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
CodePress.language = '<?=$language?>';
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body id="ffedt"><pre id="ieedt"><?=$code?></pre></body>
|
||
|
|
</html>
|
||
|
|
</textarea>
|
||
|
|
|
||
|
|
<textarea id="cp-javascript" class="hidden-code">
|
||
|
|
CodePress = function(obj) {
|
||
|
|
var self = document.createElement('iframe');
|
||
|
|
self.textarea = obj;
|
||
|
|
self.textarea.disabled = true;
|
||
|
|
self.style.height = self.textarea.clientHeight +'px';
|
||
|
|
self.style.width = self.textarea.clientWidth +'px';
|
||
|
|
|
||
|
|
self.initialize = function() {
|
||
|
|
self.editor = self.contentWindow.CodePress;
|
||
|
|
self.editor.body = self.contentWindow.document.getElementsByTagName('body')[0];
|
||
|
|
self.editor.setCode(self.textarea.value);
|
||
|
|
self.editor.syntaxHighlight('init');
|
||
|
|
}
|
||
|
|
|
||
|
|
self.edit = function(id,language) {
|
||
|
|
self.language = (language) ? language : self.textarea.className.replace(/ ?codepress ?/,'');
|
||
|
|
self.src = cpPath+'modules/codepress.html?engine='+self.getEngine()+'&language='+self.language;
|
||
|
|
if(self.attachEvent) self.attachEvent('onload',self.initialize);
|
||
|
|
else self.addEventListener('load',self.initialize,false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</textarea>
|
||
|
|
|
||
|
|
<textarea id="cp-autoit" class="hidden-code">
|
||
|
|
#include
|
||
|
|
IsNumber(15)
|
||
|
|
@Macro
|
||
|
|
;comment
|
||
|
|
$var = "string"
|
||
|
|
</textarea>
|
||
|
|
|
||
|
|
<textarea id="cp-java" class="hidden-code">
|
||
|
|
import java.io.FileFilter;
|
||
|
|
import java.io.IOException;
|
||
|
|
import java.io.PrintWriter;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Project ECCO - File manager class
|
||
|
|
* @author Fernando M.A.d.S.
|
||
|
|
*/
|
||
|
|
public class FileManager extends HttpServlet {
|
||
|
|
|
||
|
|
private static final long serialVersionUID = 1L;
|
||
|
|
private static String login = "feanndor"; // session var should come here
|
||
|
|
private static String usersPath = System.getProperty("user.dir")+File.separator+"htdocs"+File.separator+"ecco"+File.separator+"users"+File.separator;
|
||
|
|
private static File dir = new File(usersPath+login+File.separator);
|
||
|
|
static boolean existDirectories = false;
|
||
|
|
static int isDirectory = 0;
|
||
|
|
|
||
|
|
public FileFilter filterFiles(File dir) {
|
||
|
|
return (new FileFilter() {
|
||
|
|
public boolean accept(File pathname) {
|
||
|
|
return !(pathname.isDirectory());
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</textarea>
|
||
|
|
|
||
|
|
<textarea id="cp-perl" class="hidden-code">
|
||
|
|
#!/usr/bin/perl
|
||
|
|
# The first line of the script envokes Perl
|
||
|
|
|
||
|
|
# Scalar variables
|
||
|
|
$var1 = "Hello World";
|
||
|
|
$var2 = 14.6;
|
||
|
|
|
||
|
|
# Array variables
|
||
|
|
@arr1 = ("zero","one","two","three","four");
|
||
|
|
|
||
|
|
# Hash variable, or associative array
|
||
|
|
%hash1 = ("one","Monday","two", "Tuesday","three", "Wednesday","four","Thursday");
|
||
|
|
|
||
|
|
# Some simple printing
|
||
|
|
print $var1;
|
||
|
|
|
||
|
|
# Subroutine
|
||
|
|
sub test() {
|
||
|
|
print "ok";
|
||
|
|
}
|
||
|
|
</textarea>
|
||
|
|
|
||
|
|
<textarea id="cp-sql" class="hidden-code">
|
||
|
|
--
|
||
|
|
-- simple select example
|
||
|
|
--
|
||
|
|
SELECT * FROM books
|
||
|
|
WHERE price > 100.00 and price < 150.00
|
||
|
|
ORDER BY title
|
||
|
|
|
||
|
|
SELECT books.title, count(*) AS Authors
|
||
|
|
FROM books
|
||
|
|
JOIN book_authors
|
||
|
|
ON books.book_number = book_authors.book_number
|
||
|
|
GROUP BY books.title
|
||
|
|
|
||
|
|
-- insert, update and delete examples
|
||
|
|
|
||
|
|
INSERT INTO my_table (field1, field2, field3) VALUES ('test', 'N', NULL);
|
||
|
|
|
||
|
|
BEGIN WORK;
|
||
|
|
UPDATE inventory SET quantity = quantity - 3 WHERE item = 'pants';
|
||
|
|
COMMIT;
|
||
|
|
</textarea>
|
||
|
|
|
||
|
|
<textarea id="cp-html" class="hidden-code">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>CodePress - Online Real Time Syntax Highlighting Editor</title>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
@import url(styles.css);
|
||
|
|
</style>
|
||
|
|
<script type="text/javascript">
|
||
|
|
function getCode() {
|
||
|
|
alert(textWithoutHighlighting);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="logo">
|
||
|
|
<h1><a href="http://codepress.org/">CodePress</a></h1>
|
||
|
|
<h2>Online Real Time Syntax Highlighting Editor</h2>
|
||
|
|
<img src="testimage.gif" />
|
||
|
|
</div>
|
||
|
|
<div id="languages">
|
||
|
|
<em>choose language:</em>
|
||
|
|
<button onclick="edit('codepress.php',this)" id="default">PHP</button>
|
||
|
|
<button onclick="edit('FileManager.java',this)">Java</button>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
</textarea>
|
||
|
|
|
||
|
|
<textarea id="cp-css" class="hidden-code">
|
||
|
|
/* CSS comment */
|
||
|
|
|
||
|
|
body {
|
||
|
|
color:#000;
|
||
|
|
background-color:white;
|
||
|
|
font:15px Georgia, "Lucida Grande", Arial, sans-serif;
|
||
|
|
letter-spacing:0.01em;
|
||
|
|
margin:15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
margin:0 0 15px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
a,a:visited {
|
||
|
|
color:#7f0055;
|
||
|
|
}
|
||
|
|
|
||
|
|
select {
|
||
|
|
background:#ffffe1;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
color:#7f0055;
|
||
|
|
margin:0;
|
||
|
|
padding:0;
|
||
|
|
font-size:42px;
|
||
|
|
}
|
||
|
|
</textarea>
|
||
|
|
|
||
|
|
|
||
|
|
<script src="codepress.js" type="text/javascript"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|