JAVASCRIPT 12
Wysiwyg.js Guest on 25th September 2020 10:51:00 AM
  1. //
  2. // openWYSIWYG v1.01 Copyright (c) 2006 openWebWare.com
  3. // This copyright notice MUST stay intact for use.
  4. //
  5. // An open source WYSIWYG editor for use in web based applications.
  6. // For full source code and docs, visit http://www.openwebware.com/
  7. //
  8. // This library is free software; you can redistribute it and/or modify
  9. // it under the terms of the GNU Lesser General Public License as published
  10. // by the Free Software Foundation; either version 2.1 of the License, or
  11. // (at your option) any later version.
  12. //
  13. // This library is distributed in the hope that it will be useful, but
  14. // WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
  15. // or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public
  16. // License for more details.
  17. //
  18. // You should have received a copy of the GNU Lesser General Public License along
  19. // with this library; if not, write to the Free Software Foundation, Inc., 59
  20. // Temple Place, Suite 330, Boston, MA 02111-1307 USA
  21.  
  22.  
  23. /* ---------------------------------------------------------------------- *\
  24.   Global Variables: Set global variables such as images directory,
  25.                           WYSIWYG Height, Width, and CSS Directory.
  26. \* ---------------------------------------------------------------------- */
  27.  
  28. // Images Directory
  29. imagesDir = _JF_ROOT_URL +"js/openwysiwyg/icons/";
  30.  
  31. // CSS Directory
  32. cssDir = _JF_ROOT_URL +"js/openwysiwyg/styles/";
  33.  
  34. // Popups Directory
  35. popupsDir = _JF_ROOT_URL +"js/openwysiwyg/popups/";
  36.  
  37. // WYSIWYG Width and Height
  38. wysiwygWidth = 500;
  39. wysiwygHeight = 150;
  40.  
  41. // Include Style Sheet
  42. document.write('<link rel="stylesheet" type="text/css" href="' +cssDir+ 'styles.css">\n');
  43.  
  44.  
  45. /* ---------------------------------------------------------------------- *\
  46.   Toolbar Settings: Set the features and buttons available in the WYSIWYG
  47.                           Toolbar.
  48. \* ---------------------------------------------------------------------- */
  49.  
  50.  
  51. // List of available font types
  52.   var Fonts = new Array();
  53.   Fonts[0] = "Arial";
  54.   Fonts[1] = "Sans Serif";
  55.   Fonts[2] = "Tahoma";
  56.         Fonts[3] = "Verdana";
  57.         Fonts[4] = "Courier New";
  58.         Fonts[5] = "Georgia";
  59.         Fonts[6] = "Times New Roman";
  60.         Fonts[7] = "Impact";
  61.   Fonts[8] = "Comic Sans MS";
  62.  
  63. // List of available block formats (not in use)
  64. var BlockFormats = new Array();
  65.   BlockFormats[0]  = "Address";
  66.   BlockFormats[1]  = "Bulleted List";
  67.   BlockFormats[2]  = "Definition";
  68.         BlockFormats[3]  = "Definition Term";
  69.         BlockFormats[4]  = "Directory List";
  70.         BlockFormats[5]  = "Formatted";
  71.         BlockFormats[6]  = "Heading 1";
  72.         BlockFormats[7]  = "Heading 2";
  73.         BlockFormats[8]  = "Heading 3";
  74.         BlockFormats[9]  = "Heading 4";
  75.         BlockFormats[10] = "Heading 5";
  76.         BlockFormats[11] = "Heading 6";
  77.         BlockFormats[12] = "Menu List";
  78.         BlockFormats[13] = "Normal";
  79.         BlockFormats[14] = "Numbered List";
  80.  
  81. // List of available font sizes
  82. var FontSizes = new Array();
  83.   FontSizes[0]  = "1";
  84.   FontSizes[1]  = "2";
  85.   FontSizes[2]  = "3";
  86.         FontSizes[3]  = "4";
  87.         FontSizes[4]  = "5";
  88.         FontSizes[5]  = "6";
  89.         FontSizes[6]  = "7";
  90.  
  91. // Order of available commands in toolbar one
  92. var buttonName = new Array();
  93.   buttonName[0]  = "bold";
  94.   buttonName[1]  = "italic";
  95.   buttonName[2]  = "underline";
  96.         //buttonName[3]  = "strikethrough";
  97.   buttonName[4]  = "seperator";
  98.         buttonName[5]  = "subscript";
  99.         buttonName[6]  = "superscript";
  100.         buttonName[7]  = "seperator";
  101.         buttonName[8]  = "justifyleft";
  102.         buttonName[9]  = "justifycenter";
  103.         buttonName[10] = "justifyright";
  104.         buttonName[11] = "seperator";
  105.         buttonName[12] = "unorderedlist";
  106.         buttonName[13] = "orderedlist";
  107.         buttonName[14] = "outdent";
  108.         buttonName[15] = "indent";
  109.  
  110. // Order of available commands in toolbar two
  111. var buttonName2 = new Array();
  112.   buttonName2[0]  = "forecolor";
  113.         buttonName2[1]  = "backcolor";
  114.         buttonName2[2]  = "seperator";
  115.         buttonName2[3]  = "cut";
  116.         buttonName2[4]  = "copy";
  117.         buttonName2[5]  = "paste";
  118.         buttonName2[6]  = "seperator";
  119.   buttonName2[7]  = "undo";
  120.         buttonName2[8]  = "redo";
  121.   buttonName2[9]  = "seperator";
  122.         buttonName2[10]  = "inserttable";
  123.   buttonName2[11]  = "insertimage";
  124.   buttonName2[12]  = "createlink";
  125.         buttonName2[13]  = "seperator";
  126.         buttonName2[14]  = "viewSource";
  127.         buttonName2[15]  = "seperator";
  128.   buttonName2[16]  = "help";
  129.        
  130. // List of available actions and their respective ID and images
  131. var ToolbarList = {
  132. //Name              buttonID                 buttonTitle           buttonImage                            buttonImageRollover
  133.   "bold":           ['Bold',                 'Bold',               imagesDir + 'bold.gif',               imagesDir + 'bold_on.gif'],
  134.   "italic":         ['Italic',               'Italic',             imagesDir + 'italics.gif',            imagesDir + 'italics_on.gif'],
  135.   "underline":      ['Underline',            'Underline',          imagesDir + 'underline.gif',          imagesDir + 'underline_on.gif'],
  136.         "strikethrough":  ['Strikethrough',        'Strikethrough',      imagesDir + 'strikethrough.gif',      imagesDir + 'strikethrough_on.gif'],
  137.         "seperator":      ['',                     '',                   imagesDir + 'seperator.gif',          imagesDir + 'seperator.gif'],
  138.         "subscript":      ['Subscript',            'Subscript',          imagesDir + 'subscript.gif',          imagesDir + 'subscript_on.gif'],
  139.         "superscript":    ['Superscript',          'Superscript',        imagesDir + 'superscript.gif',        imagesDir + 'superscript_on.gif'],
  140.         "justifyleft":    ['Justifyleft',          'Justifyleft',        imagesDir + 'justify_left.gif',       imagesDir + 'justify_left_on.gif'],
  141.         "justifycenter":  ['Justifycenter',        'Justifycenter',      imagesDir + 'justify_center.gif',     imagesDir + 'justify_center_on.gif'],
  142.         "justifyright":   ['Justifyright',         'Justifyright',       imagesDir + 'justify_right.gif',      imagesDir + 'justify_right_on.gif'],
  143.         "unorderedlist":  ['InsertUnorderedList',  'InsertUnorderedList',imagesDir + 'list_unordered.gif',     imagesDir + 'list_unordered_on.gif'],
  144.         "orderedlist":    ['InsertOrderedList',    'InsertOrderedList',  imagesDir + 'list_ordered.gif',       imagesDir + 'list_ordered_on.gif'],
  145.         "outdent":        ['Outdent',              'Outdent',            imagesDir + 'indent_left.gif',        imagesDir + 'indent_left_on.gif'],
  146.         "indent":         ['Indent',               'Indent',             imagesDir + 'indent_right.gif',       imagesDir + 'indent_right_on.gif'],
  147.         "cut":            ['Cut',                  'Cut',                imagesDir + 'cut.gif',                imagesDir + 'cut_on.gif'],
  148.         "copy":           ['Copy',                 'Copy',               imagesDir + 'copy.gif',               imagesDir + 'copy_on.gif'],
  149.   "paste":          ['Paste',                'Paste',              imagesDir + 'paste.gif',              imagesDir + 'paste_on.gif'],
  150.         "forecolor":      ['ForeColor',            'ForeColor',          imagesDir + 'forecolor.gif',          imagesDir + 'forecolor_on.gif'],
  151.         "backcolor":      ['BackColor',            'BackColor',          imagesDir + 'backcolor.gif',          imagesDir + 'backcolor_on.gif'],
  152.         "undo":           ['Undo',                 'Undo',               imagesDir + 'undo.gif',               imagesDir + 'undo_on.gif'],
  153.         "redo":           ['Redo',                 'Redo',               imagesDir + 'redo.gif',               imagesDir + 'redo_on.gif'],
  154.         "inserttable":    ['InsertTable',          'InsertTable',        imagesDir + 'insert_table.gif',       imagesDir + 'insert_table_on.gif'],
  155.         "insertimage":    ['InsertImage',          'InsertImage',        imagesDir + 'insert_picture.gif',     imagesDir + 'insert_picture_on.gif'],
  156.         "createlink":     ['CreateLink',           'CreateLink',         imagesDir + 'insert_hyperlink.gif',   imagesDir + 'insert_hyperlink_on.gif'],
  157.         "viewSource":     ['ViewSource',           'ViewSource',         imagesDir + 'view_source.gif',        imagesDir + 'view_source_on.gif'],
  158.         "viewText":       ['ViewText',             'ViewText',           imagesDir + 'view_text.gif',          imagesDir + 'view_text_on.gif'],
  159.         "help":           ['Help',                 'Help',               imagesDir + 'help.gif',               imagesDir + 'help_on.gif'],
  160.         "selectfont":     ['SelectFont',           'SelectFont',         imagesDir + 'select_font.gif',        imagesDir + 'select_font_on.gif'],
  161.         "selectsize":     ['SelectSize',           'SelectSize',         imagesDir + 'select_size.gif',        imagesDir + 'select_size_on.gif']
  162. };
  163.  
  164.  
  165.  
  166. /* ---------------------------------------------------------------------- *\
  167.   Function    : insertAdjacentHTML(), insertAdjacentText() and insertAdjacentElement()
  168.   Description : Emulates insertAdjacentHTML(), insertAdjacentText() and
  169.                       insertAdjacentElement() three functions so they work with
  170.                                                                 Netscape 6/Mozilla
  171.   Notes       : by Thor Larholm [email protected]
  172. \* ---------------------------------------------------------------------- */
  173. if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement){
  174.   HTMLElement.prototype.insertAdjacentElement = function
  175.   (where,parsedNode)
  176.         {
  177.           switch (where){
  178.                 case 'beforeBegin':
  179.                         this.parentNode.insertBefore(parsedNode,this)
  180.                         break;
  181.                 case 'afterBegin':
  182.                         this.insertBefore(parsedNode,this.firstChild);
  183.                         break;
  184.                 case 'beforeEnd':
  185.                         this.appendChild(parsedNode);
  186.                         break;
  187.                 case 'afterEnd':
  188.                         if (this.nextSibling)
  189.       this.parentNode.insertBefore(parsedNode,this.nextSibling);
  190.                         else this.parentNode.appendChild(parsedNode);
  191.                         break;
  192.                 }
  193.         }
  194.  
  195.         HTMLElement.prototype.insertAdjacentHTML = function
  196.   (where,htmlStr)
  197.         {
  198.                 var r = this.ownerDocument.createRange();
  199.                 r.setStartBefore(this);
  200.                 var parsedHTML = r.createContextualFragment(htmlStr);
  201.                 this.insertAdjacentElement(where,parsedHTML)
  202.         }
  203.  
  204.  
  205.         HTMLElement.prototype.insertAdjacentText = function
  206.   (where,txtStr)
  207.         {
  208.                 var parsedText = document.createTextNode(txtStr)
  209.                 this.insertAdjacentElement(where,parsedText)
  210.         }
  211. };
  212.  
  213.  
  214. // Create viewTextMode global variable and set to 0
  215. // enabling all toolbar commands while in HTML mode
  216. viewTextMode = 0;
  217.  
  218.  
  219.  
  220. /* ---------------------------------------------------------------------- *\
  221.   Function    : generate_wysiwyg()
  222.   Description : replace textarea with wysiwyg editor
  223.   Usage       : generate_wysiwyg("textarea_id");
  224.   Arguments   : textarea_id - ID of textarea to replace
  225. \* ---------------------------------------------------------------------- */
  226. function generate_wysiwyg(textareaID) {
  227.  
  228.         // Hide the textarea
  229.         document.getElementById(textareaID).style.display = 'none';
  230.        
  231.   // Pass the textareaID to the "n" variable.
  232.   var n = textareaID;
  233.        
  234.         // Toolbars width is 2 pixels wider than the wysiwygs
  235.         toolbarWidth = parseFloat(wysiwygWidth) + 2;
  236.        
  237.   // Generate WYSIWYG toolbar one
  238.   var toolbar;
  239.   toolbar =  '<table cellpadding="0" cellspacing="0" border="0" class="toolbar1" style="width:' + toolbarWidth + 'px;"><tr><td style="width: 6px;"><img src="' +imagesDir+ 'seperator2.gif" alt="" hspace="3"></td>';
  240.  
  241.         // Create IDs for inserting Font Type and Size drop downs
  242.         toolbar += '<td style="width: 90px;"><span id="FontSelect' + n + '"></span></td>';
  243.         toolbar += '<td style="width: 60px;"><span id="FontSizes'  + n + '"></span></td>';
  244.  
  245.         // Output all command buttons that belong to toolbar one
  246.         for (var i = 0; i <= buttonName.length;) {
  247.     if (buttonName[i]) {
  248.             var buttonObj            = ToolbarList[buttonName[i]];
  249.                   var buttonID             = buttonObj[0];
  250.             var buttonTitle          = buttonObj[1];
  251.       var buttonImage          = buttonObj[2];
  252.                   var buttonImageRollover  = buttonObj[3];
  253.            
  254.                         if (buttonName[i] == "seperator") {
  255.                     toolbar += '<td style="width: 12px;" align="center"><img src="' +buttonImage+ '" border=0 unselectable="on" width="2" height="18" hspace="2" unselectable="on"></td>';
  256.                         }
  257.             else {
  258.                     toolbar += '<td style="width: 22px;"><img src="' +buttonImage+ '" border=0 unselectable="on" title="' +buttonTitle+ '" id="' +buttonID+ '" class="wysiwygButton" onClick="formatText(this.id,\'' + n + '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' + buttonImageRollover + '\';" onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' + buttonImage + '\';" unselectable="on" width="20" height="20"></td>';
  259.             }
  260.     }
  261.     i++;
  262.   }
  263.  
  264.   toolbar += '<td>&nbsp;</td></tr></table>';  
  265.  
  266.   // Generate WYSIWYG toolbar two
  267.   var toolbar2;
  268.   toolbar2 = '<table cellpadding="0" cellspacing="0" border="0" class="toolbar2" style="width:' + toolbarWidth + 'px;"><tr><td style="width: 6px;"><img src="' +imagesDir+ 'seperator2.gif" alt="" hspace="3"></td>';
  269.  
  270.   // Output all command buttons that belong to toolbar two
  271.   for (var j = 0; j <= buttonName2.length;) {
  272.     if (buttonName2[j]) {
  273.             var buttonObj            = ToolbarList[buttonName2[j]];
  274.                   var buttonID             = buttonObj[0];
  275.             var buttonTitle          = buttonObj[1];
  276.       var buttonImage          = buttonObj[2];
  277.                   var buttonImageRollover  = buttonObj[3];
  278.          
  279.                   if (buttonName2[j] == "seperator") {
  280.                     toolbar2 += '<td style="width: 12px;" align="center"><img src="' +buttonImage+ '" border=0 unselectable="on" width="2" height="18" hspace="2" unselectable="on"></td>';
  281.                         }
  282.             else if (buttonName2[j] == "viewSource"){
  283.                     toolbar2 += '<td style="width: 22px;">';
  284.                                 toolbar2 += '<span id="HTMLMode' + n + '"><img src="'  +buttonImage+  '" border=0 unselectable="on" title="' +buttonTitle+ '" id="' +buttonID+ '" class="wysiwygButton" onClick="formatText(this.id,\'' + n + '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' +buttonImageRollover+ '\';" onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' + buttonImage + '\';" unselectable="on"  width="20" height="20"></span>';
  285.                                 toolbar2 += '<span id="textMode' + n + '"><img src="' +imagesDir+ 'view_text.gif" border=0 unselectable="on" title="viewText"          id="ViewText"       class="wysiwygButton" onClick="formatText(this.id,\'' + n + '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' +imagesDir+ 'view_text_on.gif\';"    onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' +imagesDir+ 'view_text.gif\';" unselectable="on"  width="20" height="20"></span>';
  286.               toolbar2 += '</td>';
  287.                         }
  288.             else {
  289.                     toolbar2 += '<td style="width: 22px;"><img src="' +buttonImage+ '" border=0 unselectable="on" title="' +buttonTitle+ '" id="' +buttonID+ '" class="wysiwygButton" onClick="formatText(this.id,\'' + n + '\');" onmouseover="if(className==\'button\'){className=\'buttonOver\'}; this.src=\'' +buttonImageRollover+ '\';" onmouseout="if(className==\'buttonOver\'){className=\'button\'}; this.src=\'' + buttonImage + '\';" unselectable="on" width="20" height="20"></td>';
  290.             }
  291.     }
  292.     j++;
  293.   }
  294.  
  295.   toolbar2 += '<td>&nbsp;</td></tr></table>';  
  296.        
  297.        
  298.         // Create iframe which will be used for rich text editing
  299.         var iframe = '<table cellpadding="0" cellspacing="0" border="0" style="width:' + wysiwygWidth + 'px; height:' + wysiwygHeight + 'px;border: 1px inset #CCCCCC;"><tr><td valign="top">\n'
  300.   + '<iframe frameborder="0" id="wysiwyg' + n + '"></iframe>\n'
  301.   + '</td></tr></table>\n';
  302.  
  303.   // Insert after the textArea both toolbar one and two
  304.   document.getElementById(n).insertAdjacentHTML("afterEnd", toolbar + toolbar2 + iframe);
  305.        
  306.   // Insert the Font Type and Size drop downs into the toolbar
  307.         outputFontSelect(n);
  308.         outputFontSizes(n);
  309.        
  310.   // Hide the dynamic drop down lists for the Font Types and Sizes
  311.   hideFonts(n);
  312.         hideFontSizes(n);
  313.        
  314.         // Hide the "Text Mode" button
  315.         document.getElementById("textMode" + n).style.display = 'none';
  316.        
  317.         // Give the iframe the global wysiwyg height and width
  318.   document.getElementById("wysiwyg" + n).style.height = wysiwygHeight + "px";
  319.   document.getElementById("wysiwyg" + n).style.width = wysiwygWidth + "px";
  320.        
  321.         // Pass the textarea's existing text over to the content variable
  322.   var content = document.getElementById(n).value;
  323.        
  324.         var doc = document.getElementById("wysiwyg" + n).contentWindow.document;
  325.        
  326.         // Write the textarea's content into the iframe
  327.   doc.open();
  328.   doc.write(content);
  329.   doc.close();
  330.        
  331.         // Make the iframe editable in both Mozilla and IE
  332.   doc.body.contentEditable = true;
  333.   doc.designMode = "on";
  334.        
  335.         // Update the textarea with content in WYSIWYG when user submits form
  336.   var browserName = navigator.appName;
  337.   if (browserName == "Microsoft Internet Explorer") {
  338.     for (var idx=0; idx < document.forms.length; idx++) {
  339.       document.forms[idx].attachEvent('onsubmit', function() { updateTextArea(n); });
  340.     }
  341.   }
  342.   else {
  343.         for (var idx=0; idx < document.forms.length; idx++) {
  344.         document.forms[idx].addEventListener('submit',function OnSumbmit() { updateTextArea(n); }, true);
  345.     }
  346.   }
  347.        
  348.  
  349. };
  350.  
  351.  
  352.  
  353. /* ---------------------------------------------------------------------- *\
  354.   Function    : formatText()
  355.   Description : replace textarea with wysiwyg editor
  356.   Usage       : formatText(id, n, selected);
  357.   Arguments   : id - The execCommand (e.g. Bold)
  358.                 n  - The editor identifier that the command
  359.                                                                      affects (the textarea's ID)
  360.                 selected - The selected value when applicable (e.g. Arial)
  361. \* ---------------------------------------------------------------------- */
  362. function formatText(id, n, selected) {
  363.  
  364.   // When user clicks toolbar button make sure it always targets its respective WYSIWYG
  365.   document.getElementById("wysiwyg" + n).contentWindow.focus();
  366.        
  367.         // When in Text Mode these execCommands are disabled
  368.         var formatIDs = new Array("FontSize","FontName","Bold","Italic","Underline","Subscript","Superscript","Strikethrough","Justifyleft","Justifyright","Justifycenter","InsertUnorderedList","InsertOrderedList","Indent","Outdent","ForeColor","BackColor","InsertImage","InsertTable","CreateLink");
  369.  
  370.         // Check if button clicked is in disabled list
  371.         for (var i = 0; i <= formatIDs.length;) {
  372.                 if (formatIDs[i] == id) {
  373.                          var disabled_id = 1;
  374.                 }
  375.           i++;
  376.         }
  377.        
  378.         // Check if in Text Mode and disabled button was clicked
  379.         if (viewTextMode == 1 && disabled_id == 1) {
  380.           alert ("You are in HTML Mode. This feature has been disabled.");     
  381.         }
  382.        
  383.         else {
  384.        
  385.           // FontSize
  386.           if (id == "FontSize") {
  387.       document.getElementById("wysiwyg" + n).contentWindow.document.execCommand("FontSize", false, selected);
  388.           }
  389.          
  390.                 // FontName
  391.           else if (id == "FontName") {
  392.       document.getElementById("wysiwyg" + n).contentWindow.document.execCommand("FontName", false, selected);
  393.           }
  394.        
  395.           // ForeColor and BackColor
  396.     else if (id == 'ForeColor' || id == 'BackColor') {
  397.       var w = screen.availWidth;
  398.       var h = screen.availHeight;
  399.       var popW = 210, popH = 165;
  400.       var leftPos = (w-popW)/2, topPos = (h-popH)/2;
  401.       var currentColor = _dec_to_rgb(document.getElementById("wysiwyg" + n).contentWindow.document.queryCommandValue(id));
  402.    
  403.             window.open(popupsDir + 'select_color.html?color=' + currentColor + '&command=' + id + '&wysiwyg=' + n,'popup','location=0,status=0,scrollbars=0,width=' + popW + ',height=' + popH + ',top=' + topPos + ',left=' + leftPos);
  404.     }
  405.          
  406.                 // InsertImage
  407.           else if (id == "InsertImage") {
  408.       window.open(popupsDir + 'insert_image.html?wysiwyg=' + n,'popup','location=0,status=0,scrollbars=0,resizable=0,width=400,height=190');
  409.           }
  410.          
  411.                 // InsertTable
  412.           else if (id == "InsertTable") {
  413.             window.open(popupsDir + 'create_table.html?wysiwyg=' + n,'popup','location=0,status=0,scrollbars=0,resizable=0,width=400,height=360');
  414.           }
  415.          
  416.                 // CreateLink
  417.           else if (id == "CreateLink") {
  418.             window.open(popupsDir + 'insert_hyperlink.html?wysiwyg=' + n,'popup','location=0,status=0,scrollbars=1,resizable=0,width=300,height=200');
  419.           }
  420.          
  421.                 // ViewSource
  422.     else if (id == "ViewSource") {
  423.             viewSource(n);
  424.           }
  425.                
  426.                 // ViewText
  427.                 else if (id == "ViewText") {
  428.             viewText(n);
  429.           }
  430.  
  431.                 // Help
  432.                 else if (id == "Help") {
  433.             window.open(popupsDir + 'about.html','popup','location=0,status=0,scrollbars=0,resizable=0,width=400,height=330');
  434.           }
  435.          
  436.                 // Every other command
  437.           else {
  438.       document.getElementById("wysiwyg" + n).contentWindow.document.execCommand(id, false, null);
  439.                 }
  440.   }
  441. };
  442.  
  443.  
  444.  
  445. /* ---------------------------------------------------------------------- *\
  446.   Function    : insertHTML()
  447.   Description : insert HTML into WYSIWYG in rich text
  448.   Usage       : insertHTML(<b>hello</b>, "textareaID")
  449.   Arguments   : html - The HTML being inserted (e.g. <b>hello</b>)
  450.                 n  - The editor identifier that the HTML
  451.                                                                      will be inserted into (the textarea's ID)
  452. \* ---------------------------------------------------------------------- */
  453. function insertHTML(html, n) {
  454.  
  455.   var browserName = navigator.appName;
  456.                  
  457.         if (browserName == "Microsoft Internet Explorer") {      
  458.           document.getElementById('wysiwyg' + n).contentWindow.document.selection.createRange().pasteHTML(html);  
  459.         }
  460.          
  461.         else {
  462.           var div = document.getElementById('wysiwyg' + n).contentWindow.document.createElement("div");
  463.                  
  464.                 div.innerHTML = html;
  465.                 var node = insertNodeAtSelection(div, n);              
  466.         }
  467.        
  468. }
  469.  
  470.  
  471. /* ---------------------------------------------------------------------- *\
  472.   Function    : insertNodeAtSelection()
  473.   Description : insert HTML into WYSIWYG in rich text (mozilla)
  474.   Usage       : insertNodeAtSelection(insertNode, n)
  475.   Arguments   : insertNode - The HTML being inserted (must be innerHTML
  476.                                    inserted within a div element)
  477.                 n          - The editor identifier that the HTML will be
  478.                                                                              inserted into (the textarea's ID)
  479. \* ---------------------------------------------------------------------- */
  480. function insertNodeAtSelection(insertNode, n) {
  481.   // get current selection
  482.   var sel = document.getElementById('wysiwyg' + n).contentWindow.getSelection();
  483.  
  484.   // get the first range of the selection
  485.   // (there's almost always only one range)
  486.   var range = sel.getRangeAt(0);
  487.  
  488.   // deselect everything
  489.   sel.removeAllRanges();
  490.  
  491.   // remove content of current selection from document
  492.   range.deleteContents();
  493.  
  494.   // get location of current selection
  495.   var container = range.startContainer;
  496.   var pos = range.startOffset;
  497.  
  498.   // make a new range for the new selection
  499.   range=document.createRange();
  500.  
  501.   if (container.nodeType==3 && insertNode.nodeType==3) {
  502.  
  503.     // if we insert text in a textnode, do optimized insertion
  504.     container.insertData(pos, insertNode.nodeValue);
  505.  
  506.     // put cursor after inserted text
  507.     range.setEnd(container, pos+insertNode.length);
  508.     range.setStart(container, pos+insertNode.length);
  509.   }
  510.        
  511.         else {
  512.     var afterNode;
  513.    
  514.                 if (container.nodeType==3) {
  515.       // when inserting into a textnode
  516.       // we create 2 new textnodes
  517.       // and put the insertNode in between
  518.  
  519.       var textNode = container;
  520.       container = textNode.parentNode;
  521.       var text = textNode.nodeValue;
  522.  
  523.       // text before the split
  524.       var textBefore = text.substr(0,pos);
  525.       // text after the split
  526.       var textAfter = text.substr(pos);
  527.  
  528.       var beforeNode = document.createTextNode(textBefore);
  529.       afterNode = document.createTextNode(textAfter);
  530.  
  531.       // insert the 3 new nodes before the old one
  532.       container.insertBefore(afterNode, textNode);
  533.       container.insertBefore(insertNode, afterNode);
  534.       container.insertBefore(beforeNode, insertNode);
  535.  
  536.       // remove the old node
  537.       container.removeChild(textNode);
  538.     }
  539.        
  540.           else {
  541.       // else simply insert the node
  542.       afterNode = container.childNodes[pos];
  543.       container.insertBefore(insertNode, afterNode);
  544.     }
  545.  
  546.     range.setEnd(afterNode, 0);
  547.     range.setStart(afterNode, 0);
  548.   }
  549.  
  550.   sel.addRange(range);
  551. };
  552.  
  553.        
  554.  
  555. /* ---------------------------------------------------------------------- *\
  556.   Function    : _dec_to_rgb
  557.   Description : convert a decimal color value to rgb hexadecimal
  558.   Usage       : var hex = _dec_to_rgb('65535');   // returns FFFF00
  559.   Arguments   : value   - dec value
  560. \* ---------------------------------------------------------------------- */
  561.  
  562. function _dec_to_rgb(value) {
  563.   var hex_string = "";
  564.   for (var hexpair = 0; hexpair < 3; hexpair++) {
  565.     var myByte = value & 0xFF;            // get low byte
  566.     value >>= 8;                          // drop low byte
  567.     var nybble2 = myByte & 0x0F;          // get low nybble (4 bits)
  568.     var nybble1 = (myByte >> 4) & 0x0F;   // get high nybble
  569.     hex_string += nybble1.toString(16);   // convert nybble to hex
  570.     hex_string += nybble2.toString(16);   // convert nybble to hex
  571.   }
  572.   return hex_string.toUpperCase();
  573. };
  574.  
  575.  
  576.  
  577. /* ---------------------------------------------------------------------- *\
  578.   Function    : outputFontSelect()
  579.   Description : creates the Font Select drop down and inserts it into
  580.                       the toolbar
  581.   Usage       : outputFontSelect(n)
  582.   Arguments   : n   - The editor identifier that the Font Select will update
  583.                             when making font changes (the textarea's ID)
  584. \* ---------------------------------------------------------------------- */
  585. function outputFontSelect(n) {
  586.  
  587.   var FontSelectObj        = ToolbarList['selectfont'];
  588.   var FontSelect           = FontSelectObj[2];
  589.   var FontSelectOn         = FontSelectObj[3];
  590.  
  591.         Fonts.sort();
  592.         var FontSelectDropDown = new Array;
  593.         FontSelectDropDown[n] = '<table border="0" cellpadding="0" cellspacing="0"><tr><td onMouseOver="document.getElementById(\'selectFont' + n + '\').src=\'' + FontSelectOn + '\';" onMouseOut="document.getElementById(\'selectFont' + n + '\').src=\'' + FontSelect + '\';"><img src="' + FontSelect + '" id="selectFont' + n + '" width="85" height="20" onClick="showFonts(\'' + n + '\');" unselectable="on"><br>';
  594.         FontSelectDropDown[n] += '<span id="Fonts' + n + '" class="dropdown" style="width: 145px;">';
  595.  
  596.         for (var i = 0; i <= Fonts.length;) {
  597.           if (Fonts[i]) {
  598.       FontSelectDropDown[n] += '<button type="button" onClick="formatText(\'FontName\',\'' + n + '\',\'' + Fonts[i] + '\')\; hideFonts(\'' + n + '\');" onMouseOver="this.className=\'mouseOver\'" onMouseOut="this.className=\'mouseOut\'" class="mouseOut" style="width: 120px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td align="left" style="font-family:' + Fonts[i] + '; font-size: 12px;">' + Fonts[i] + '</td></tr></table></button><br>';     
  599.     }    
  600.           i++;
  601.   }
  602.         FontSelectDropDown[n] += '</span></td></tr></table>';
  603.         document.getElementById('FontSelect' + n).insertAdjacentHTML("afterBegin", FontSelectDropDown[n]);
  604. };
  605.  
  606.  
  607.  
  608. /* ---------------------------------------------------------------------- *\
  609.   Function    : outputFontSizes()
  610.   Description : creates the Font Sizes drop down and inserts it into
  611.                       the toolbar
  612.   Usage       : outputFontSelect(n)
  613.   Arguments   : n   - The editor identifier that the Font Sizes will update
  614.                             when making font changes (the textarea's ID)
  615. \* ---------------------------------------------------------------------- */
  616. function outputFontSizes(n) {
  617.  
  618.   var FontSizeObj        = ToolbarList['selectsize'];
  619.   var FontSize           = FontSizeObj[2];
  620.   var FontSizeOn         = FontSizeObj[3];
  621.  
  622.         FontSizes.sort();
  623.         var FontSizesDropDown = new Array;
  624.         FontSizesDropDown[n] = '<table border="0" cellpadding="0" cellspacing="0"><tr><td onMouseOver="document.getElementById(\'selectSize' + n + '\').src=\'' + FontSizeOn + '\';" onMouseOut="document.getElementById(\'selectSize' + n + '\').src=\'' + FontSize + '\';"><img src="' + FontSize + '" id="selectSize' + n + '" width="49" height="20" onClick="showFontSizes(\'' + n + '\');" unselectable="on"><br>';
  625.   FontSizesDropDown[n] += '<span id="Sizes' + n + '" class="dropdown" style="width: 170px;">';
  626.  
  627.         for (var i = 0; i <= FontSizes.length;) {
  628.           if (FontSizes[i]) {
  629.       FontSizesDropDown[n] += '<button type="button" onClick="formatText(\'FontSize\',\'' + n + '\',\'' + FontSizes[i] + '\')\;hideFontSizes(\'' + n + '\');" onMouseOver="this.className=\'mouseOver\'" onMouseOut="this.className=\'mouseOut\'" class="mouseOut" style="width: 145px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td align="left" style="font-family: arial, verdana, helvetica;"><font size="' + FontSizes[i] + '">size ' + FontSizes[i] + '</font></td></tr></table></button><br>';    
  630.     }    
  631.           i++;
  632.   }
  633.         FontSizesDropDown[n] += '</span></td></tr></table>';
  634.         document.getElementById('FontSizes' + n).insertAdjacentHTML("afterBegin", FontSizesDropDown[n]);
  635. };
  636.  
  637.  
  638.  
  639. /* ---------------------------------------------------------------------- *\
  640.   Function    : hideFonts()
  641.   Description : Hides the list of font names in the font select drop down
  642.   Usage       : hideFonts(n)
  643.   Arguments   : n   - The editor identifier (the textarea's ID)
  644. \* ---------------------------------------------------------------------- */
  645. function hideFonts(n) {
  646.   document.getElementById('Fonts' + n).style.display = 'none';
  647. };
  648.  
  649.  
  650.  
  651. /* ---------------------------------------------------------------------- *\
  652.   Function    : hideFontSizes()
  653.   Description : Hides the list of font sizes in the font sizes drop down
  654.   Usage       : hideFontSizes(n)
  655.   Arguments   : n   - The editor identifier (the textarea's ID)
  656. \* ---------------------------------------------------------------------- */
  657. function hideFontSizes(n) {
  658.   document.getElementById('Sizes' + n).style.display = 'none';
  659. };
  660.  
  661.  
  662.  
  663. /* ---------------------------------------------------------------------- *\
  664.   Function    : showFonts()
  665.   Description : Shows the list of font names in the font select drop down
  666.   Usage       : showFonts(n)
  667.   Arguments   : n   - The editor identifier (the textarea's ID)
  668. \* ---------------------------------------------------------------------- */
  669. function showFonts(n) {
  670.   if (document.getElementById('Fonts' + n).style.display == 'block') {
  671.     document.getElementById('Fonts' + n).style.display = 'none';
  672.         }
  673.   else {
  674.     document.getElementById('Fonts' + n).style.display = 'block';
  675.     document.getElementById('Fonts' + n).style.position = 'absolute';          
  676.   }
  677. };
  678.  
  679.  
  680.  
  681. /* ---------------------------------------------------------------------- *\
  682.   Function    : showFontSizes()
  683.   Description : Shows the list of font sizes in the font sizes drop down
  684.   Usage       : showFonts(n)
  685.   Arguments   : n   - The editor identifier (the textarea's ID)
  686. \* ---------------------------------------------------------------------- */
  687. function showFontSizes(n) {
  688.   if (document.getElementById('Sizes' + n).style.display == 'block') {
  689.     document.getElementById('Sizes' + n).style.display = 'none';
  690.         }
  691.   else {
  692.     document.getElementById('Sizes' + n).style.display = 'block';
  693.     document.getElementById('Sizes' + n).style.position = 'absolute';          
  694.   }
  695. };
  696.  
  697.  
  698.  
  699. /* ---------------------------------------------------------------------- *\
  700.   Function    : viewSource()
  701.   Description : Shows the HTML source code generated by the WYSIWYG editor
  702.   Usage       : showFonts(n)
  703.   Arguments   : n   - The editor identifier (the textarea's ID)
  704. \* ---------------------------------------------------------------------- */
  705. function viewSource(n) {
  706.   var getDocument = document.getElementById("wysiwyg" + n).contentWindow.document;
  707.   var browserName = navigator.appName;
  708.        
  709.         // View Source for IE    
  710.   if (browserName == "Microsoft Internet Explorer") {
  711.     var iHTML = getDocument.body.innerHTML;
  712.     getDocument.body.innerText = iHTML;
  713.         }
  714.  
  715.   // View Source for Mozilla/Netscape
  716.   else {
  717.     var html = document.createTextNode(getDocument.body.innerHTML);
  718.     getDocument.body.innerHTML = "";
  719.     getDocument.body.appendChild(html);
  720.         }
  721.  
  722.         // Hide the HTML Mode button and show the Text Mode button
  723.   document.getElementById('HTMLMode' + n).style.display = 'none';
  724.         document.getElementById('textMode' + n).style.display = 'block';
  725.        
  726.         // set the font values for displaying HTML source
  727.         getDocument.body.style.fontSize = "12px";
  728.         getDocument.body.style.fontFamily = "Courier New";
  729.        
  730.   viewTextMode = 1;
  731. };
  732.  
  733.  
  734.  
  735. /* ---------------------------------------------------------------------- *\
  736.   Function    : viewSource()
  737.   Description : Shows the HTML source code generated by the WYSIWYG editor
  738.   Usage       : showFonts(n)
  739.   Arguments   : n   - The editor identifier (the textarea's ID)
  740. \* ---------------------------------------------------------------------- */
  741. function viewText(n) {
  742.   var getDocument = document.getElementById("wysiwyg" + n).contentWindow.document;
  743.   var browserName = navigator.appName;
  744.        
  745.         // View Text for IE              
  746.   if (browserName == "Microsoft Internet Explorer") {
  747.     var iText = getDocument.body.innerText;
  748.     getDocument.body.innerHTML = iText;
  749.         }
  750.  
  751.         // View Text for Mozilla/Netscape
  752.   else {
  753.     var html = getDocument.body.ownerDocument.createRange();
  754.     html.selectNodeContents(getDocument.body);
  755.     getDocument.body.innerHTML = html.toString();
  756.         }
  757.  
  758.         // Hide the Text Mode button and show the HTML Mode button
  759.   document.getElementById('textMode' + n).style.display = 'none';
  760.         document.getElementById('HTMLMode' + n).style.display = 'block';
  761.        
  762.         // reset the font values
  763.   getDocument.body.style.fontSize = "";
  764.         getDocument.body.style.fontFamily = "";
  765.         viewTextMode = 0;
  766. };
  767.  
  768.  
  769.  
  770. /* ---------------------------------------------------------------------- *\
  771.   Function    : updateTextArea()
  772.   Description : Updates the text area value with the HTML source of the WYSIWYG
  773.   Usage       : updateTextArea(n)
  774.   Arguments   : n   - The editor identifier (the textarea's ID)
  775. \* ---------------------------------------------------------------------- */
  776. function updateTextArea(n) {
  777.   document.getElementById(n).value = document.getElementById("wysiwyg" + n).contentWindow.document.body.innerHTML;
  778. };

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.