source: trunk/examples/stylist.html @ 12

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

Bootstrap

File size: 3.2 KB
RevLine 
[1]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="../lang/en.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;
32HTMLArea.loadPlugin("Stylist");
33HTMLArea.loadPlugin("SuperClean");
34HTMLArea.loadPlugin("FullScreen");
35HTMLArea.loadPlugin("Linker");
36
37function initEditor() {
38  editor = new HTMLArea("ta");
39  var cfg = editor.config;
40
41  editor.registerPlugin(SuperClean);
42  editor.registerPlugin(FullScreen);
43  editor.registerPlugin(Linker);
44
45
46  editor.registerPlugin(Stylist);
47
48  // We can load an external stylesheet like this - NOTE : YOU MUST GIVE AN ABSOLUTE URL
49  //  otherwise it won't work!
50  cfg.stylistLoadStylesheet(document.location.href.replace('stylist.html', 'stylist.css'));
51
52  // Or we can load styles directly
53  cfg.stylistLoadStyles('p.red_text { color:red }');
54
55  // If you want to provide "friendly" names you can do so like (you can do this for stylistLoadStylesheet as well)
56  cfg.stylistLoadStyles('p.pink_text { color:pink }', {'p.pink_text' : 'Pretty Pink'});
57
58  // That's it, pretty easy huh!
59  editor.generate();
60
61}
62
63</script>
64
65</head>
66
67<body onload="initEditor()">
68
69<h1>HTMLArea 3.0</h1>
70
71<p>A replacement for <code>TEXTAREA</code> elements.  &copy; <a
72href="http://interactivetools.com">InteractiveTools.com</a>, 2003.</p>
73
74<form action="test.cgi" method="post" id="edit" name="edit">
75
76<textarea id="ta" name="ta" style="width:100%" rows="20" cols="80">
77  &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;
78  &lt;p align=center&gt;Different fonts, sizes and colors (all in bold):&lt;/p&gt;
79  &lt;p&gt;&lt;b&gt;
80   &lt;font face="arial"           size="7" color="#000066"&gt;arial&lt;/font&gt;,
81   &lt;font face="courier new"     size="6" color="#006600"&gt;courier new&lt;/font&gt;,
82   &lt;font face="georgia"         size="5" color="#006666"&gt;georgia&lt;/font&gt;,
83   &lt;font face="tahoma"          size="4" color="#660000"&gt;tahoma&lt;/font&gt;,
84   &lt;font face="times new roman" size="3" color="#660066"&gt;times new roman&lt;/font&gt;,
85   &lt;font face="verdana"         size="2" color="#666600"&gt;verdana&lt;/font&gt;,
86   &lt;font face="tahoma"          size="1" color="#666666"&gt;tahoma&lt;/font&gt;
87  &lt;/b&gt;&lt;/p&gt;
88  &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;
89</textarea>
90
91</form>
92
93</body>
94</html>
Note: See TracBrowser for help on using the repository browser.