432d250038a6792e6c670ec05096bc88c211dc59
[Epoz.git] / epoz / epoz_core / epoz_script_main.js.dtml
1 //#####
2 //### Epoz - a cross-browser-wysiwyg-editor for Zope
3 //## Copyright (C) 2004 Maik Jablonski (maik.jablonski@uni-bielefeld.de)
4 //#
5
6 // Just to prevent typos when fetching the Epoz-IFrame...
7
8 var Epoz = "EpozEditor";
9
10 // Speed-Up-Storage for document.getElementById(Epoz);
11
12 var EpozElement;
13 var EpozTextArea;
14
15 // Global storages
16
17 var form_data; // the document-data
18 var form_name; // the name of the form-element
19 var form_path; // path to buttons, font-selectors, ...
20 var form_toolbox; // path to optional toolbox
21 var form_area_style; // css-definition for wysiwyg-area
22 var form_button_style; // css-definition for buttons
23 var form_css; // css-style for iframe
24 var form_customcss; // customized css-style for iframe
25 var form_charset; // charset for iframe
26 var form_pageurl; // real url for the edited page
27
28
29 // Returns the current HTML.
30
31 function GetHTML(source_mode) {
32 if (source_mode == null)
33 source_mode = document.getElementById('EpozViewMode').checked;
34 if (source_mode) {
35 return EpozTextArea.value;
36 }
37 else {
38 try {
39 return EpozElement.contentWindow.document.body.innerHTML;
40 } catch (e) {
41 return EpozElement.value;
42 }
43 }
44 }
45
46 // Just a XMLRPC to a web-service to clean up the html
47
48 function TidyHTML(html) {
49 window.status = EpozLang["TidyStart"];
50 try {
51 // Call EpozTidy one step above the given pageurl.
52 // This should avoid some problems with VHM & PageTemplates etc.
53 xmlrpchost = form_pageurl + "/..";
54 result = XMLRPC.call(xmlrpchost, "EpozTidy", html, form_pageurl);
55
56 errors = result[0];
57 output = result[1];
58 errordata = result[2];
59
60 if (errors != 0) {
61 window.status = EpozLang["TidyError"];
62 alert(errordata);
63 }
64 else {
65 window.status = EpozLang["TidyStop"];
66 }
67 return (output);
68 } catch (e) {
69 return (html);
70 }
71 }
72
73 // -------------------------------------------------------------
74 // Here are the definitions for the control-and-format-functions
75
76 // Format text with RichText-Controls
77
78 function FormatText(command, option) {
79 EpozElement.contentWindow.focus();
80
81 // Mozilla inserts css-styles per default
82
83 if (browser.isGecko) {
84 EpozElement.contentWindow.document.execCommand('useCSS',false, true);
85 }
86
87 EpozElement.contentWindow.document.execCommand(command, false, option);
88 }
89
90
91 // Insert arbitrary HTML at current selection
92
93 function InsertHTML(html) {
94
95 EpozElement.contentWindow.focus();
96
97 if (browser.isIE5up) {
98 selection = EpozElement.contentWindow.document.selection;
99 range = selection.createRange();
100 try {
101 range.pasteHTML(html);
102 } catch (e) {
103 // catch error when range is evil for IE
104 }
105 } else {
106 selection = EpozElement.contentWindow.window.getSelection();
107 EpozElement.contentWindow.focus();
108 if (selection) {
109 range = selection.getRangeAt(0);
110 } else {
111 range = EpozElement.contentWindow.document.createRange();
112 }
113
114 var fragment = EpozElement.contentWindow.document.createDocumentFragment();
115 var div = EpozElement.contentWindow.document.createElement("div");
116 div.innerHTML = html;
117
118 while (div.firstChild) {
119 fragment.appendChild(div.firstChild);
120 }
121
122 selection.removeAllRanges();
123 range.deleteContents();
124
125 var node = range.startContainer;
126 var pos = range.startOffset;
127
128 switch (node.nodeType) {
129 case 3:
130 if (fragment.nodeType == 3) {
131 node.insertData(pos, fragment.data);
132 range.setEnd(node, pos + fragment.length);
133 range.setStart(node, pos + fragment.length);
134 } else {
135 node = node.splitText(pos);
136 node.parentNode.insertBefore(fragment, node);
137 range.setEnd(node, pos + fragment.length);
138 range.setStart(node, pos + fragment.length);
139 }
140 break;
141
142 case 1:
143 node = node.childNodes[pos];
144 node.parentNode.insertBefore(fragment, node);
145 range.setEnd(node, pos + fragment.length);
146 range.setStart(node, pos + fragment.length);
147 break;
148 }
149 selection.addRange(range);
150 }
151 }
152
153
154 // Create an anchor - no browser supports this directly
155
156 function CreateAnchor(name) {
157 name = prompt(EpozLang["EnterAnchorName"], "");
158 if (name) {
159 anchorhtml = '<a name="' + name + '" title="' + name + '"></a>';
160 InsertHTML(anchorhtml);
161 }
162 }
163
164
165 // Create a Hyperlink - IE has its own implementation
166
167 function CreateLink(URL) {
168 if (browser.isIE5up == false && ((URL == null) || (URL == ""))) {
169 URL = prompt(EpozLang["EnterLinkURL"], "");
170
171 if ((URL != null) && (URL != "")) {
172 EpozElement.contentWindow.document.execCommand("CreateLink",false,URL)
173 } else {
174 EpozElement.contentWindow.document.execCommand("Unlink",false, "")
175 }
176 } else {
177 EpozElement.contentWindow.document.execCommand("CreateLink",false,URL)
178 }
179 }
180
181
182 // Insert image via a URL
183
184 function CreateImage(URL) {
185 if ((URL == null) || (URL == "")) {
186 URL = prompt(EpozLang["EnterImageURL"], "");
187 }
188 if ((URL != null) && (URL != "")) {
189 EpozElement.contentWindow.focus()
190 EpozElement.contentWindow.document.execCommand('InsertImage', false, URL);
191 }
192 }
193
194
195 // Creates a simple table
196
197 function CreateTable(rows, cols, border, head) {
198 rows = parseInt(rows);
199 cols = parseInt(cols);
200
201 if ((rows > 0) && (cols > 0)) {
202 table = ' <table border="' + border + '">\n';
203
204 for (var i=0; i < rows; i++) {
205 table = table + " <tr>\n";
206 for (var j=0; j < cols; j++) {
207 if(i==0 && head=="1") {
208 table += " <th>#</th>\n";
209 } else {
210 table += " <td>#</td>\n";
211 }
212 }
213 table += " </tr>\n";
214 }
215 table += " </table>\n";
216 InsertHTML(table);
217 }
218 EpozElement.contentWindow.focus()
219 }
220
221
222 // Sets selected formats
223
224 function SelectFormat(selectname)
225 {
226 // First one is only a label
227 if (selectname.selectedIndex != 0) {
228 EpozElement.contentWindow.document.execCommand(selectname.id, false, selectname.options[selectname.selectedIndex].value);
229 selectname.selectedIndex = 0;
230 }
231 EpozElement.contentWindow.focus();
232 }
233
234
235 // Sets foreground-color
236
237 function SetTextColor() {
238 EpozColorCommand='forecolor';
239 window.open(form_path+'epoz_script_color.html','EpozColor','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=220,height=220');
240 }
241
242 // Sets background-color
243
244 function SetBackColor() {
245 EpozColorCommand='backcolor';
246 window.open(form_path+'epoz_script_color.html','EpozColor','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=220,height=220');
247 }
248
249 // Submit color-command to Rich-Text-Controls
250
251 function SetColor(color) {
252
253 if (browser.isGecko) {
254 EpozElement.contentWindow.document.execCommand('useCSS',false, false);
255 }
256
257 EpozElement.contentWindow.document.execCommand(EpozColorCommand, false, color);
258 EpozElement.contentWindow.focus();
259 }
260
261 // Switch between Source- and Wysiwyg-View
262
263 function SwitchViewMode(source_mode)
264 {
265 var html = GetHTML(!source_mode);
266
267 if (source_mode) {
268 EpozTextArea.value=TidyHTML(html);
269 document.getElementById("EpozToolbar").style.display="none";
270 EpozTextArea.style.display="inline";
271 } else {
272 html = html.replace('<script ', '<epoz:script style="display: none" ')
273 html = html.replace('</script>', '</epoz:script>')
274
275 EpozElement.contentWindow.document.body.innerHTML = html;
276 document.getElementById("EpozToolbar").style.display="inline";
277 EpozTextArea.style.display="none";
278
279 if (browser.isGecko) {
280 EpozElement.contentDocument.designMode = "on";
281 }
282 }
283 }
284
285 // Keyboard-Handler for Mozilla (supports same shortcuts as IE)
286
287 function HandleKeyboardEvent(event)
288 {
289 if (event.ctrlKey) {
290 var key = String.fromCharCode(event.charCode).toLowerCase();
291 switch (key) {
292 case 'b': FormatText('bold',''); event.preventDefault(); break;
293 case 'i': FormatText('italic',''); event.preventDefault(); break;
294 case 'u': FormatText('underline',''); event.preventDefault(); break;
295 case 'k': CreateLink(); event.preventDefault(); break;
296 };
297 }
298 }