editor.js

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

    s = s + '    <td id="cC0C0C0" bgcolor="#C0C0C0" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="cFF0000" bgcolor="#FF0000" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="cFF9900" bgcolor="#FF9900" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="cFFCC66" bgcolor="#FFCC66" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="cFFFF00" bgcolor="#FFFF00" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c33FF33" bgcolor="#33FF33" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c66CCCC" bgcolor="#66CCCC" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c33CCFF" bgcolor="#33CCFF" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c6666CC" bgcolor="#6666CC" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="cCC66CC" bgcolor="#CC66CC" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '   </tr>';
    s = s + '   <tr>';
    s = s + '    <td id="c999999" bgcolor="#999999" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="cCC0000" bgcolor="#CC0000" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="cFF6600" bgcolor="#FF6600" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="cFFCC33" bgcolor="#FFCC33" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="cFFCC00" bgcolor="#FFCC00" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c33CC00" bgcolor="#33CC00" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c00CCCC" bgcolor="#00CCCC" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c3366FF" bgcolor="#3366FF" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c6633FF" bgcolor="#6633FF" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="cCC33CC" bgcolor="#CC33CC" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '   </tr>';
    s = s + '   <tr>';
    s = s + '    <td id="c666666" bgcolor="#666666" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c990000" bgcolor="#990000" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="cCC6600" bgcolor="#CC6600" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="cCC9933" bgcolor="#CC9933" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c999900" bgcolor="#999900" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c009900" bgcolor="#009900" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c339999" bgcolor="#339999" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c3333FF" bgcolor="#3333FF" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c6600CC" bgcolor="#6600CC" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c993399" bgcolor="#993399" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '   </tr>';
    s = s + '   <tr>';
    s = s + '    <td id="c333333" bgcolor="#333333" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c660000" bgcolor="#660000" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c993300" bgcolor="#993300" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c996633" bgcolor="#996633" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c666600" bgcolor="#666600" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c006600" bgcolor="#006600" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c336666" bgcolor="#336666" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c000099" bgcolor="#000099" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c333399" bgcolor="#333399" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c663366" bgcolor="#663366" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '   </tr>';
    s = s + '   <tr>';
    s = s + '    <td id="c000000" bgcolor="#000000" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c330000" bgcolor="#330000" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c663300" bgcolor="#663300" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c663333" bgcolor="#663333" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c333300" bgcolor="#333300" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c003300" bgcolor="#003300" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c003333" bgcolor="#003333" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c000066" bgcolor="#000066" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c330099" bgcolor="#330099" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '    <td id="c330033" bgcolor="#330033" width="15" height="15" onclick="str=this.id;color=str.replace(\'c\',\'#\');opener.'+this.instance_name+'.setColor(color,\''+command+'\');window.close();"><img width="1" height="1" alt="" src=""></td>';
    s = s + '   </tr>';
    s = s + '  </table>';
    s = s + ' </body>';
    s = s + '</html>';
    return s;
}

/*****
    The following methods are used in my own custom CMS, but I have left them here for
    reference purposes in the event that you too want to incorporate some of this
    additional functionality.
*****/

/**
*   WYSIWYG_Editor::insertImage
*
*   Brings a pop-up window for the user to choose an image from to insert into the contents
*   This is really only part of my custom CMS, but I left it here for reference if other people
*   want to use a similar method.
**/
WYSIWYG_Editor.prototype.insertImage = function (){
    this.imagePopUp=window.open(this.site_path+'/_include/back_end/image_dialog.php?page_title='+this.page_title,'','width=620,height=500,resizable=1,scrollbars=yes');

    //get current selected range
    var sel=document.getElementById(this.wysiwyg_content).contentWindow.document.selection;
    if(sel!=null){
        rng=sel.createRange();
    }
}

/**
*   WYSIWYG_Editor::addImage
*
*   Puts the image into the editor iframe (Called from the pop-up window that insertImage creates)
**/
WYSIWYG_Editor.prototype.addImage = function (thisimage){
    if(this.imagePopUp && !this.imagePopUp.closed)
        this.imagePopUp.close();
    document.getElementById(this.wysiwyg_content).contentWindow.focus()
    if(this.viewMode==1){
        var x=document.getElementById(this.wysiwyg_content).contentWindow.document;
        x.execCommand('insertimage', false, thisimage);
    }
}

/**
*   WYSIWYG_Editor::checkSpelling
*
*   This method uses spellerpages 0.5.1 to check the spelling of our
*   content area's HTML code... May not produce the results we really
*   want, but it's better than not having any checking!
**/
WYSIWYG_Editor.prototype.checkSpelling = function (){
    if(this.spell_path.length > 0){
/**
NOW I WOULD LIKE A WAY TO DYNAMICALLY INCLUDE THE JAVASCRIPT FILE HERE. (LIKE INCLUDE IN PHP)
OTHERWISE, YOU NEED TO INCLUDE THE JS FILE IN THE HTML PAGE. I WANT TO AVOID THAT IF POSSIBLE.
I WASN'T ABLE TO FIND A CLEAN WAY OF DOING SO, AND USING XMLHttpRequest DIDN'T WORK.
**/

        if(typeof(spellChecker)!='undefined'){
            // file is included, time to create an object to use

            this.speller = new spellChecker(document.getElementById(this.wysiwyg_hidden));
            if(typeof(this.speller)!='undefined'){
                this.prepareSubmit(); // so that we are using the most updated code
                this.speller.popUpUrl = this.spell_path+'/spellchecker.html';
                this.speller.popUpName = 'spellchecker';
                //this.speller.popUpProps = "menu=no,width=440,height=350,top=70,left=120,resizable=yes,status=yes";
                this.speller.popUpProps = "width=440,height=350,top=70,left=120,resizable=yes,status=yes";
                
                // choose which method you are going to use... there is php, ColdFusion and
                // cgi/perl that comes with spellerpages you will need to customize that script.
                // In this instance, the PHP script has been configured to accept settings
                // via query string which is not supported by the default script provided as spellchecker.php
                this.speller.spellCheckScript = this.spell_path+'/server-scripts/spellchecker.php?spellercss='+this.spell_path+'/spellerStyle.css&word_win_src='+this.spell_path+'/wordWindow.js';
                
                // this is made to replace spellerpages 0.5.1 terminateSpell function - do this instead of
                // editing the original files since we only want to replace the function for THIS instance
                // of the spell checker in case spellerpages is used for other input elements on the same page.
                // if future versions of spellerpages change this function, then the code for this will also
                // need to be updated.
                this.speller.terminateSpell = function (){
/** start 0.5.1 terminateSpell() **/
                    	// called when we have reached the end of the spell checking.
                    	var msg = "Spell check complete:\n\n";
                    	var numrepl = this._getTotalReplaced();
                    	if( numrepl == 0 ) {
                    		// see if there were no misspellings to begin with
                    		if( !this.wordWin ) {
                    			msg = "";
                    		} else {
                    			if( this.wordWin.totalMisspellings() ) {
                    				msg += "No words changed.";
                    			} else {
                    				msg += "No misspellings found.";
                    			}
                    		}
                    	} else if( numrepl == 1 ) {
                    		msg += "One word changed.";
                    	} else {
                    		msg += numrepl + " words changed.";
                    	}
                    	if( msg ) {
                    		msg += "\n";
                    		alert( msg );
                    	}
                    
                    	if( numrepl > 0 ) {
                    		// update the text field(s) on the opener window
                    /** begin koivi edit **/
                    		if(this.textInputs.length && this.wordWin && this.wordWin.textInputs[0] ) {
            				    // the editor only has 1 input!
            					var hidden_element = this.textInputs[0].name;
                                var iframe_element = (hidden_element.substring(0,hidden_element.length-8))+'_WYSIWYG_Editor';

                                // replace the values into the editor
                                document.getElementById(hidden_element).value = this.wordWin.textInputs[0];
                                document.getElementById(iframe_element).contentWindow.document.body.innerHTML = this.wordWin.textInputs[0];
                    	    }
                    /** end koivi edit **/
                    	}
                    
                    	// return back to the calling window
                    	this.spellCheckerWin.close();
                    	
                    	return true;
/** end 0.5.1 terminateSpell() **/
                }
                this.speller.openChecker();
                return true;
            }else{
                alert('Unable to initiate spell checking session.');
                return false;
            }
        }else{
            alert('SpellerPages has not been included in your HTML document.');
        }
    }
}