root / trunk / examples / full_example-body.html @ 208

Revision 208, 8.0 kB (checked in by gocher, 8 years ago)

for mozilla alternate stylesheets and for IE the first one

  • Property svn:eol-style set to native
  • Property svn:keywords set to LastChangedDate LastChangedRevision LastChangedBy HeadURL Id
Line 
1<html>
2<head>
3
4  <!--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
5    --  Xinha example usage.  This file shows how a developer might make use of
6    --  Xinha, it forms the primary example file for the entire Xinha project.
7    --  This file can be copied and used as a template for development by the
8    --  end developer who should simply removed the area indicated at the bottom
9    --  of the file to remove the auto-example-generating code and allow for the
10    --  use of the file as a boilerplate.
11    --
12    --  $HeadURL$
13    --  $LastChangedDate$
14    --  $LastChangedRevision$
15    --  $LastChangedBy$
16    --------------------------------------------------------------------------->
17
18  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
19  <title>Example of Xinha</title>
20  <link rel="stylesheet" href="full_example.css" />
21
22  <script type="text/javascript">
23    // You must set _editor_url to the URL (including trailing slash) where
24    // where xinha is installed, it's highly recommended to use an absolute URL
25    //  eg: _editor_url = "/path/to/xinha/";
26    // You may try a relative URL if you wish]
27    //  eg: _editor_url = "../";
28    // in this example we do a little regular expression to find the absolute path.
29    _editor_url  = document.location.href.replace(/examples\/full_example-body\.html.*/, '')
30    _editor_lang = "en";      // And the language we need to use in the editor.
31  </script>
32
33  <!-- Load up the actual editor core -->
34  <script type="text/javascript" src="../htmlarea.js"></script>
35
36  <script type="text/javascript">
37    xinha_editors = null;
38    xinha_init    = null;
39    xinha_config  = null;
40    xinha_plugins = null;
41
42    // This contains the names of textareas we will make into Xinha editors
43    xinha_init = xinha_init ? xinha_init : function()
44    {
45      /** STEP 1 ***************************************************************
46       * First, what are the plugins you will be using in the editors on this
47       * page.  List all the plugins you will need, even if not all the editors
48       * will use all the plugins.
49       ************************************************************************/
50
51      xinha_plugins = xinha_plugins ? xinha_plugins :
52      [
53       'CharacterMap',
54       'ContextMenu',
55       'FullScreen',
56       'ListType',
57       'SpellChecker',
58       'Stylist',
59       'SuperClean',
60       'TableOperations'
61      ];
62
63             // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :)
64             if(!HTMLArea.loadPlugins(xinha_plugins, xinha_init)) return;
65
66      /** STEP 2 ***************************************************************
67       * Now, what are the names of the textareas you will be turning into
68       * editors?
69       ************************************************************************/
70
71      xinha_editors = xinha_editors ? xinha_editors :
72      [
73        'myTextArea',
74        'anotherOne'
75      ];
76
77      /** STEP 3 ***************************************************************
78       * We create a default configuration to be used by all the editors.
79       * If you wish to configure some of the editors differently this will be
80       * done in step 5.
81       *
82       * If you want to modify the default config you might do something like this.
83       *
84       *   xinha_config = new HTMLArea.Config();
85       *   xinha_config.width  = '640px';
86       *   xinha_config.height = '420px';
87       *
88       *************************************************************************/
89
90       xinha_config = xinha_config ? xinha_config() : new HTMLArea.Config();
91
92      /** STEP 4 ***************************************************************
93       * We first create editors for the textareas.
94       *
95       * You can do this in two ways, either
96       *
97       *   xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);
98       *
99       * if you want all the editor objects to use the same set of plugins, OR;
100       *
101       *   xinha_editors = HTMLArea.makeEditors(xinha_editors, xinha_config);
102       *   xinha_editors['myTextArea'].registerPlugins(['Stylist','FullScreen']);
103       *   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']);
104       *
105       * if you want to use a different set of plugins for one or more of the
106       * editors.
107       ************************************************************************/
108
109      xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);
110
111      /** STEP 5 ***************************************************************
112       * If you want to change the configuration variables of any of the
113       * editors,  this is the place to do that, for example you might want to
114       * change the width and height of one of the editors, like this...
115       *
116       *   xinha_editors.myTextArea.config.width  = '640px';
117       *   xinha_editors.myTextArea.config.height = '480px';
118       *
119       ************************************************************************/
120
121
122      /** STEP 6 ***************************************************************
123       * Finally we "start" the editors, this turns the textareas into
124       * Xinha editors.
125       ************************************************************************/
126
127      HTMLArea.startEditors(xinha_editors);
128    }
129
130    window.onload = xinha_init;
131  </script>
132  <link type="text/css" rel="stylesheet" title="blue-look" href="../skins/blue-look/skin.css" />
133  <link type="text/css" rel="alternate stylesheet" title="green-look" href="../skins/green-look/skin.css" />
134  <link type="text/css" rel="alternate stylesheet" title="xp-blue" href="../skins/xp-blue/skin.css" />
135  <link type="text/css" rel="alternate stylesheet" title="xp-green" href="../skins/xp-green/skin.css" />
136  <link type="text/css" rel="alternate stylesheet" title="inditreuse" href="../skins/inditreuse/skin.css" />
137  <link type="text/css" rel="alternate stylesheet" title="blue-metallic" href="../skins/blue-metallic/skin.css" />
138</head>
139
140<body>
141
142  <form id="editors_here" onsubmit="alert(this.myTextArea0.value);">
143    <textarea id="myTextArea" name="myTextArea" rows="10" cols="80" style="width:100%"></textarea>
144    <textarea id="anotherOne" name="anotherOne" rows="10" cols="80" style="width:100%"></textarea>
145  </form>
146
147
148  <!----------------------------------------------------------------------------
149    -                            !! IMPORTANT !!
150    -  The html and javascript below is the code used to create the example page.
151    -  It renders a lot of the above unused because it pre-fills xinha_editors,
152    -  xinha_config and xinha_plugins for you, and creates new textareas in place
153    -  of the ones above. The items above are not used while the example is being
154    -  used!
155    -
156    -  If you are going to take the code in this file to form the basis of your
157    -  own, then leave out this marked area.
158    --------------------------------------------------------------------------->
159
160        <div id="lipsum" style="display:none">
161          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
162          Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis
163          velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique
164          ante elementum turpis. Aliquam nisl. Nulla posuere neque non
165          tellus. Morbi vel nibh. Cum sociis natoque penatibus et magnis dis
166          parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi.
167          Curabitur pharetra bibendum lectus.</p>
168
169          <ul>
170            <li> Phasellus et massa sed diam viverra semper.  </li>
171            <li> Mauris tincidunt felis in odio.              </li>
172            <li> Nulla placerat nunc ut pede.                 </li>
173            <li> Vivamus ultrices mi sit amet urna.           </li>
174            <li> Quisque sed augue quis nunc laoreet volutpat.</li>
175            <li> Nunc sit amet metus in tortor semper mattis. </li>
176          </ul>
177        </div>
178        <script src="full_example.js"></script>
179
180  <!--------------------------------------------------------------------------->
181
182
183</body>
184</html>
Note: See TracBrowser for help on using the browser.