source: trunk/phpgwapi/js/htmlarea/example.html @ 2

Revision 2, 5.9 KB checked in by niltonneto, 17 years ago (diff)

Removida todas as tags usadas pelo CVS ($Id, $Source).
Primeira versão no CVS externo.
  • Property svn:eol-style set to native
  • Property svn:executable set to *
Line 
1<html>
2<head>
3<title>Example of HTMLArea 3.0</title>
4
5<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6
7<script type="text/javascript" src="htmlarea.js"></script>
8<script type="text/javascript" src="lang/en.js"></script>
9<script type="text/javascript" src="dialog.js"></script>
10
11<style type="text/css">
12@import url(htmlarea.css);
13
14html, body {
15  font-family: Verdana,sans-serif;
16  background-color: #fea;
17  color: #000;
18}
19a:link, a:visited { color: #00f; }
20a:hover { color: #048; }
21a:active { color: #f00; }
22
23textarea { background-color: #fff; border: 1px solid 00f; }
24</style>
25
26<script type="text/javascript">
27var editor = null;
28function initEditor() {
29  editor = new HTMLArea("ta");
30
31  // comment the following two lines to see how customization works
32  editor.generate();
33  return false;
34
35  var cfg = editor.config; // this is the default configuration
36  cfg.registerButton({
37    id        : "my-hilite",
38    tooltip   : "Highlight text",
39    image     : "ed_custom.gif",
40    textMode  : false,
41    action    : function(editor) {
42                  editor.surroundHTML("<span class=\"hilite\">", "</span>");
43                },
44    context   : 'table'
45  });
46
47  cfg.toolbar.push(["linebreak", "my-hilite"]); // add the new button to the toolbar
48
49  // BEGIN: code that adds a custom button
50  // uncomment it to test
51  var cfg = editor.config; // this is the default configuration
52  /*
53  cfg.registerButton({
54    id        : "my-hilite",
55    tooltip   : "Highlight text",
56    image     : "ed_custom.gif",
57    textMode  : false,
58    action    : function(editor) {
59                  editor.surroundHTML("<span class=\"hilite\">", "</span>");
60                }
61  });
62  */
63
64function clickHandler(editor, buttonId) {
65  switch (buttonId) {
66    case "my-toc":
67      editor.insertHTML("<h1>Table Of Contents</h1>");
68      break;
69    case "my-date":
70      editor.insertHTML((new Date()).toString());
71      break;
72    case "my-bold":
73      editor.execCommand("bold");
74      editor.execCommand("italic");
75      break;
76    case "my-hilite":
77      editor.surroundHTML("<span class=\"hilite\">", "</span>");
78      break;
79  }
80};
81cfg.registerButton("my-toc",  "Insert TOC", "ed_custom.gif", false, clickHandler);
82cfg.registerButton("my-date", "Insert date/time", "ed_custom.gif", false, clickHandler);
83cfg.registerButton("my-bold", "Toggle bold/italic", "ed_custom.gif", false, clickHandler);
84cfg.registerButton("my-hilite", "Hilite selection", "ed_custom.gif", false, clickHandler);
85
86cfg.registerButton("my-sample", "Class: sample", "ed_custom.gif", false,
87  function(editor) {
88    if (HTMLArea.is_ie) {
89      editor.insertHTML("<span class=\"sample\">&nbsp;&nbsp;</span>");
90      var r = editor._doc.selection.createRange();
91      r.move("character", -2);
92      r.moveEnd("character", 2);
93      r.select();
94    } else { // Gecko/W3C compliant
95      var n = editor._doc.createElement("span");
96      n.className = "sample";
97      editor.insertNodeAtSelection(n);
98      var sel = editor._iframe.contentWindow.getSelection();
99      sel.removeAllRanges();
100      var r = editor._doc.createRange();
101      r.setStart(n, 0);
102      r.setEnd(n, 0);
103      sel.addRange(r);
104    }
105  }
106);
107
108
109  /*
110  cfg.registerButton("my-hilite", "Highlight text", "ed_custom.gif", false,
111    function(editor) {
112      editor.surroundHTML('<span class="hilite">', '</span>');
113    }
114  );
115  */
116  cfg.pageStyle = "body { background-color: #efd; } .hilite { background-color: yellow; } "+
117                  ".sample { color: green; font-family: monospace; }";
118  cfg.toolbar.push(["linebreak", "my-toc", "my-date", "my-bold", "my-hilite", "my-sample"]); // add the new button to the toolbar
119  // END: code that adds a custom button
120
121  editor.generate();
122}
123function insertHTML() {
124  var html = prompt("Enter some HTML code here");
125  if (html) {
126    editor.insertHTML(html);
127  }
128}
129function highlight() {
130  editor.surroundHTML('<span style="background-color: yellow">', '</span>');
131}
132</script>
133
134</head>
135
136<!-- use <body onload="HTMLArea.replaceAll()" if you don't care about
137     customizing the editor.  It's the easiest way! :) -->
138<body onload="initEditor()">
139
140<h1>HTMLArea 3.0</h1>
141
142<p>A replacement for <code>TEXTAREA</code> elements.  &copy; <a
143href="http://interactivetools.com">InteractiveTools.com</a>, 2003.</p>
144
145<form action="test.cgi" method="post" id="edit" name="edit">
146
147<textarea id="ta" name="ta" style="width:100%" rows="20" cols="80">
148  &lt;p&gt;Here is some sample text: &lt;b&gt;bold&lt;/b&gt;, &lt;i&gt;italic&lt;/i&gt;, &lt;u&gt;underline&lt;/u&gt;. &lt;/p&gt;
149  &lt;p align=center&gt;Different fonts, sizes and colors (all in bold):&lt;/p&gt;
150  &lt;p&gt;&lt;b&gt;
151   &lt;font face="arial"           size="7" color="#000066"&gt;arial&lt;/font&gt;,
152   &lt;font face="courier new"     size="6" color="#006600"&gt;courier new&lt;/font&gt;,
153   &lt;font face="georgia"         size="5" color="#006666"&gt;georgia&lt;/font&gt;,
154   &lt;font face="tahoma"          size="4" color="#660000"&gt;tahoma&lt;/font&gt;,
155   &lt;font face="times new roman" size="3" color="#660066"&gt;times new roman&lt;/font&gt;,
156   &lt;font face="verdana"         size="2" color="#666600"&gt;verdana&lt;/font&gt;,
157   &lt;font face="tahoma"          size="1" color="#666666"&gt;tahoma&lt;/font&gt;
158  &lt;/b&gt;&lt;/p&gt;
159  &lt;p&gt;Click on &lt;a href="http://www.interactivetools.com/"&gt;this link&lt;/a&gt; and then on the link button to the details ... OR ... select some text and click link to create a &lt;b&gt;new&lt;/b&gt; link.&lt;/p&gt;
160</textarea>
161
162<p />
163
164<input type="submit" name="ok" value="  submit  " />
165<input type="button" name="ins" value="  insert html  " onclick="return insertHTML();" />
166<input type="button" name="hil" value="  highlight text  " onclick="return highlight();" />
167
168<a href="javascript:mySubmit()">submit</a>
169
170<script type="text/javascript">
171function mySubmit() {
172// document.edit.save.value = "yes";
173document.edit.onsubmit(); // workaround browser bugs.
174document.edit.submit();
175};
176</script>
177
178</form>
179
180</body>
181</html>
Note: See TracBrowser for help on using the repository browser.