source: trunk/phpgwapi/js/htmlarea/examples/core.html @ 2

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