source: trunk/examples/core.html @ 1

Last change on this file since 1 was 1, checked in by xinha, 15 years ago

Bootstrap

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