forked from extern/egroupware
0a28f3812e
- Inclusion of the following javascript directories:
* Connector: javascript object to interface xmlhttprequest object. This object allows
asynchronous posts and support for messages while this post is being done, such as
"wait, contacting server", etc.
* JsAPI: general javascript functions and methods
* jsolait: performs conversion from a xmlrpc message to a javascript object
* xmlRpcMsgCreator: performs conversion from a javascript object to a xmlrpc message
* dynapi: cross-browser class to draw layers
- Update in setup version: now is 1.0.1.008; Update your versions. There was made a
change in phpgw_vfs2_files table in handling of modified files.
- Upgrade of vfs2 classes and PclZip class
- Changes in javascript object and common object to allow the javascript backend to
applications to work (now just filescenter will use it...)
186 lines
6.1 KiB
HTML
Executable File
186 lines
6.1 KiB
HTML
Executable File
<html>
|
|
<head>
|
|
<title>Example of HTMLArea 3.0</title>
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
<!-- Configure the path to the editor. We make it relative now, so that the
|
|
example ZIP file will work anywhere, but please NOTE THAT it's better to
|
|
have it an absolute path, such as '/htmlarea/'. -->
|
|
<script type="text/javascript">
|
|
_editor_url = "../";
|
|
_editor_lang = "en";
|
|
</script>
|
|
<script type="text/javascript" src="../htmlarea.js"></script>
|
|
<script type="text/javascript" src="../htmlarea_css.js"></script>
|
|
|
|
<style type="text/css">
|
|
html, body {
|
|
font-family: Verdana,sans-serif;
|
|
background-color: #fea;
|
|
color: #000;
|
|
}
|
|
a:link, a:visited { color: #00f; }
|
|
a:hover { color: #048; }
|
|
a:active { color: #f00; }
|
|
|
|
textarea { background-color: #fff; border: 1px solid 00f; }
|
|
</style>
|
|
|
|
<script type="text/javascript">
|
|
var editor = null;
|
|
function initEditor() {
|
|
editor = new HTMLArea("ta");
|
|
|
|
// comment the following two lines to see how customization works
|
|
editor.generate();
|
|
return false;
|
|
|
|
var cfg = editor.config; // this is the default configuration
|
|
cfg.registerButton({
|
|
id : "my-hilite",
|
|
tooltip : "Highlight text",
|
|
image : "ed_custom.gif",
|
|
textMode : false,
|
|
action : function(editor) {
|
|
editor.surroundHTML("<span class=\"hilite\">", "</span>");
|
|
},
|
|
context : 'table'
|
|
});
|
|
|
|
cfg.toolbar.push(["linebreak", "my-hilite"]); // add the new button to the toolbar
|
|
|
|
// BEGIN: code that adds a custom button
|
|
// uncomment it to test
|
|
var cfg = editor.config; // this is the default configuration
|
|
/*
|
|
cfg.registerButton({
|
|
id : "my-hilite",
|
|
tooltip : "Highlight text",
|
|
image : "ed_custom.gif",
|
|
textMode : false,
|
|
action : function(editor) {
|
|
editor.surroundHTML("<span class=\"hilite\">", "</span>");
|
|
}
|
|
});
|
|
*/
|
|
|
|
function clickHandler(editor, buttonId) {
|
|
switch (buttonId) {
|
|
case "my-toc":
|
|
editor.insertHTML("<h1>Table Of Contents</h1>");
|
|
break;
|
|
case "my-date":
|
|
editor.insertHTML((new Date()).toString());
|
|
break;
|
|
case "my-bold":
|
|
editor.execCommand("bold");
|
|
editor.execCommand("italic");
|
|
break;
|
|
case "my-hilite":
|
|
editor.surroundHTML("<span class=\"hilite\">", "</span>");
|
|
break;
|
|
}
|
|
};
|
|
cfg.registerButton("my-toc", "Insert TOC", "ed_custom.gif", false, clickHandler);
|
|
cfg.registerButton("my-date", "Insert date/time", "ed_custom.gif", false, clickHandler);
|
|
cfg.registerButton("my-bold", "Toggle bold/italic", "ed_custom.gif", false, clickHandler);
|
|
cfg.registerButton("my-hilite", "Hilite selection", "ed_custom.gif", false, clickHandler);
|
|
|
|
cfg.registerButton("my-sample", "Class: sample", "ed_custom.gif", false,
|
|
function(editor) {
|
|
if (HTMLArea.is_ie) {
|
|
editor.insertHTML("<span class=\"sample\"> </span>");
|
|
var r = editor._doc.selection.createRange();
|
|
r.move("character", -2);
|
|
r.moveEnd("character", 2);
|
|
r.select();
|
|
} else { // Gecko/W3C compliant
|
|
var n = editor._doc.createElement("span");
|
|
n.className = "sample";
|
|
editor.insertNodeAtSelection(n);
|
|
var sel = editor._iframe.contentWindow.getSelection();
|
|
sel.removeAllRanges();
|
|
var r = editor._doc.createRange();
|
|
r.setStart(n, 0);
|
|
r.setEnd(n, 0);
|
|
sel.addRange(r);
|
|
}
|
|
}
|
|
);
|
|
|
|
|
|
/*
|
|
cfg.registerButton("my-hilite", "Highlight text", "ed_custom.gif", false,
|
|
function(editor) {
|
|
editor.surroundHTML('<span class="hilite">', '</span>');
|
|
}
|
|
);
|
|
*/
|
|
cfg.pageStyle = "body { background-color: #efd; } .hilite { background-color: yellow; } "+
|
|
".sample { color: green; font-family: monospace; }";
|
|
cfg.toolbar.push(["linebreak", "my-toc", "my-date", "my-bold", "my-hilite", "my-sample"]); // add the new button to the toolbar
|
|
// END: code that adds a custom button
|
|
|
|
editor.generate();
|
|
}
|
|
function insertHTML() {
|
|
var html = prompt("Enter some HTML code here");
|
|
if (html) {
|
|
editor.insertHTML(html);
|
|
}
|
|
}
|
|
function highlight() {
|
|
editor.surroundHTML('<span style="background-color: yellow">', '</span>');
|
|
}
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<!-- use <body onload="HTMLArea.replaceAll()" if you don't care about
|
|
customizing the editor. It's the easiest way! :) -->
|
|
<body onload="initEditor()">
|
|
|
|
<h1>HTMLArea 3.0</h1>
|
|
|
|
<p>A replacement for <code>TEXTAREA</code> elements. © <a
|
|
href="http://interactivetools.com">InteractiveTools.com</a>, 2003-2004.</p>
|
|
|
|
<form action="test.cgi" method="post" id="edit" name="edit">
|
|
|
|
<textarea id="ta" name="ta" style="width:100%" rows="20" cols="80">
|
|
<p>Here is some sample text: <b>bold</b>, <i>italic</i>, <u>underline</u>. </p>
|
|
<p align=center>Different fonts, sizes and colors (all in bold):</p>
|
|
<p><b>
|
|
<font face="arial" size="7" color="#000066">arial</font>,
|
|
<font face="courier new" size="6" color="#006600">courier new</font>,
|
|
<font face="georgia" size="5" color="#006666">georgia</font>,
|
|
<font face="tahoma" size="4" color="#660000">tahoma</font>,
|
|
<font face="times new roman" size="3" color="#660066">times new roman</font>,
|
|
<font face="verdana" size="2" color="#666600">verdana</font>,
|
|
<font face="tahoma" size="1" color="#666666">tahoma</font>
|
|
</b></p>
|
|
<p>Click on <a href="http://www.interactivetools.com/">this link</a> and then on the link button to the details ... OR ... select some text and click link to create a <b>new</b> link.</p>
|
|
</textarea>
|
|
|
|
<p />
|
|
|
|
<input type="submit" name="ok" value=" submit " />
|
|
<input type="button" name="ins" value=" insert html " onclick="return insertHTML();" />
|
|
<input type="button" name="hil" value=" highlight text " onclick="return highlight();" />
|
|
|
|
<a href="javascript:mySubmit()">submit</a>
|
|
|
|
<script type="text/javascript">
|
|
function mySubmit() {
|
|
// document.edit.save.value = "yes";
|
|
document.edit.onsubmit(); // workaround browser bugs.
|
|
document.edit.submit();
|
|
};
|
|
</script>
|
|
|
|
</form>
|
|
|
|
</body>
|
|
</html>
|