added: "EditArea" code highlighter and editing tool for WebGUI::Form::Codearea, used
in Template, Snippet, SQLReport, and more
This commit is contained in:
Doug Bell
parent
8848a71d52
commit
810c8247cc
138 changed files with 12642 additions and 7 deletions
274
www/extras/editarea/exemples/exemple_full.html
Executable file
274
www/extras/editarea/exemples/exemple_full.html
Executable file
|
|
@ -0,0 +1,274 @@
|
|||
<!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,brainfuck"
|
||||
,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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue