Solved

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

Posted on 2004-08-19
1
247 Views
Last Modified: 2008-02-01
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>&nbsp;</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 + '\');" />&nbsp;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("&nbsp;", " ")) == ""
                  && 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">
                                                <!--\n";
                                                function submitForm() {
                                                                                                //Usage: initRTE(imagesPath, includesPath, cssFile)
                                                updateRTE('rte1');
                                                return true;
                                                }
                                                //Usage: initRTE(imagesPath, includesPath, cssFile);
                                                initRTE("rte/images/", "rte/", "rte/");
                                                //-->
                                                </script>
                                                <noscript><p><b>Javascript must be enabled to use this form.</b></p></noscript>
                                                <script language="JavaScript" type="text/javascript">
                                                <!--
                                                //Usage: writeRichText(fieldname, html, width, height, buttons)
                                                writeRichText('rte1', '', 400, 200, true, false);
                                                //-->
                                                </script>
                                          </td>
                              </form>
</tr></table>
</body>
</html>
0
Comment
Question by:hankknight
1 Comment
 
LVL 36

Accepted Solution

by:
Zyloch earned 500 total points
Comment Utility
Er... well, without burrowing into code too much, you can try:

1) On your Create Table onclick event, add this to the front: document.formname.yourrichtextbox.focus();

2) Have <body onload="document.formname.createtablebutton.disabled=true;">. Have in your richtextbox: onfocus="document.formname.createtablebutton.disabled=false;" onblur="document.formname.createtablebutton.disabled=true;"

Regards,
Zyloch
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now