source: trunk/examples/testbed.html @ 166

Last change on this file since 166 was 166, checked in by gogo, 14 years ago

There are 4 things in this commit...

  1. Resizing fixes.
  2. New "flowable" toolbar
  3. Proof of concept of skins.
  4. Testbed file.

Resizing Fixes

Complete rewrite of the framing that the editor is built from,
previously it was done using nested and positioned divs, which was very
troublesome to get right. It also suffered from problems when resizing
the editor.

I have changed it to now use a table structure and have fixed the
resizing problems. This also means we can now use any CSS measurement
for setting width and height (even percentages). Resizing is handled
very well, and generally it's just better all around.

The fullscreen plugin has been adjusted to use the new methods, which
makes it's job much easier too. This won't solve the problem with
fullscreen when the editor has been placed inside a positioned element
however.

Flowable Toolbar

A new config option has been added which allows the toolbar sections
(between separators) to be treated as "possible-line-break-here",
meaning that if there is not enough room on the line, the line will
break to put the section on the next line. Newlines are treated the
same way. Of course the toolbar will re-flow when you resize the
window.

This has been set as the default (and the toolbar has been adjusted to
better suit it) because the default toolbars can get pretty long as you
add plugins. Having the flowing toolbars alleviates this problem and
allows a very small editor window :)

Skins

Ok, well, it's just a CSS file and a couple of images, but it shows the
sort of thing we can already do. I felt that this is something that
people would want to see. What I'd like in the future is to be able to
have a config option per editor to select what skin it gets, but this
will necessitate some extra work so we can have different styles apply
to each editor on a multi-editor page.

The other thing that would be nice is to be able to style the select
lists in the toolbar, which are pretty ugly.

I've set the "blue-look" skin to be used in the full example.

Testbed

This is just a simple html file using Xinha without all the extra stuff
in the full_example. You can use it to test your plugins etc, or users
could take it as a boilerplate file.
File size: 6.5 KB
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: svn://gogo@xinha.gogo.co.nz/repository/trunk/examples/full_example-body.html $
13    --  $LastChangedDate: 2005-03-05 21:42:32 +1300 (Sat, 05 Mar 2005) $
14    --  $LastChangedRevision: 35 $
15    --  $LastChangedBy: gogo $
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\/.*/, '')
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      'FullScreen',
54      'TableOperations'
55      ];
56             // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :)
57             if(!HTMLArea.loadPlugins(xinha_plugins, xinha_init)) return;
58
59      /** STEP 2 ***************************************************************
60       * Now, what are the names of the textareas you will be turning into
61       * editors?
62       ************************************************************************/
63
64      xinha_editors = xinha_editors ? xinha_editors :
65      [
66        'myTextArea'
67      ];
68
69      /** STEP 3 ***************************************************************
70       * We create a default configuration to be used by all the editors.
71       * If you wish to configure some of the editors differently this will be
72       * done in step 4.
73       *
74       * If you want to modify the default config you might do something like this.
75       *
76       *   xinha_config = new HTMLArea.Config();
77       *   xinha_config.width  = 640;
78       *   xinha_config.height = 420;
79       *
80       *************************************************************************/
81
82       xinha_config = xinha_config ? xinha_config : new HTMLArea.Config();
83
84      /** STEP 3 ***************************************************************
85       * We first create editors for the textareas.
86       *
87       * You can do this in two ways, either
88       *
89       *   xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);
90       *
91       * if you want all the editor objects to use the same set of plugins, OR;
92       *
93       *   xinha_editors = HTMLArea.makeEditors(xinha_editors, xinha_config);
94       *   xinha_editors['myTextArea'].registerPlugins(['Stylist','FullScreen']);
95       *   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']);
96       *
97       * if you want to use a different set of plugins for one or more of the
98       * editors.
99       ************************************************************************/
100
101      xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);
102
103      /** STEP 4 ***************************************************************
104       * If you want to change the configuration variables of any of the
105       * editors,  this is the place to do that, for example you might want to
106       * change the width and height of one of the editors, like this...
107       *
108       *   xinha_editors.myTextArea.config.width  = 640;
109       *   xinha_editors.myTextArea.config.height = 480;
110       *
111       ************************************************************************/
112
113
114      /** STEP 5 ***************************************************************
115       * Finally we "start" the editors, this turns the textareas into
116       * Xinha editors.
117       ************************************************************************/
118
119      HTMLArea.startEditors(xinha_editors);
120    }
121
122    window.onload = xinha_init;
123  </script>
124</head>
125
126<body>
127
128  <form action="javascript:var x = document.getElementById('editors_here');alert(x.myTextArea.value);" id="editors_here" onsubmit="alert(this.myTextArea.value);">
129    <textarea id="myTextArea" name="myTextArea" style="width:100%;height:320">
130      &lt;p&gt;
131        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
132        Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis
133        velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique
134        ante elementum turpis. Aliquam nisl. Nulla posuere neque non
135        tellus. Morbi vel nibh. Cum sociis natoque penatibus et magnis dis
136        parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi.
137        Curabitur pharetra bibendum lectus.
138      &lt;/p&gt;
139
140      &lt;ul&gt;
141        &lt;li&gt; Phasellus et massa sed diam viverra semper.  &lt;/li&gt;
142        &lt;li&gt; Mauris tincidunt felis in odio.              &lt;/li&gt;
143        &lt;li&gt; Nulla placerat nunc ut pede.                 &lt;/li&gt;
144        &lt;li&gt; Vivamus ultrices mi sit amet urna.           &lt;/li&gt;
145        &lt;li&gt; Quisque sed augue quis nunc laoreet volutpat.&lt;/li&gt;
146        &lt;li&gt; Nunc sit amet metus in tortor semper mattis. &lt;/li&gt;
147      &lt;/ul&gt;
148    </textarea>
149
150    <input type="submit" />
151  </form>
152
153</body>
154</html>
Note: See TracBrowser for help on using the repository browser.