editor.js

The Shift Log is a database entry and display system that is built off of PHP and MySQL. The log use

/*
KOIVI TTW WYSIWYG Editor Copyright (C) 2005 Justin Koivisto
Version 3.2.4
Last Modified: 4/3/2006

    This library is free software; you can redistribute it and/or modify it
    under the terms of the GNU Lesser General Public License as published by
    the Free Software Foundation; either version 2.1 of the License, or (at
    your option) any later version.

    This library is distributed in the hope that it will be useful, but
    WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
    or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public
    License for more details.

    You should have received a copy of the GNU Lesser General Public License
    along with this library; if not, write to the Free Software Foundation,
    Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA

    Full license agreement notice can be found in the LICENSE file contained
    within this distribution package.

    Justin Koivisto
    [e-mail]
    http://koivi.com
*/

/**
*   WYSIWYG_Editor
*
*   Class constructor. Configures and displays the editor object according to values passed
*   This is an implementation of OO-Javascript based on my previous editor.
*
*   @param  instance_name   string  the name of the variable you assigned to this instance ( example: myEdt = new WYSIWYG_Editor('myEdt'); )
*                                   also used as the basis for the name and id attributes for this editor instance in the HTML (hidden input and iframe)
*   @param  content         string  a string of the content to display in the editor.
*   @param  path            string  the URI path to this directory to use for editor components (pallete, iamges, etc.)
*   @param  fwidth          int     the width in pixels of the editor interface on the screen
*   @param  fheight         int     the height in pixels of the editor interface on the screen
*   @param  styleHref       string  the URI of the stylesheet to use for the editor's content window
*   @param  spellCheckPath  string  the URI of the spellerpages install
**/
function WYSIWYG_Editor(instance_name, content, path, fwidth, fheight, styleHref, spellCheckPath){
    // for each of the passed parameters, we need to be sure they are defined, or we will use a default value

    // the name used to create the object - used to define the name of the field that contains the HTML on submission
    if(typeof(instance_name)=='undefined'){
        alert("ERROR: No instance name was passed for the editor.");
        return false;
    }else{
        this.instance_name=instance_name;
    }

    // the initial HTML source content for the editor
    if(typeof(content)=='undefined'){
        this.content='';
    }else{
        this.content=content;
    }

    // define the path to use for the editor components like images
    if(typeof(path)=='undefined'){
        this.wysiwyg_path='.'; // default value
    }else{
        path.replace(/[\/\\]$/,''); // remove trailing slashes
        this.wysiwyg_path=path;
    }

    // define the pixel dimensions of the editor
    if(typeof(fwidth)=='number' && Math.round(fwidth) > 50){
        this.frame_width=Math.round(fwidth); // default value
    }else{
        this.frame_width=548; // default width
    }
    if(typeof(fheight)=='number' && Math.round(fheight) > 50){
        this.frame_height=Math.round(fheight);
    }else{
        this.frame_height=250; // default height
    }

    // define the stylesheet to use for the editor components like images
    if(typeof(styleHref)=='undefined'){
        this.stylesheet=''; // default value
    }else{
        this.stylesheet=styleHref;
    }

    if(typeof(spellCheckPath)=='undefined'){
        this.spell_path=''; // default value
    }else{
        // show spell check button requires Speller Pages (http://spellerpages.sourceforge.net/)
        this.spell_path=spellCheckPath;
    }

    // properties that depended on the validated values above
    this.wysiwyg_content=this.instance_name+'_WYSIWYG_Editor';  // the editor IFRMAE element id
    this.wysiwyg_hidden=this.instance_name+'_content';          // the editor's hidden field to store the HTML in for the post
    this.wysiwyg_speller=this.instance_name+'_speller';         // the editor's hidden textarea to store the HTML in for the spellchecker
    this.ta_rows=Math.round(this.frame_height/15);              // number of rows for textarea for unsupported browsers
    this.ta_cols=Math.round(this.frame_width/8);                // number of cols for textarea for unsupported browsers

    // other property defaults
    this.viewMode=1;                                        // by default, set to design view
    this._X = this._Y = 0;                                  // these are used to determine mouse position when clicked

    // the folloing properties are safe to set through the object variable, for example:
    //  var editor = new WYSIWYG_Editor('editor');
    //  editor.allow_mode_toggle = false;
    // below are just the defaults that I use most of the time

    // insert table defaults
    this.table_border = 1;                                  // default border used when inserting tables
    this.table_cell_padding = 3;                            // default cellpadding used when inserting tables
    this.table_cell_spacing = 0;                            // default cellspacing used when inserting tables

    // tool bar display
    this.allow_mode_toggle = true;                          // allow users to switch to source code mode
    this.font_format_toolbar1 = true;                       // buttons for font family, size, and style
    this.font_format_toolbar2 = true;                       // buttons for font color and background-color
    this.font_format_toolbar3 = true;                       // buttons for bold, italic, underline
    this.font_format_toolbar4 = true;                       // buttons for superscript, subscript
    this.alignment_toolbar1 = true;                         // buttons for left, center, right, full justify
    this.alignment_toolbar2 = true;                         // buttons for indent, outdent
    this.web_toolbar1 = true;                               // buttons for add, remove hyperlinks
    this.web_toolbar2 = true;                               // buttons for ordered, unordered lists
    this.web_toolbar3 = true;                               // buttons for horizontal rule, insert table
    this.web_toolbar4 = false;                              // buttons for insert image and save (submit form)
    this.misc_format_toolbar = false;                       // buttons for remove format, copy, paste, redo, undo, etc.

    // this button is not implemented on the version for koivi.com
    // it is only currently available in WAFCMS (being developed as a
    // proprietary CMS currently). If enabled, an insert-image button
    // will appear in web_toolbar4 which calls the InsertImage method
    this.image_button = false;

    // this makes a save icon that submits the form in web_toolbar4
    this.save_button = true;

    // what kind of separator to use after each toolbar
    // "br" is a line break, "|" is an image separator, false is nothing
    this.font_format_toolbar1_after = false;
    this.font_format_toolbar2_after = '|';
    this.font_format_toolbar3_after = '|';
    this.font_format_toolbar4_after = 'br';
    this.alignment_toolbar1_after = '|';
    this.alignment_toolbar2_after = '|';
    this.web_toolbar1_after = '|';
    this.web_toolbar2_after = '|';
    this.web_toolbar3_after = false;
    this.web_toolbar4_after = false;
    this.misc_format_toolbar_after = false;

    // these are used in my custom CMS
    this.web_toolbar4 = true;                               // show insert image and save buttons
    this.imagePopUp = null;                                 // used in the insertImage and addImage methods
    this.site_path = this.wysiwyg_path;                     // default to what was passed, should be set in HTML
    this.page_title = 'index';                              // default to nothing, should be set in HTML
}

/**
*   WYSIWYG_Editor::prepareSubmit
*
*   Use this in the onSubmit event for the form that the editor is displayed inside.
*   Puts the HTML content into a hidden form field for the submission
**/
WYSIWYG_Editor.prototype.prepareSubmit = function (){
    if(this.viewMode == 2){
        // be sure this is in design view before submission
        this.toggleMode();
    }
    var htmlCode=document.getElementById(this.wysiwyg_content).contentWindow.document.body.innerHTML;
    document.getElementById(this.wysiwyg_hidden).value=htmlCode;
    return true;
}

/**
*   WYSIWYG_Editor::display
*
*   Display the editor interface for the user
**/
WYSIWYG_Editor.prototype.display = function (){
    if(this.isSupported()){
        this._display_editor();
        this._load_content();
        var thedoc = document.getElementById(this.wysiwyg_content).contentWindow.document;
        thedoc.designMode='On';
        // MSIE has caching problems...
        // http://technet2.microsoft.com/WindowsServer/en/Library/8e06b837-0027-4f47-95d6-0a60579904bc1033.mspx
        thedoc = document.getElementById(this.wysiwyg_content).contentWindow.document;
        thedoc.open();
        thedoc.write('<html><head>');
        if(this.stylesheet){
            // must be done after the document has been opened
            thedoc.write('<style type="text/css">@import url('+this.stylesheet+');</style>');
        }
        thedoc.write('</head><body>');
        thedoc.write(this.content);
        thedoc.write('</body></html>');
        thedoc.close();