1 | <!DOCTYPE BHTML PUBLIC "-//BC//DTD BHTML 3.2 Final//EN">
|
---|
2 | <html>
|
---|
3 | <head>
|
---|
4 |
|
---|
5 | <!-- ---------------------------------------------------------------------
|
---|
6 | -- $HeadURL$
|
---|
7 | -- $LastChangedDate$
|
---|
8 | -- $LastChangedRevision$
|
---|
9 | -- $LastChangedBy$
|
---|
10 | ------------------------------------------------------------------------ -->
|
---|
11 |
|
---|
12 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
---|
13 | <title>Example of Xinha</title>
|
---|
14 | <link rel="stylesheet" type="text/css" 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 | // 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\/ext_example-body\.html.*/, '')
|
---|
30 | //moved _editor_lang & _editor_skin to init function because of error thrown when frame document not ready
|
---|
31 | </script>
|
---|
32 |
|
---|
33 | <!-- Load up the actual editor core -->
|
---|
34 | <script type="text/javascript" src="../XinhaCore.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 | xinha_init = xinha_init ? xinha_init : function() {
|
---|
43 | window.onerror = showError;
|
---|
44 | document.onerror = showError;
|
---|
45 |
|
---|
46 | var f = top.frames["menu"].document.forms["fsettings"];
|
---|
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
|
---|
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(!Xinha.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 Xinha.Config();
|
---|
91 | xinha_config.width = settings.width;
|
---|
92 | xinha_config.height = settings.height;
|
---|
93 | xinha_config.sizeIncludesBars = settings.sizeIncludesBars;
|
---|
94 | xinha_config.sizeIncludesPanels = settings.sizeIncludesPanels;
|
---|
95 | xinha_config.statusBar = settings.statusBar;
|
---|
96 | xinha_config.htmlareaPaste = settings.htmlareaPaste;
|
---|
97 | xinha_config.mozParaHandler = settings.mozParaHandler;
|
---|
98 | xinha_config.getHtmlMethod = settings.getHtmlMethod;
|
---|
99 | xinha_config.undoSteps = settings.undoSteps;
|
---|
100 | xinha_config.undoTimeout = settings.undoTimeout;
|
---|
101 | xinha_config.changeJustifyWithDirection = settings.changeJustifyWithDirection;
|
---|
102 | xinha_config.fullPage = settings.fullPage;
|
---|
103 | xinha_config.pageStyle = settings.pageStyle;
|
---|
104 | xinha_config.baseHref = settings.baseHref;
|
---|
105 | xinha_config.expandRelativeUrl = settings.expandRelativeUrl;
|
---|
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;
|
---|
111 | xinha_config.makeLinkShowsTarget = settings.makeLinkShowsTarget;
|
---|
112 | xinha_config.flowToolbars = settings.flowToolbars;
|
---|
113 | xinha_config.stripScripts = settings.stripScripts;
|
---|
114 | xinha_config.flowToolbars = settings.flowToolbars;
|
---|
115 | xinha_config.showLoading = settings.showLoading;
|
---|
116 | xinha_config.pageStyleSheets = ["own.css"];
|
---|
117 |
|
---|
118 | // Create a default configuration for the plugins
|
---|
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 |
|
---|
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"];
|
---|
130 |
|
---|
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'));
|
---|
135 |
|
---|
136 | // Or we can load styles directly
|
---|
137 | xinha_config.stylistLoadStyles('p.red_text { color:red }');
|
---|
138 |
|
---|
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 | }
|
---|
143 |
|
---|
144 | if(typeof InsertWords != 'undefined') {
|
---|
145 | // Register the keyword/replacement list
|
---|
146 | var keywrds1 = new Object();
|
---|
147 | var keywrds2 = new Object();
|
---|
148 |
|
---|
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
|
---|
165 | // xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
|
---|
166 | // if you want all the editor objects to use the same set of plugins, OR;
|
---|
167 | // xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config);
|
---|
168 | // xinha_editors['myTextarea0'].registerPlugins(['Stylist']);
|
---|
169 | // xinha_editors['myTextarea1'].registerPlugins(['CSS','SuperClean']);
|
---|
170 | // if you want to use a different set of plugins for one or more of the editors.
|
---|
171 | xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);
|
---|
172 |
|
---|
173 | // If you want to change the configuration variables of any of the editors,
|
---|
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...
|
---|
176 | // xinha_editors['myTextarea0'].config.width = '640px';
|
---|
177 | // xinha_editors['myTextarea0'].config.height = '480px';
|
---|
178 |
|
---|
179 | // Finally we "start" the editors, this turns the textareas into Xinha editors.
|
---|
180 | Xinha.startEditors(xinha_editors);
|
---|
181 | }
|
---|
182 |
|
---|
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 |
|
---|
194 | window.onload = xinha_init;
|
---|
195 | // window.onunload = Xinha.collectGarbageForIE;
|
---|
196 | </script>
|
---|
197 | </head>
|
---|
198 |
|
---|
199 | <body>
|
---|
200 | <form id="to_submit" name="to_submit" method="post" action="ext_example-dest.php">
|
---|
201 | <div id="editors_here"></div>
|
---|
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;" -->
|
---|
204 | </form>
|
---|
205 | </body>
|
---|
206 | </html>
|
---|