source: trunk/examples/files/ext_example-body.html @ 1050

Last change on this file since 1050 was 1050, checked in by ray, 11 years ago
  • Property svn:keywords set to LastChangedDate LastChangedRevision LastChangedBy HeadURL Id
File size: 9.3 KB
RevLine 
[324]1<!DOCTYPE BHTML PUBLIC "-//BC//DTD BHTML 3.2 Final//EN">
2<html>
3<head>
4
[336]5  <!-- ---------------------------------------------------------------------
[999]6    --  $HeadURL:http://svn.xinha.webfactional.com/trunk/examples/files/ext_example-body.html $
7    --  $LastChangedDate:2008-02-04 01:43:21 +0100 (Mo, 04 Feb 2008) $
8    --  $LastChangedRevision:962 $
9    --  $LastChangedBy:ray $
[336]10    ------------------------------------------------------------------------ -->
[324]11
12  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
13  <title>Example of Xinha</title>
[686]14  <link rel="stylesheet" type="text/css" href="full_example.css" />
[324]15
16  <script type="text/javascript">
[353]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    }
[324]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.
[958]29    _editor_url  = document.location.href.replace(/examples\/files\/ext_example-body\.html.*/, '')
[686]30    //moved _editor_lang & _editor_skin to init function because of error thrown when frame document not ready
[324]31  </script>
32
33  <!-- Load up the actual editor core -->
[958]34  <script type="text/javascript" src="../../XinhaCore.js"></script>
[324]35
36  <script type="text/javascript">
37    xinha_editors = null;
38    xinha_init    = null;
39    xinha_config  = null;
40    xinha_plugins = null;
[514]41
[336]42    xinha_init = xinha_init ? xinha_init : function() {
[433]43      window.onerror = showError;
44      document.onerror = showError;
45
46      var f = top.frames["menu"].document.forms["fsettings"];
[612]47      _editor_lang = f.lang[f.lang.selectedIndex].value; // the language we need to use in the editor.
48      _editor_skin = f.skin[f.skin.selectedIndex].value; // the skin we use in the editor
[336]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      }
[324]55
[336]56      // THIS BIT OF JAVASCRIPT LOADS THE PLUGINS, NO TOUCHING  :)
[649]57      if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return;
[324]58
[336]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      }
[385]66      var dest = document.getElementById("editors_here");
[336]67      var lipsum = window.parent.menu.document.getElementById('myTextarea0').value;
[324]68
[336]69      xinha_editors = [ ]
70      for(var x = 0; x < num; x++) {
71        var ta = 'myTextarea' + x;
72        xinha_editors.push(ta);
[514]73
[336]74        var div = document.createElement('div');
75        div.className = 'area_holder';
[324]76
[336]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";
[324]83
[336]84        div.appendChild(txta);
[385]85        dest.appendChild(div);
[336]86      }
[324]87
[336]88// Create a default configuration to be used by all the editors.
[433]89      settings = top.frames["menu"].settings;
[649]90      xinha_config = new Xinha.Config();
[433]91      xinha_config.width = settings.width;
92      xinha_config.height = settings.height;
93      xinha_config.sizeIncludesBars = settings.sizeIncludesBars;
[845]94      xinha_config.sizeIncludesPanels = settings.sizeIncludesPanels;
[433]95      xinha_config.statusBar = settings.statusBar;
[845]96      xinha_config.htmlareaPaste = settings.htmlareaPaste;
[433]97      xinha_config.mozParaHandler = settings.mozParaHandler;
[845]98      xinha_config.getHtmlMethod = settings.getHtmlMethod;
[433]99      xinha_config.undoSteps = settings.undoSteps;
[845]100      xinha_config.undoTimeout = settings.undoTimeout;
101      xinha_config.changeJustifyWithDirection = settings.changeJustifyWithDirection;
102      xinha_config.fullPage = settings.fullPage;
103      xinha_config.pageStyle = settings.pageStyle;
[433]104      xinha_config.baseHref = settings.baseHref;
[845]105      xinha_config.expandRelativeUrl = settings.expandRelativeUrl;
[433]106      xinha_config.stripBaseHref = settings.stripBaseHref;
107      xinha_config.stripSelfNamedAnchors = settings.stripSelfNamedAnchors;
108      xinha_config.only7BitPrintablesInURLs = settings.only7BitPrintablesInURLs;
109      xinha_config.sevenBitClean = settings.sevenBitClean;
110      xinha_config.killWordOnPaste = settings.killWordOnPaste;
[845]111      xinha_config.makeLinkShowsTarget = settings.makeLinkShowsTarget;
[433]112      xinha_config.flowToolbars = settings.flowToolbars;
[845]113      xinha_config.stripScripts = settings.stripScripts;
114      xinha_config.flowToolbars = settings.flowToolbars;
[433]115      xinha_config.showLoading = settings.showLoading;
[1050]116      xinha_config.pageStyleSheets = ["full_example.css"];
[324]117
[845]118// Create a default configuration for the plugins
[433]119      if (typeof CharCounter != 'undefined') {
120        xinha_config.CharCounter.showChar = settings.showChar;
121        xinha_config.CharCounter.showWord = settings.showWord;
122        xinha_config.CharCounter.showHtml = settings.showHtml;
123      }
124
[845]125      if(typeof CharacterMap != 'undefined') xinha_config.CharacterMap.mode = settings.CharacterMapMode;
126      if(typeof ListType != 'undefined') xinha_config.ListType.mode = settings.ListTypeMode;
127      if(typeof CSS != 'undefined') xinha_config.pageStyle = xinha_config.pageStyle + "\n" + "@import url(custom.css);";
128      if(typeof DynamicCSS != 'undefined') xinha_config.pageStyle = "@import url(dynamic.css);";
129      if(typeof Filter != 'undefined') xinha_config.Filters = ["Word", "Paragraph"];
[433]130
[336]131      if(typeof Stylist != 'undefined') {
132        // We can load an external stylesheet like this - NOTE : YOU MUST GIVE AN ABSOLUTE URL
133        //  otherwise it won't work!
134        xinha_config.stylistLoadStylesheet(document.location.href.replace(/[^\/]*\.html/, 'stylist.css'));
[324]135
[336]136        // Or we can load styles directly
137        xinha_config.stylistLoadStyles('p.red_text { color:red }');
[324]138
[336]139        // If you want to provide "friendly" names you can do so like
140        // (you can do this for stylistLoadStylesheet as well)
141        xinha_config.stylistLoadStyles('p.pink_text { color:pink }', {'p.pink_text' : 'Pretty Pink'});
142      }
[324]143
[336]144      if(typeof InsertWords != 'undefined') {
145        // Register the keyword/replacement list
146        var keywrds1 = new Object();
147        var keywrds2 = new Object();
[324]148
[336]149        keywrds1['-- Dropdown Label --'] = '';
150        keywrds1['onekey'] = 'onevalue';
151        keywrds1['twokey'] = 'twovalue';
152        keywrds1['threekey'] = 'threevalue';
153
154        keywrds2['-- Insert Keyword --'] = '';
155        keywrds2['Username'] = '%user%';
156        keywrds2['Last login date'] = '%last_login%';
157        xinha_config.InsertWords = {
158          combos : [ { options: keywrds1, context: "body" },
159                     { options: keywrds2, context: "li" } ]
160        }
161      }
162
163// First create editors for the textareas.
164// You can do this in two ways, either
[649]165//   xinha_editors   = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
[336]166// if you want all the editor objects to use the same set of plugins, OR;
[649]167//   xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config);
[836]168//   xinha_editors['myTextarea0'].registerPlugins(['Stylist']);
[514]169//   xinha_editors['myTextarea1'].registerPlugins(['CSS','SuperClean']);
[336]170// if you want to use a different set of plugins for one or more of the editors.
[649]171      xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
[336]172
[514]173// If you want to change the configuration variables of any of the editors,
[336]174// this is the place to do that, for example you might want to
175// change the width and height of one of the editors, like this...
[514]176//   xinha_editors['myTextarea0'].config.width  = '640px';
177//   xinha_editors['myTextarea0'].config.height = '480px';
[336]178
179// Finally we "start" the editors, this turns the textareas into Xinha editors.
[649]180      Xinha.startEditors(xinha_editors);
[324]181    }
182
[433]183// javascript submit handler
184// this shows how to create a javascript submit button that works with the htmleditor.
185    submitHandler = function(formname) {
186      var form = document.getElementById(formname);
187      // in order for the submit to work both of these methods have to be called.
188      form.onsubmit();
189      window.parent.menu.document.getElementById('myTextarea0').value = document.getElementById('myTextarea0').value;
190      form.submit();
191      return true;
192    }
193
[324]194    window.onload = xinha_init;
[649]195//    window.onunload = Xinha.collectGarbageForIE;
[324]196  </script>
197</head>
198
199<body>
[433]200  <form id="to_submit" name="to_submit" method="post" action="ext_example-dest.php">
[858]201  <div id="editors_here"></div>
[433]202  <button type="button" onclick="submitHandler('to_submit');">Submit</button>
203  <textarea id="errors" name="errors" style="width:100%; height:100px; background:silver;"></textarea><!-- style="display:none;" -->
[324]204  </form>
205</body>
206</html>
Note: See TracBrowser for help on using the repository browser.