asked on

Weirdness caused by table creation tool - Table insterted at top of page instead of inside editor

Hello. I use the following to place a table in my rich text editor. It works fine, but here is the weirdness:

If I click inside of the rich text editor window before clicking on "Create Table" then the table is placed inside of the editor, where it should be.

but . . .

If I click outside of the rich text editor before clicking "Create Table" then the table created is placed AT THE VERY TOP of the webpage that contains the rich text editor!

How can I either
a. disable the "create table" button unless the cursor is blinking inside of the rich text editor

or

b. make the table always added at the bottom of the rich text editor if the cursor is not blinking inside of the rich text editor?

Thanks!

-------------------------------------------------------------------------------------
<html>
<head>
<script language="JavaScript" type="text/javascript">
var isRichText = false;
var rng;
var currentRTE;
var allRTEs = "";

var isIE;
var isGecko;
var isSafari;
var isKonqueror;

var imagesPath;
var includesPath;
var cssFile;

// Table Generator Code
function tableDialog(rte){
//----- Creates A Table Dialog And Passes Values To createTable() -----
var rtNumRows = null;
var rtNumCols = null;
var rtTblCellspacing = null;
var rtTblCellspadding = null;
var rtTblAlign = null;
var rtTblWidth = null;
var rtTblBorder = null;
var rtTblBgColor = null;
var rtTblBrColor = null;
showModelessDialog(includesPath + "table.htm",window,"status:no;scrollbars=no;dialogWidth:450px;dialogHeight:250px");
}

function createTable(){
//----- Creates User Defined Tables -----
var cursor = rte1.document.selection.createRange();
if (rtNumRows == "" || rtNumRows == "0") {
rtNumRows = "1";
}
if (rtNumCols == "" || rtNumCols == "0") {
rtNumCols = "1";
}
if (rtTblCellspacing == "") {
rtTblCellspacing = "0";
}
if (rtTblBrColor == "" || rtTblBrColor == "0") {
rtTblBrColor = "";
}
if (rtTblBgColor == "" || rtTblBgColor == "0") {
rtTblBgColor = "";
}

var rttrnum=1;
var rttdnum=1;
var rtNewTable = "<table align=\"" + rtTblAlign + "\"" + rtTblBgColor + " border=\"" + rtTblBorder + "\"" + rtTblBrColor + " cellpadding=\"" + rtTblCellspadding + "\" cellspacing=\"" + rtTblCellspacing + "\" width=\"" + rtTblWidth + "\">";
while (rttrnum <= rtNumRows)
{
rttrnum=rttrnum+1;
rtNewTable = rtNewTable + "<tr>";
while (rttdnum <= rtNumCols)
{
rtNewTable = rtNewTable + "<td> </td>";
rttdnum=rttdnum+1;
}
rttdnum=1;
rtNewTable = rtNewTable + "</tr>";
}
alert(rtNewTable);

rtNewTable = rtNewTable + "</table>";
cursor.pasteHTML(rtNewTable);
//cursor.pasteText(rtNewTable);
}
//End of Table Generator Code

function initRTE(imgPath, incPath, css) {
      //set browser vars
      var ua = navigator.userAgent.toLowerCase();
      isIE = ((ua.indexOf("msie") != -1) && (ua.indexOf("opera") == -1) && (ua.indexOf("webtv") == -1));
      isGecko = (ua.indexOf("gecko") != -1);
      isSafari = (ua.indexOf("safari") != -1);
      isKonqueror = (ua.indexOf("konqueror") != -1);

      //check to see if designMode mode is available
      if (document.getElementById && document.designMode && !isSafari && !isKonqueror) {
            isRichText = true;
      }

      if (!isIE) document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT | Event.MOUSEDOWN | Event.MOUSEUP);
      document.onmouseover = raiseButton;
      document.onmouseout = normalButton;
      document.onmousedown = lowerButton;
      document.onmouseup = raiseButton;

      //set paths vars
      imagesPath = imgPath;
      includesPath = incPath;
      cssFile = css;

      if (isRichText) document.writeln('<style type="text/css">@import "' + includesPath + 'rte.css";</style>');

      //for testing standard textarea, uncomment the following line
      //isRichText = false;
}

function writeRichText(rte, html, width, height, buttons, readOnly) {
      if (isRichText) {
            if (allRTEs.length > 0) allRTEs += ";";
            allRTEs += rte;
            writeRTE(rte, html, width, height, buttons, readOnly);
      } else {
            writeDefault(rte, html, width, height, buttons, readOnly);
      }
}

function writeDefault(rte, html, width, height, buttons, readOnly) {
      if (!readOnly) {
            document.writeln('<textarea name="' + rte + '" id="' + rte + '" style="width: ' + width + 'px; height: ' + height + 'px;">' + html + '</textarea>');
      } else {
            document.writeln('<textarea name="' + rte + '" id="' + rte + '" style="width: ' + width + 'px; height: ' + height + 'px;" readonly>' + html + '</textarea>');
      }
}

function raiseButton(e) {
      if (isIE) {
            var el = window.event.srcElement;
      } else {
            var el= e.target;
      }

      className = el.className;
      if (className == 'rteImage' || className == 'rteImageLowered') {
            el.className = 'rteImageRaised';
      }
}

function normalButton(e) {
      if (isIE) {
            var el = window.event.srcElement;
      } else {
            var el= e.target;
      }

      className = el.className;
      if (className == 'rteImageRaised' || className == 'rteImageLowered') {
            el.className = 'rteImage';
      }
}

function lowerButton(e) {
      if (isIE) {
            var el = window.event.srcElement;
      } else {
            var el= e.target;
      }

      className = el.className;
      if (className == 'rteImage' || className == 'rteImageRaised') {
            el.className = 'rteImageLowered';
      }
}

function writeRTE(rte, html, width, height, buttons, readOnly) {
      if (readOnly) buttons = false;

      //adjust minimum table widths
      if (isIE) {
            if (buttons && (width < 600)) width = 600;
            var tablewidth = width;
      } else {
            if (buttons && (width < 500)) width = 500;
            var tablewidth = width + 4;
      }

      if (buttons == true) {

            document.writeln('<table class="rteBack" cellpadding="0" cellspacing="0" id="Buttons1_' + rte + '" width="' + tablewidth + '">');
            document.writeln('      <tr>');
            document.writeln('            <td><div id="table_' + rte + '"><a href=# width="200" height="24"title="Table" onClick="tableDialog(\'' + rte + '\'); return false;">Create Table</a></div></td>');
            document.writeln('      </tr>');
            document.writeln('</table>');

      }
      document.writeln('<iframe id="' + rte + '" name="' + rte + '" width="' + width + 'px" height="' + height + 'px"></iframe>');
      if (!readOnly) document.writeln('<br /><input type="checkbox" id="chkSrc' + rte + '" onclick="toggleHTMLSrc(\'' + rte + '\');" /> View Source');
      document.writeln('<iframe width="154" height="124" id="cp' + rte + '" src="' + includesPath + 'palette.htm" marginwidth="0" marginheight="0" scrolling="no" style="visibility:hidden; display: none; position: absolute;"></iframe>');
      document.writeln('<input type="hidden" id="hdn' + rte + '" name="' + rte + '" value="">');
      document.getElementById('hdn' + rte).value = html;
      enableDesignMode(rte, html, readOnly);
}

function enableDesignMode(rte, html, readOnly) {
      var frameHtml = "<html id=\"" + rte + "\">\n";
      frameHtml += "<head>\n";
      //to reference your stylesheet, set href property below to your stylesheet path and uncomment
      if (cssFile.length > 0) {
            frameHtml += "<link media=\"all\" type=\"text/css\" href=\"" + cssFile + "\" rel=\"stylesheet\">\n";
      } else {
            frameHtml += "<style>\n";
            frameHtml += "body {\n";
            frameHtml += "      background: #FFFFFF;\n";
            frameHtml += "      margin: 0px;\n";
            frameHtml += "      padding: 0px;\n";
            frameHtml += "}\n";
            frameHtml += "</style>\n";
      }
      frameHtml += "</head>\n";
      frameHtml += "<body>\n";
      frameHtml += html + "\n";
      frameHtml += "</body>\n";
      frameHtml += "</html>";

      if (document.all) {
            var oRTE = frames[rte].document;
            oRTE.open();
            oRTE.write(frameHtml);
            oRTE.close();
            if (!readOnly) oRTE.designMode = "On";
      } else {
            try {
                  if (!readOnly) document.getElementById(rte).contentDocument.designMode = "on";
                  try {
                        var oRTE = document.getElementById(rte).contentWindow.document;
                        oRTE.open();
                        oRTE.write(frameHtml);
                        oRTE.close();
                        if (isGecko && !readOnly) {
                              //attach a keyboard handler for gecko browsers to make keyboard shortcuts work
                              oRTE.addEventListener("keypress", kb_handler, true);
                        }
                  } catch (e) {
                        alert("Error preloading content.");
                  }
            } catch (e) {
                  //gecko may take some time to enable design mode.
                  //Keep looping until able to set.
                  if (isGecko) {
                        setTimeout("enableDesignMode('" + rte + "', '" + html + "', " + readOnly + ");", 10);
                  } else {
                        return false;
                  }
            }
      }
}

function updateRTEs() {
      var vRTEs = allRTEs.split(";");
      for (var i = 0; i < vRTEs.length; i++) {
            updateRTE(vRTEs[i]);
      }
}

function updateRTE(rte) {
      if (!isRichText) return;

      //set message value
      var oHdnMessage = document.getElementById('hdn' + rte);
      var oRTE = document.getElementById(rte);
      var readOnly = false;

      //check for readOnly mode
      if (document.all) {
            if (frames[rte].document.designMode != "On") readOnly = true;
      } else {
            if (document.getElementById(rte).contentDocument.designMode != "on") readOnly = true;
      }

      if (isRichText && !readOnly) {
            //if viewing source, switch back to design view
            if (document.getElementById("chkSrc" + rte).checked) {
                  document.getElementById("chkSrc" + rte).checked = false;
                  toggleHTMLSrc(rte);
            }

            if (oHdnMessage.value == null) oHdnMessage.value = "";
            if (document.all) {
                  oHdnMessage.value = frames[rte].document.body.innerHTML;
            } else {
                  oHdnMessage.value = oRTE.contentWindow.document.body.innerHTML;
            }

            //if there is no content (other than formatting) set value to nothing
            if (stripHTML(oHdnMessage.value.replace(" ", " ")) == ""
                  && oHdnMessage.value.toLowerCase().search("<hr") == -1
                  && oHdnMessage.value.toLowerCase().search("<img") == -1) oHdnMessage.value = "";
            //fix for gecko
            if (escape(oHdnMessage.value) == "%3Cbr%3E%0D%0A%0D%0A%0D%0A") oHdnMessage.value = "";
      }
}

function toggleHTMLSrc(rte) {
      //contributed by Bob Hutzel (thanks Bob!)
      var oRTE;
      if (document.all) {
            oRTE = frames[rte].document;
      } else {
            oRTE = document.getElementById(rte).contentWindow.document;
      }

      if (document.getElementById("chkSrc" + rte).checked) {
            document.getElementById("Buttons1_" + rte).style.visibility = "hidden";
            document.getElementById("Buttons2_" + rte).style.visibility = "hidden";
            document.getElementById("Buttons3_" + rte).style.visibility = "hidden";
            if (document.all) {
                  oRTE.body.innerText = oRTE.body.innerHTML;
            } else {
                  var htmlSrc = oRTE.createTextNode(oRTE.body.innerHTML);
                  oRTE.body.innerHTML = "";
                  oRTE.body.appendChild(htmlSrc);
            }
      } else {
            document.getElementById("Buttons1_" + rte).style.visibility = "visible";
            document.getElementById("Buttons2_" + rte).style.visibility = "visible";
            document.getElementById("Buttons3_" + rte).style.visibility = "visible";
            if (document.all) {
                  //fix for IE
                  var output = escape(oRTE.body.innerText);
                  output = output.replace("%3CP%3E%0D%0A%3CHR%3E", "%3CHR%3E");
                  output = output.replace("%3CHR%3E%0D%0A%3C/P%3E", "%3CHR%3E");

                  oRTE.body.innerHTML = unescape(output);
            } else {
                  var htmlSrc = oRTE.body.ownerDocument.createRange();
                  htmlSrc.selectNodeContents(oRTE.body);
                  oRTE.body.innerHTML = htmlSrc.toString();
            }
      }
}

//Function to format text in the text box
function FormatText(rte, command, option) {
      var oRTE;
      if (document.all) {
            oRTE = frames[rte];

            //get current selected range
            var selection = oRTE.document.selection;
            if (selection != null) {
                  rng = selection.createRange();
            }
      } else {
            oRTE = document.getElementById(rte).contentWindow;

            //get currently selected range
            var selection = oRTE.getSelection();
            rng = selection.getRangeAt(selection.rangeCount - 1).cloneRange();
      }

      try {
            if ((command == "forecolor") || (command == "hilitecolor")) {
                  //save current values
                  parent.command = command;
                  currentRTE = rte;

                  //position and show color palette
                  buttonElement = document.getElementById(command + '_' + rte);
                  // Ernst de Moor: Fix the amount of digging parents up, in case the RTE editor itself is displayed in a div.
                  document.getElementById('cp' + rte).style.left = getOffsetLeft(buttonElement, 4) + "px";
                  document.getElementById('cp' + rte).style.top = (getOffsetTop(buttonElement, 4) + buttonElement.offsetHeight + 4) + "px";
                  if (document.getElementById('cp' + rte).style.visibility == "hidden") {
                        document.getElementById('cp' + rte).style.visibility = "visible";
                        document.getElementById('cp' + rte).style.display = "inline";
                  } else {
                        document.getElementById('cp' + rte).style.visibility = "hidden";
                        document.getElementById('cp' + rte).style.display = "none";
                  }
            } else if (command == "createlink") {
                  var szURL = prompt("Enter a URL:", "");
                  try {
                        //ignore error for blank urls
                        oRTE.document.execCommand("Unlink", false, null);
                        oRTE.document.execCommand("CreateLink", false, szURL);
                  } catch (e) {
                        //do nothing
                  }
            } else if (command == "createlink2") {
                  var szURL = option;
                  try {
                        //ignore error for blank urls
                        oRTE.document.execCommand("Unlink", false, null);
                        oRTE.document.execCommand("CreateLink", false, szURL);
                  } catch (e) {
                        //do nothing
                  }
            } else {
                  oRTE.focus();
                    oRTE.document.execCommand(command, false, option);
                  oRTE.focus();
            }
      } catch (e) {
            alert(e);
      }
}

//Function to set color
function setColor(color) {
      var rte = currentRTE;
      var oRTE;
      if (document.all) {
            oRTE = frames[rte];
      } else {
            oRTE = document.getElementById(rte).contentWindow;
      }

      var parentCommand = parent.command;
      if (document.all) {
            //retrieve selected range
            var sel = oRTE.document.selection;
            if (parentCommand == "hilitecolor") parentCommand = "backcolor";
            if (sel != null) {
                  var newRng = sel.createRange();
                  newRng = rng;
                  newRng.select();
            }
      }
      oRTE.focus();
      oRTE.document.execCommand(parentCommand, false, color);
      oRTE.focus();
      document.getElementById('cp' + rte).style.visibility = "hidden";
      document.getElementById('cp' + rte).style.display = "none";
}

//Function to add image
function AddImage(rte) {
      var oRTE;
      if (document.all) {
            oRTE = frames[rte];

            //get current selected range
            var selection = oRTE.document.selection;
            if (selection != null) {
                  rng = selection.createRange();
            }
      } else {
            oRTE = document.getElementById(rte).contentWindow;

            //get currently selected range
            var selection = oRTE.getSelection();
            rng = selection.getRangeAt(selection.rangeCount - 1).cloneRange();
      }

      imagePath = prompt('Enter Image URL:', 'http://');
      if ((imagePath != null) && (imagePath != "")) {
            oRTE.focus();
            oRTE.document.execCommand('InsertImage', false, imagePath);
            oRTE.focus();
      }
}

//Function to add image
function AddImage2(rte, imagePath) {
      var oRTE;
      if (document.all) {
            oRTE = frames[rte];

            //get current selected range
            var selection = oRTE.document.selection;
            if (selection != null) {
                  rng = selection.createRange();
            }
      } else {
            oRTE = document.getElementById(rte).contentWindow;

            //get currently selected range
            var selection = oRTE.getSelection();
            rng = selection.getRangeAt(selection.rangeCount - 1).cloneRange();
      }

      //imagePath = prompt('Enter Image URL:', 'http://');
      if ((imagePath != null) && (imagePath != "")) {
            oRTE.focus();
            oRTE.document.execCommand('InsertImage', false, imagePath);
            oRTE.focus();
      }
}

//function to perform spell check
function checkspell() {
      try {
            var tmpis = new ActiveXObject("ieSpell.ieSpellExtension");
            tmpis.CheckAllLinkedDocuments(document);
      }
      catch(exception) {
            if(exception.number==-2146827859) {
                  if (confirm("ieSpell not detected. Click Ok to go to download page."))
                        window.open("http://www.iespell.com/download.php","DownLoad");
            } else {
                  alert("Error Loading ieSpell: Exception " + exception.number);
            }
      }
}

// Ernst de Moor: Fix the amount of digging parents up, in case the RTE editor itself is displayed in a div.
function getOffsetTop(elm, parents_up) {
      var mOffsetTop = elm.offsetTop;
      var mOffsetParent = elm.offsetParent;

      if(!parents_up) {
            parents_up = 10000; // arbitrary big number
      }
      while(parents_up>0 && mOffsetParent) {
            mOffsetTop += mOffsetParent.offsetTop;
            mOffsetParent = mOffsetParent.offsetParent;
            parents_up--;
      }

      return mOffsetTop;
}

function getOffsetLeft(elm, parents_up) {
      var mOffsetLeft = elm.offsetLeft;
      var mOffsetParent = elm.offsetParent;

      if(!parents_up) {
            parents_up = 10000; // arbitrary big number
      }
      while(parents_up>0 && mOffsetParent) {
            mOffsetLeft += mOffsetParent.offsetLeft;
            mOffsetParent = mOffsetParent.offsetParent;
            parents_up--;
      }

      return mOffsetLeft;
}

function Select(rte, selectname) {
      var oRTE;
      if (document.all) {
            oRTE = frames[rte];

            //get current selected range
            var selection = oRTE.document.selection;
            if (selection != null) {
                  rng = selection.createRange();
            }
      } else {
            oRTE = document.getElementById(rte).contentWindow;

            //get currently selected range
            var selection = oRTE.getSelection();
            rng = selection.getRangeAt(selection.rangeCount - 1).cloneRange();
      }

      var idx = document.getElementById(selectname).selectedIndex;
      // First one is always a label
      if (idx != 0) {
            var selected = document.getElementById(selectname).options[idx].value;
            var cmd = selectname.replace('_' + rte, '');
            oRTE.focus();
            oRTE.document.execCommand(cmd, false, selected);
            oRTE.focus();
            document.getElementById(selectname).selectedIndex = 0;
      }
}

function kb_handler(evt) {
      var rte = evt.target.id;

      //contributed by Anti Veeranna (thanks Anti!)
      if (evt.ctrlKey) {
            var key = String.fromCharCode(evt.charCode).toLowerCase();
            var cmd = '';
            switch (key) {
                  case 'b': cmd = "bold"; break;
                  case 'i': cmd = "italic"; break;
                  case 'u': cmd = "underline"; break;
            };

            if (cmd) {
                  FormatText(rte, cmd, true);
                  //evt.target.ownerDocument.execCommand(cmd, false, true);
                  // stop the event bubble
                  evt.preventDefault();
                  evt.stopPropagation();
            }
     }
}

function docChanged (evt) {
      alert('changed');
}

function stripHTML(oldString) {
      var newString = oldString.replace(/(<([^>]+)>)/ig,"");

      //replace carriage returns and line feeds
newString = newString.replace(/\r\n/g," ");
newString = newString.replace(/\n/g," ");
newString = newString.replace(/\r/g," ");

      //trim string
      newString = trim(newString);

      return newString;
}

function trim(inputString) {
// Removes leading and trailing spaces from the passed string. Also removes
// consecutive spaces and replaces it with one space. If something besides
// a string is passed in (null, custom object, etc.) then return the input.
if (typeof inputString != "string") return inputString;
var retValue = inputString;
var ch = retValue.substring(0, 1);

while (ch == " ") { // Check for spaces at the beginning of the string
retValue = retValue.substring(1, retValue.length);
ch = retValue.substring(0, 1);
}
ch = retValue.substring(retValue.length-1, retValue.length);

while (ch == " ") { // Check for spaces at the end of the string
retValue = retValue.substring(0, retValue.length-1);
ch = retValue.substring(retValue.length-1, retValue.length);
}

      // Note that there are two spaces in the string - look for multiple spaces within the string
while (retValue.indexOf(" ") != -1) {
            // Again, there are two spaces in each of the strings
retValue = retValue.substring(0, retValue.indexOf(" ")) + retValue.substring(retValue.indexOf(" ")+1, retValue.length);
}
return retValue; // Return the trimmed string back to the user
}
</script><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../web_files/myfreetemplates.css" rel="stylesheet" type="text/css">
</head>

<body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">
<table><tr><td>

                                                <script language="JavaScript" type="text/javascript">
                                                
                                                </script>
                                                <noscript><p><b>Javascript must be enabled to use this form.</b></p></noscript>
                                                <script language="JavaScript" type="text/javascript">
                                                
                                                </script>
                                          </td>
                              </form>
</tr></table>
</body>
</html>

ASKER CERTIFIED SOLUTION

Zyloch

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial