forked from extern/egroupware
182 lines
5.9 KiB
HTML
182 lines
5.9 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Example of HTMLArea 3.0</title>
|
||
|
|
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
|
|
|
||
|
|
<script type="text/javascript" src="htmlarea.js"></script>
|
||
|
|
<script type="text/javascript" src="lang/en.js"></script>
|
||
|
|
<script type="text/javascript" src="dialog.js"></script>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
@import url(htmlarea.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.</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>
|