274 lines
9.2 KiB
HTML
274 lines
9.2 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<title>EditArea - the code editor in a textarea</title>
|
|
<script language="Javascript" type="text/javascript" src="../edit_area/edit_area_full.js"></script>
|
|
<script language="Javascript" type="text/javascript">
|
|
// initialisation
|
|
editAreaLoader.init({
|
|
id: "example_1" // id of the textarea to transform
|
|
,start_highlight: true // if start with highlight
|
|
,allow_resize: "both"
|
|
,allow_toggle: true
|
|
,language: "en"
|
|
,syntax: "php"
|
|
});
|
|
|
|
editAreaLoader.init({
|
|
id: "example_2" // id of the textarea to transform
|
|
,start_highlight: true
|
|
,allow_toggle: false
|
|
,language: "en"
|
|
,syntax: "html"
|
|
,toolbar: "search, go_to_line, |, undo, redo, |, select_font, |, syntax_selection, |, change_smooth_selection, highlight, reset_highlight, |, help"
|
|
,syntax_selection_allow: "css,html,js,php,python,vb,xml,c,cpp,sql,basic,pas"
|
|
,is_multi_files: true
|
|
,EA_load_callback: "editAreaLoaded"
|
|
,show_line_colors: true
|
|
});
|
|
|
|
editAreaLoader.init({
|
|
id: "example_3" // id of the textarea to transform
|
|
,start_highlight: true
|
|
,font_size: "8"
|
|
,font_family: "verdana, monospace"
|
|
,allow_resize: "y"
|
|
,allow_toggle: false
|
|
,language: "fr"
|
|
,syntax: "css"
|
|
,toolbar: "new_document, save, load, |, charmap, |, search, go_to_line, |, undo, redo, |, select_font, |, change_smooth_selection, highlight, reset_highlight, |, help"
|
|
,load_callback: "my_load"
|
|
,save_callback: "my_save"
|
|
,plugins: "charmap"
|
|
,charmap_default: "arrows"
|
|
|
|
});
|
|
|
|
editAreaLoader.init({
|
|
id: "example_4" // id of the textarea to transform
|
|
//,start_highlight: true // if start with highlight
|
|
//,font_size: "10"
|
|
,allow_resize: "no"
|
|
,allow_toggle: true
|
|
,language: "de"
|
|
,syntax: "python"
|
|
,load_callback: "my_load"
|
|
,save_callback: "my_save"
|
|
,display: "later"
|
|
,replace_tab_by_spaces: 4
|
|
,min_height: 350
|
|
});
|
|
|
|
// callback functions
|
|
function my_save(id, content){
|
|
alert("Here is the content of the EditArea '"+ id +"' as received by the save callback function:\n"+content);
|
|
}
|
|
|
|
function my_load(id){
|
|
editAreaLoader.setValue(id, "The content is loaded from the load_callback function into EditArea");
|
|
}
|
|
|
|
function test_setSelectionRange(id){
|
|
editAreaLoader.setSelectionRange(id, 100, 150);
|
|
}
|
|
|
|
function test_getSelectionRange(id){
|
|
var sel =editAreaLoader.getSelectionRange(id);
|
|
alert("start: "+sel["start"]+"\nend: "+sel["end"]);
|
|
}
|
|
|
|
function test_setSelectedText(id){
|
|
text= "[REPLACED SELECTION]";
|
|
editAreaLoader.setSelectedText(id, text);
|
|
}
|
|
|
|
function test_getSelectedText(id){
|
|
alert(editAreaLoader.getSelectedText(id));
|
|
}
|
|
|
|
function editAreaLoaded(id){
|
|
if(id=="example_2")
|
|
{
|
|
open_file1();
|
|
open_file2();
|
|
}
|
|
}
|
|
|
|
function open_file1()
|
|
{
|
|
var new_file= {id: "to\\ é # € to", text: "$authors= array();\n$news= array();", syntax: 'php', title: 'beautiful title'};
|
|
editAreaLoader.openFile('example_2', new_file);
|
|
}
|
|
|
|
function open_file2()
|
|
{
|
|
var new_file= {id: "Filename", text: "<a href=\"toto\">\n\tbouh\n</a>\n<!-- it's a comment -->", syntax: 'html'};
|
|
editAreaLoader.openFile('example_2', new_file);
|
|
}
|
|
|
|
function close_file1()
|
|
{
|
|
editAreaLoader.closeFile('example_2', "to\\ é # € to");
|
|
}
|
|
|
|
function toogle_editable(id)
|
|
{
|
|
editAreaLoader.execCommand(id, 'set_editable', !editAreaLoader.execCommand(id, 'is_editable'));
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h2>EditArea examples</h2>
|
|
<p>Retrieve EditArea on <a href='http://sourceforge.net/projects/editarea'>sourceforge</a> or on
|
|
my personal <a href='http://www.cdolivet.net/index.php?page=editArea'>website</a>.
|
|
</p>
|
|
<form action='' method='post'>
|
|
<fieldset>
|
|
<legend>Example 1</legend>
|
|
<p>Test in English with php syntax, highlighted, toggle enabled, resize enabled and default toolbar. Also offer the possibility to switch on/off the readonly mode.</p>
|
|
<textarea id="example_1" style="height: 350px; width: 100%;" name="test_1">
|
|
<?php
|
|
$authors= array();
|
|
$news= array();
|
|
$query="SELECT author, COUNT(id) as 'nb_news' FROM news_messages GROUP BY author";
|
|
$result=mysql_query($query, $DBnews);
|
|
while($line = mysql_fetch_assoc($result)){
|
|
$authors[$line["author"]]= $line["author"];
|
|
$news[$line["author"]]=$line['nb_news'];
|
|
}
|
|
|
|
$list= sprintf("('%s')", implode("', '", $authors));
|
|
|
|
|
|
$query="SELECT p.people_id, p.name, p.fname, p.status, team_name, t.leader_id=p.people_id as 'team_leader', w.name as 'wp_name', w.type
|
|
FROM people p, teams t, wppartis wp, wps w
|
|
WHERE p.people_id IN $list AND p.org_id=t.team_id AND wp.team_id=t.team_id AND wp.wp_id=w.wp_id
|
|
GROUP BY p.people_id";
|
|
if(isset($_GET["order"]) && $_GET["order"]!="nb_news")
|
|
$query.=" ORDER BY ".$_GET["order"];
|
|
|
|
$result=mysql_query($query, $DBkal);
|
|
while($line = mysql_fetch_assoc($result)){
|
|
printf("<tr><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td></tr>", $line["name"], $line["fname"],
|
|
$news[$line["people_id"]], $line["status"], $line["team_name"], ($line["team_leader"]=="1")?"yes":"no", $line["type"], $line["wp_name"]);
|
|
|
|
}
|
|
printf("</table>");
|
|
?>
|
|
</textarea>
|
|
<p>Custom controls:<br />
|
|
<input type='button' onclick='alert(editAreaLoader.getValue("example_1"));' value='get value' />
|
|
<input type='button' onclick='editAreaLoader.setValue("example_1", "new_value");' value='set value' />
|
|
<input type='button' onclick='test_getSelectionRange("example_1");' value='getSelectionRange' />
|
|
<input type='button' onclick='test_setSelectionRange("example_1");' value='setSelectionRange' />
|
|
<input type='button' onclick='test_getSelectedText("example_1");' value='getSelectedText' />
|
|
<input type='button' onclick='test_setSelectedText("example_1");' value='setSelectedText' />
|
|
<input type='button' onclick='editAreaLoader.insertTags("example_1", "[OPEN]", "[CLOSE]");' value='insertTags' />
|
|
<input type='button' onclick='toogle_editable("example_1");' value='Toggle readonly mode' />
|
|
</p>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Example 2</legend>
|
|
<p>Multi file mode example with syntax selection option. The highlight colors of the selected line is also shown.</p>
|
|
<textarea id="example_2" style="height: 250px; width: 100%;" name="test_2">
|
|
</textarea>
|
|
<p>Custom controls:<br />
|
|
<input type='button' onclick='open_file1()' value='open file 1' />
|
|
<input type='button' onclick='open_file2()' value='open file 2' />
|
|
<input type='button' onclick='close_file1()' value='close file 1' />
|
|
</p>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Example 3</legend>
|
|
<p>Test in French with css syntax, verdana font, smaller default font size, toggle disabled, vertical only resize, custom toolbar, visual keyboard plugin, save and load callback examples.</p>
|
|
<textarea id="example_3" style="height: 350px; width: 100%;" name="test_3">
|
|
/* toolbar buttons (inspired from tinyMCE ones)*/
|
|
.editAreaButtonNormal, .editAreaButtonOver, .editAreaButtonDown, .editAreaSeparator, .editAreaSeparatorLine, .editAreaButtonDisabled, .editAreaButtonSelected {
|
|
border: 0px; margin: 0px; padding: 0px; background: transparent;
|
|
margin-top: 0px;
|
|
margin-left: 1px;
|
|
padding: 0px;
|
|
}
|
|
|
|
.editAreaButtonNormal {
|
|
border: 1px solid #ECE9D8 !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.editAreaButtonOver {
|
|
border: 1px solid #0A246A !important;
|
|
cursor: pointer;
|
|
background-color: #B6BDD2;
|
|
}
|
|
|
|
.editAreaButtonDown {
|
|
cursor: pointer;
|
|
border: 1px solid #0A246A !important;
|
|
background-color: #8592B5;
|
|
}
|
|
|
|
.editAreaButtonSelected {
|
|
border: 1px solid #C0C0BB !important;
|
|
cursor: pointer;
|
|
background-color: #F4F2E8;
|
|
}
|
|
|
|
.editAreaButtonDisabled {
|
|
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
|
|
-moz-opacity:0.3;
|
|
opacity: 0.3;
|
|
border: 1px solid #F0F0EE !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.editAreaSeparatorLine {
|
|
margin: 1px 2px;
|
|
background-color: #C0C0BB;
|
|
width: 2px;
|
|
height: 18px;
|
|
}
|
|
</textarea>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>example 4</legend>
|
|
<p>Test in German with Python syntax, toggle enabled for a later display, with highlight not enabled by default, without resizing possibility (but with larger minimum height when editor is toggled), and with tabs replaced by 4 spaces.</p>
|
|
<textarea id="example_4" style="height: 50px; width: 100%;" name="test_4">
|
|
import Blender
|
|
|
|
class Python:
|
|
# Instancie un objet
|
|
# cls = la classe Python et non pas l'object instancié
|
|
def __new__(cls):
|
|
pass
|
|
|
|
# Constructeur de l'objet
|
|
def __init__(self):
|
|
self.items = [1, 2, 3]
|
|
|
|
# Destructeur
|
|
def __del__(self):
|
|
print "Pourquoi tant de haine ?"
|
|
|
|
# Utilisé pour : "len(p)"
|
|
def __len__(self):
|
|
return len(self.items)
|
|
|
|
# Utilisé pour : "p[x]"
|
|
def __getitem__(self, key):
|
|
return self.items[key]
|
|
|
|
# Utilisé pour : "x in p"
|
|
def __contains__(self, value):
|
|
return (value in self.items)
|
|
|
|
# Utilisé pour : "for x in p"
|
|
def __iter__(self):
|
|
for x in self.items:
|
|
yield x
|
|
</textarea>
|
|
</fieldset>
|
|
</form>
|
|
</body>
|
|
</html>
|