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 }