source: trunk/examples/testbed.html @ 1321

Last change on this file since 1321 was 1197, checked in by gogo, 10 years ago

Ticket #1446
( Left in a path specific to my system in the testbed. )

  • Property svn:keywords set to LastChangedDate LastChangedRevision LastChangedBy HeadURL Id
File size: 8.3 KB
RevLine 
[232]1<?xml version="1.0" encoding="UTF-8"?>
[260]2<!DOCTYPE html
[232]3     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
4    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
5<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
[166]6<head>
7
8  <!--------------------------------------:noTabs=true:tabSize=2:indentSize=2:--
9    --  Xinha example usage.  This file shows how a developer might make use of
10    --  Xinha, it forms the primary example file for the entire Xinha project.
11    --  This file can be copied and used as a template for development by the
12    --  end developer who should simply removed the area indicated at the bottom
13    --  of the file to remove the auto-example-generating code and allow for the
14    --  use of the file as a boilerplate.
15    --
[1084]16    --  $HeadURL$
17    --  $LastChangedDate$
18    --  $LastChangedRevision$
19    --  $LastChangedBy$
[166]20    --------------------------------------------------------------------------->
21
22  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
23  <title>Example of Xinha</title>
[1050]24  <link rel="stylesheet" href="files/full_example.css" />
[166]25
26  <script type="text/javascript">
27    // You must set _editor_url to the URL (including trailing slash) where
28    // where xinha is installed, it's highly recommended to use an absolute URL
29    //  eg: _editor_url = "/path/to/xinha/";
30    // You may try a relative URL if you wish]
31    //  eg: _editor_url = "../";
32    // in this example we do a little regular expression to find the absolute path.
33    _editor_url  = document.location.href.replace(/examples\/.*/, '')
34    _editor_lang = "en";      // And the language we need to use in the editor.
35  </script>
36
37  <!-- Load up the actual editor core -->
[897]38  <script type="text/javascript" src="../XinhaCore.js"></script>
[166]39
40  <script type="text/javascript">
41    xinha_editors = null;
42    xinha_init    = null;
43    xinha_config  = null;
44    xinha_plugins = null;
45
46    // This contains the names of textareas we will make into Xinha editors
47    xinha_init = xinha_init ? xinha_init : function()
48    {
49      /** STEP 1 ***************************************************************
50       * First, what are the plugins you will be using in the editors on this
51       * page.  List all the plugins you will need, even if not all the editors
52       * will use all the plugins.
53       ************************************************************************/
54
55      xinha_plugins = xinha_plugins ? xinha_plugins :
56      [
[1196]57        'CharacterMap', 'SpellChecker', 'Linker', 'ContextMenu'
[166]58      ];
59             // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :)
[649]60             if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return;
[166]61
62      /** STEP 2 ***************************************************************
63       * Now, what are the names of the textareas you will be turning into
64       * editors?
65       ************************************************************************/
66
67      xinha_editors = xinha_editors ? xinha_editors :
68      [
69        'myTextArea'
70      ];
71
72      /** STEP 3 ***************************************************************
73       * We create a default configuration to be used by all the editors.
74       * If you wish to configure some of the editors differently this will be
75       * done in step 4.
76       *
77       * If you want to modify the default config you might do something like this.
78       *
[649]79       *   xinha_config = new Xinha.Config();
[166]80       *   xinha_config.width  = 640;
81       *   xinha_config.height = 420;
82       *
83       *************************************************************************/
84
[649]85       xinha_config = xinha_config ? xinha_config : new Xinha.Config();
[661]86       xinha_config.fullPage = true;
[664]87       xinha_config.CharacterMap.mode = 'panel';
[1197]88       xinha_config.ContextMenu.customHooks = { 'a': [ ['Label', function() { alert('Action'); }, 'Tooltip', '/xinha/images/ed_copy.gif' ] ] }
[277]89/*
90       // We can load an external stylesheet like this - NOTE : YOU MUST GIVE AN ABSOLUTE URL
91      //  otherwise it won't work!
[1050]92      xinha_config.stylistLoadStylesheet(document.location.href.replace(/[^\/]*\.html/, 'files/stylist.css'));
[166]93
[277]94      // Or we can load styles directly
95      xinha_config.stylistLoadStyles('p.red_text { color:red }');
96
97      // If you want to provide "friendly" names you can do so like
98      // (you can do this for stylistLoadStylesheet as well)
99      xinha_config.stylistLoadStyles('p.pink_text { color:pink }', {'p.pink_text' : 'Pretty Pink'});
100*/
[166]101      /** STEP 3 ***************************************************************
102       * We first create editors for the textareas.
103       *
104       * You can do this in two ways, either
105       *
[649]106       *   xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
[166]107       *
108       * if you want all the editor objects to use the same set of plugins, OR;
109       *
[649]110       *   xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config);
[836]111       *   xinha_editors['myTextArea'].registerPlugins(['Stylist']);
[166]112       *   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']);
113       *
114       * if you want to use a different set of plugins for one or more of the
115       * editors.
116       ************************************************************************/
117
[649]118      xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
[166]119
120      /** STEP 4 ***************************************************************
121       * If you want to change the configuration variables of any of the
122       * editors,  this is the place to do that, for example you might want to
123       * change the width and height of one of the editors, like this...
124       *
125       *   xinha_editors.myTextArea.config.width  = 640;
126       *   xinha_editors.myTextArea.config.height = 480;
127       *
128       ************************************************************************/
129
130
131      /** STEP 5 ***************************************************************
132       * Finally we "start" the editors, this turns the textareas into
133       * Xinha editors.
134       ************************************************************************/
135
[649]136      Xinha.startEditors(xinha_editors);
[177]137      window.onload = null;
[166]138    }
139
[177]140    window.onload   = xinha_init;
[166]141  </script>
142</head>
143
144<body>
145
[893]146  <form action="javascript:void(0);" id="editors_here" onsubmit="alert(this.myTextArea.value);">
[858]147 <div>
148     <textarea id="myTextArea" name="myTextArea" style="width:100%;height:320px;">
[661]149      &lt;html&gt;
150      &lt;head&gt;
151        &lt;title&gt;Hello&lt;/title&gt;
152        &lt;style type="text/css"&gt;
153          li { color:red; }
154        &lt;/style&gt;
155      &lt;/head&gt;
[963]156      &lt;body&gt;&lt;span style="color:purple"&gt;
[962]157      &lt;img src="../images/xinha_logo.gif" usemap="#m1"&gt;
[662]158      &lt;map name="m1"&gt;
159      &lt;area shape="rect" coords="137,101,255,124" href="http://www.mydomain.com"&gt;
160      &lt;/map&gt;
161
[166]162      &lt;p&gt;
163        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
164        Aliquam et tellus vitae justo varius placerat. Suspendisse iaculis
165        velit semper dolor. Donec gravida tincidunt mi. Curabitur tristique
[987]166        ante elementum turpis.  &lt;span style="color:green"&gt;Aliquam &lt;/span&gt; nisl. Nulla posuere neque non
167        tellus. Morbi vel nibh. &lt;font face="Arial"&gt;&lt;font color="#009933"&gt;Cum  sociis natoque&lt;/font&gt;&lt;/font&gt; penatibus et magnis dis
[166]168        parturient montes, nascetur ridiculus mus. Nam nec wisi. In wisi.
169        Curabitur pharetra bibendum lectus.
170      &lt;/p&gt;
171
172      &lt;ul&gt;
[963]173        &lt;li style="color:green"&gt; Phasellus et massa sed diam viverra semper.  &lt;/li&gt;
[166]174        &lt;li&gt; Mauris tincidunt felis in odio.              &lt;/li&gt;
175        &lt;li&gt; Nulla placerat nunc ut pede.                 &lt;/li&gt;
176        &lt;li&gt; Vivamus ultrices mi sit amet urna.           &lt;/li&gt;
177        &lt;li&gt; Quisque sed augue quis nunc laoreet volutpat.&lt;/li&gt;
178        &lt;li&gt; Nunc sit amet metus in tortor semper mattis. &lt;/li&gt;
179      &lt;/ul&gt;
[963]180      &lt;/span&gt;&lt;/body&gt;
[661]181      &lt;/html&gt;
[166]182    </textarea>
183
[177]184    <input type="submit" /> <input type="reset" />
[858]185</div>
[166]186  </form>
[858]187  <script type="text/javascript">
[260]188    document.write(document.compatMode);
189  </script>
[858]190<div>
[277]191  <a href="#" onclick="xinha_editors.myTextArea.hidePanels();">Hide</a>
192  <a href="#" onclick="xinha_editors.myTextArea.showPanels();">Show</a>
[858]193</div>
[883]194
[166]195</body>
[883]196</html>
Note: See TracBrowser for help on using the repository browser.