source: trunk/examples/ext_example-body.html @ 480

Last change on this file since 480 was 433, checked in by gocher, 14 years ago

Changes to CharCounter? Plugin
and updates of extended example to check it
File size: 8.7 KB
Line 
1<!DOCTYPE BHTML PUBLIC "-//BC//DTD BHTML 3.2 Final//EN">
2<html>
3<head>
4
5  <!-- ---------------------------------------------------------------------
6    --  $HeadURL: http://svn.xinha.python-hosting.com/trunk/examples/ext_example-body.html $
7    --  $LastChangedDate: 2005-07-27 16:43:19 +0200 (Mi, 27 Jul 2005) $
8    --  $LastChangedRevision: 287 $
9    --  $LastChangedBy: gocher $
10    ------------------------------------------------------------------------ -->
11
12  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
13  <title>Example of Xinha</title>
14  <link rel="stylesheet" href="full_example.css" />
15
16  <script type="text/javascript">
17    function showError( sMsg, sUrl, sLine){
18      document.getElementById('errors').value += 'Error: ' + sMsg + '\n' +
19                                                 'Source File: ' + sUrl + '\n' +
20                                                 'Line: ' + sLine + '\n';
21      return false;
22    }
23    var f = top.frames["menu"].document.forms["fsettings"];
24    // You must set _editor_url to the URL (including trailing slash) where
25    // where xinha is installed, it's highly recommended to use an absolute URL
26    //  eg: _editor_url = "/path/to/xinha/";
27    // You may try a relative URL if you wish]
28    //  eg: _editor_url = "../";
29    // in this example we do a little regular expression to find the absolute path.
30    _editor_url  = document.location.href.replace(/examples\/ext_example-body\.html.*/, '')
31    _editor_lang = f.lang[f.lang.selectedIndex].value; // the language we need to use in the editor.
32    _editor_skin = f.skin[f.skin.selectedIndex].value; // the skin we use in the editor
33  </script>
34
35  <!-- Load up the actual editor core -->
36  <script type="text/javascript" src="../htmlarea.js"></script>
37
38  <script type="text/javascript">
39    xinha_editors = null;
40    xinha_init    = null;
41    xinha_config  = null;
42    xinha_plugins = null;
43   
44    xinha_init = xinha_init ? xinha_init : function() {
45      window.onerror = showError;
46      document.onerror = showError;
47
48      var f = top.frames["menu"].document.forms["fsettings"];
49// What are the plugins you will be using in the editors on this page.
50// List all the plugins you will need, even if not all the editors will use all the plugins.
51      xinha_plugins = [ ];
52      for(var x = 0; x < f.plugins.length; x++) {
53        if(f.plugins[x].checked) xinha_plugins.push(f.plugins[x].value);
54      }
55
56      // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :)
57      if(!HTMLArea.loadPlugins(xinha_plugins, xinha_init)) return;
58
59// What are the names of the textareas you will be turning into editors?
60      var num = 1;
61      num = parseInt(f.num.value);
62      if(isNaN(num)) {
63        num = 1;
64        f.num.value = 1;
65      }
66      var dest = document.getElementById("editors_here");
67      var lipsum = window.parent.menu.document.getElementById('myTextarea0').value;
68
69      xinha_editors = [ ]
70      for(var x = 0; x < num; x++) {
71        var ta = 'myTextarea' + x;
72        xinha_editors.push(ta);
73       
74        var div = document.createElement('div');
75        div.className = 'area_holder';
76
77        var txta = document.createElement('textarea');
78        txta.id   = ta;
79        txta.name = ta;
80        txta.value = lipsum;
81        txta.style.width="100%";
82        txta.style.height="420px";
83
84        div.appendChild(txta);
85        dest.appendChild(div);
86      }
87
88// Create a default configuration to be used by all the editors.
89      settings = top.frames["menu"].settings;
90      xinha_config = new HTMLArea.Config();
91      xinha_config.width = settings.width;
92      xinha_config.height = settings.height;
93      xinha_config.sizeIncludesBars = settings.sizeIncludesBars;
94      xinha_config.statusBar = settings.statusBar;
95      xinha_config.mozParaHandler = settings.mozParaHandler;
96      xinha_config.undoSteps = settings.undoSteps;
97      xinha_config.baseHref = settings.baseHref;
98      xinha_config.stripBaseHref = settings.stripBaseHref;
99      xinha_config.stripSelfNamedAnchors = settings.stripSelfNamedAnchors;
100      xinha_config.only7BitPrintablesInURLs = settings.only7BitPrintablesInURLs;
101      xinha_config.sevenBitClean = settings.sevenBitClean;
102      xinha_config.killWordOnPaste = settings.killWordOnPaste;
103      xinha_config.flowToolbars = settings.flowToolbars;
104      xinha_config.showLoading = settings.showLoading;
105
106      if (typeof CharCounter != 'undefined') {
107        xinha_config.CharCounter.showChar = settings.showChar;
108        xinha_config.CharCounter.showWord = settings.showWord;
109        xinha_config.CharCounter.showHtml = settings.showHtml;
110      }
111
112      if (typeof CharacterMap != 'undefined') xinha_config.CharacterMap.mode = settings.CharacterMapMode;
113      if (typeof ListType != 'undefined') xinha_config.ListType.mode = settings.ListTypeMode;
114
115      if(typeof CSS != 'undefined') {
116        xinha_config.pageStyle = "@import url(custom.css);";
117      }
118
119      if(typeof Stylist != 'undefined') {
120        // We can load an external stylesheet like this - NOTE : YOU MUST GIVE AN ABSOLUTE URL
121        //  otherwise it won't work!
122        xinha_config.stylistLoadStylesheet(document.location.href.replace(/[^\/]*\.html/, 'stylist.css'));
123
124        // Or we can load styles directly
125        xinha_config.stylistLoadStyles('p.red_text { color:red }');
126
127        // If you want to provide "friendly" names you can do so like
128        // (you can do this for stylistLoadStylesheet as well)
129        xinha_config.stylistLoadStyles('p.pink_text { color:pink }', {'p.pink_text' : 'Pretty Pink'});
130      }
131
132      if(typeof DynamicCSS != 'undefined') {
133        xinha_config.pageStyle = "@import url(dynamic.css);";
134      }
135
136      if(typeof InsertWords != 'undefined') {
137        // Register the keyword/replacement list
138        var keywrds1 = new Object();
139        var keywrds2 = new Object();
140
141        keywrds1['-- Dropdown Label --'] = '';
142        keywrds1['onekey'] = 'onevalue';
143        keywrds1['twokey'] = 'twovalue';
144        keywrds1['threekey'] = 'threevalue';
145
146        keywrds2['-- Insert Keyword --'] = '';
147        keywrds2['Username'] = '%user%';
148        keywrds2['Last login date'] = '%last_login%';
149        xinha_config.InsertWords = {
150          combos : [ { options: keywrds1, context: "body" },
151                     { options: keywrds2, context: "li" } ]
152        }
153      }
154
155      if(typeof InsertPicture != 'undefined') {
156        // Path for InsertPicture plugin
157        InsertPicture.PicturePath = '/schmal/pictures/';
158      }
159
160      if(typeof Filter != 'undefined') {
161        xinha_config.Filters = ["Word", "Paragraph"];
162      }
163
164// First create editors for the textareas.
165// You can do this in two ways, either
166//   xinha_editors   = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);
167// if you want all the editor objects to use the same set of plugins, OR;
168//   xinha_editors = HTMLArea.makeEditors(xinha_editors, xinha_config);
169//   xinha_editors['myTextArea'].registerPlugins(['Stylist','FullScreen']);
170//   xinha_editors['anotherOne'].registerPlugins(['CSS','SuperClean']);
171// if you want to use a different set of plugins for one or more of the editors.
172      xinha_editors = HTMLArea.makeEditors(xinha_editors, xinha_config, xinha_plugins);
173
174// If you want to change the configuration variables of any of the editors, 
175// this is the place to do that, for example you might want to
176// change the width and height of one of the editors, like this...
177//   xinha_editors.myTextArea.config.width  = '640px';
178//   xinha_editors.myTextArea.config.height = '480px';
179
180// Finally we "start" the editors, this turns the textareas into Xinha editors.
181      HTMLArea.startEditors(xinha_editors);
182    }
183
184// javascript submit handler
185// this shows how to create a javascript submit button that works with the htmleditor.
186    submitHandler = function(formname) {
187      var form = document.getElementById(formname);
188      // in order for the submit to work both of these methods have to be called.
189      form.onsubmit();
190      window.parent.menu.document.getElementById('myTextarea0').value = document.getElementById('myTextarea0').value;
191      form.submit();
192      return true;
193    }
194
195    window.onload = xinha_init;
196//    window.onunload = HTMLArea.collectGarbageForIE;
197  </script>
198</head>
199
200<body>
201  <form id="to_submit" name="to_submit" method="post" action="ext_example-dest.php">
202  <div id="editors_here" name="editors_here"></div>
203  <button type="button" onclick="submitHandler('to_submit');">Submit</button>
204  <textarea id="errors" name="errors" style="width:100%; height:100px; background:silver;"></textarea><!-- style="display:none;" -->
205  </form>
206</body>
207</html>
Note: See TracBrowser for help on using the repository browser.