logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 06-19-2008, 12:35 AM   #1
nanny
 
Join Date: Apr 2006
Posts: 290
Default any suggestions to learn javascript to edit my wysiwyg editor?

Hi I have this great editor for textareas - opensource - and I want to learn how to modify it so that the tables can merge add row etc. and to preview in browser.
I have this:

Code:
 
// InsertTable
else if (id == "InsertTable") {
window.open(popupsDir + 'create_table.html?wysiwyg=' + n,'popup','location=0,status=0,scrollbars=0,resizable=0,width=400,height=360');
}
and the create_table.html has too much to put in but one element is:
Code:
<script language="JavaScript" type="text/javascript">
var qsParm = new Array();
/* ---------------------------------------------------------------------- *\
Function : init()
Description : Calls the initial functions when page loads.
\* ---------------------------------------------------------------------- */
function init() {
retrieveWYSIWYG(); 
hideOnBorderStyles(); 
hideOnBorderWidths(); 
hideColorMenus();
}
function retrieveWYSIWYG() {
var query = window.location.search.substring(1);
var parms = query.split('&');
for (var i=0; i<parms.length; i++) {
var pos = parms[i].indexOf('=');
if (pos > 0) {
var key = parms[i].substring(0,pos);
var val = parms[i].substring(pos+1);
qsParm[key] = val;
}
}
}
 
 
function buildTable() {
 
// Checks if the table border will use the BORDER-COLLAPSE CSS attribute
var collapse;
if (document.getElementById('borderCollapse').checked == true) {
collapse = document.getElementById('borderCollapse').value;
}
else {
collapse = "separate";
}
 
// Builds a table based on the data input into the form
var table = '<table border="0" cellpadding="0" cellspacing="0" style="';
table += 'BORDER-COLLAPSE: ' + collapse + ';'; 
table += ' border: ' + document.getElementById('borderWidth').value + ' ' + document.getElementById('borderStyle').value + ' ' + document.getElementById('borderColor').value + ';'; 
table += ' width: ' + document.getElementById('tableWidth').value + document.getElementById('widthType').value + ';';
table += ' background-color: ' + document.getElementById('shadingColor').value + ';"';
table += ' alignment="' + document.getElementById('alignment').value + '">\n'; 
 
// Creates the number of rows and cols the table will have
for (var i = 0; i < document.getElementById('rows').value; i++) {
table += '<tr>\n';
for (var j = 0; j < document.getElementById('cols').value; j++) {
table += '<td style="border: ' + document.getElementById('borderWidth').value + ' ' + document.getElementById('borderStyle').value + ' ' + document.getElementById('borderColor').value + '; padding: ' + document.getElementById('padding').value + ';">&nbsp;</td>\n';
}
table += '</tr>\n';
}
 
table += '</table>\n';
 
 
// Inserts the table code into the WYSIWYG editor 
window.opener.insertHTML(table, qsParm['wysiwyg']);
window.close();
}
function hideOnBorderWidths() {
var onBorderWidths = new Array();
onBorderWidths[0] = "1px on";
onBorderWidths[1] = "2px on";
onBorderWidths[2] = "3px on";
onBorderWidths[3] = "4px on";
onBorderWidths[4] = "5px on";
onBorderWidths[5] = "6px on";
 
for (var j = 0; j < onBorderWidths.length;) {
document.getElementById(onBorderWidths[j]).style.display = 'none';
j++;
}
}
 
function showOffBorderWidths() {
var offBorderWidths = new Array();
offBorderWidths[0] = "1px";
offBorderWidths[1] = "2px";
offBorderWidths[2] = "3px";
offBorderWidths[3] = "4px";
offBorderWidths[4] = "5px";
offBorderWidths[5] = "6px";
 
for (var j = 0; j < offBorderWidths.length;) {
document.getElementById(offBorderWidths[j]).style.display = 'block';
j++;
}
}
function selectWidth(id) {
// Hide the currently selected width
hideOnBorderWidths();
 
// Show all of the width options as unselected
showOffBorderWidths();
 
// Hide the "off" element and replace with an "on" element so option appears selected
document.getElementById(id).style.display = 'none';
document.getElementById(id + ' on').style.display = 'block';
 
// Assign value to <input type="hidden" id="borderWidth">
document.getElementById('borderWidth').value = id;
} 
 
function hideOnBorderStyles() {
var onBorderStyles = new Array();
onBorderStyles[0] = "No Border on";
onBorderStyles[1] = "solid on";
onBorderStyles[2] = "dashed on";
onBorderStyles[3] = "dotted on";
onBorderStyles[4] = "double on";
onBorderStyles[5] = "inset on";
onBorderStyles[6] = "outset on";
onBorderStyles[7] = "groove on";
onBorderStyles[8] = "ridge on";
 
for (var j = 0; j < onBorderStyles.length;) {
document.getElementById(onBorderStyles[j]).style.display = 'none';
j++;
}
}
function showOffBorderStyles() {
var offBorderStyles = new Array();
offBorderStyles[0] = "No Border";
offBorderStyles[1] = "solid";
offBorderStyles[2] = "dashed";
offBorderStyles[3] = "dotted";
offBorderStyles[4] = "double";
offBorderStyles[5] = "inset";
offBorderStyles[6] = "outset";
offBorderStyles[7] = "groove";
offBorderStyles[8] = "ridge";
 
for (var j = 0; j < offBorderStyles.length;) {
document.getElementById(offBorderStyles[j]).style.display = 'block';
j++;
}
}
function selectBorder(id) {
 
// Hide the currently selected border style
hideOnBorderStyles();
 
// Show all of the border style options as unselected
showOffBorderStyles();
 
// Hide the "off" element and replace with an "on" element so option appears selected
document.getElementById(id).style.display = 'none';
document.getElementById(id + ' on').style.display = 'block';
 
// Assign value to <input type="hidden" id="borderStyle">
document.getElementById('borderStyle').value = id;
} 
}
</script>
nanny is offline   Reply With Quote
Old 06-19-2008, 12:37 AM   #2
nanny
 
Join Date: Apr 2006
Posts: 290
Default continued

the table is this:
Code:
<body bgcolor="#EEEEEE" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" onLoad="init();">
<table border="0" cellpadding="0" cellspacing="0" style="padding: 10px;"><tr><td>
<input type="hidden" name="borderWidth" id="borderWidth" value="0px">
<input type="hidden" name="borderStyle" id="borderStyle" value="solid">
<input type="hidden" name="borderColor" id="borderColor" value="#000000">
<input type="hidden" name="shadingColor" id="borderShading" value="#FFFFFF">
<span style="font-family: arial, verdana, helvetica; font-size: 11px; font-weight: bold;">Table Properties:</span>
<table width="380" border="0" cellpadding="0" cellspacing="0" style="background-color: #F7F7F7; border: 2px solid #FFFFFF; padding: 5px;">
<tr>
<td style="padding-bottom: 2px; width: 50px; font-family: arial, verdana, helvetica; font-size: 11px;">Rows:</td>
<td style="padding-bottom: 2px; width: 80px; "><input type="text" size="4" id="rows" name="rows" value="5" style="font-size: 10px; width: 65px;"></td>
<td style="padding-bottom: 2px; width: 80px; font-family: arial, verdana, helvetica; font-size: 11px;">Table Width:
<td style="padding-bottom: 2px; width: 180px; ">
<input type="text" name="tableWidth" id="tableWidth" value="100" size="10" style="font-size: 10px; width: 65px;">&nbsp;
<select name="widthType" id="widthType" style="margin-right: 10px; font-size: 10px;">
<option value="%">Percent</option>
<option value="px">Pixels</option>
</select>
</td> 
</tr>
<tr>
<td style="padding-bottom: 2px; padding-top: 0px; font-family: arial, verdana, helvetica; font-size: 11px;">Cols:</td>
<td style="padding-bottom: 2px; padding-top: 0px;"><input type="text" size="4" id="cols" name="cols" value="5" style="font-size: 10px; width: 65px;"></td>
<td style="padding-bottom: 2px; padding-top: 0px; font-family: arial, verdana, helvetica; font-size: 11px;">Alignment:</td>
<td style="padding-bottom: 2px; padding-top: 0px;">
<select name="alignment" id="alignment" style="margin-right: 10px; font-size: 10px; width: 65px;">
<option value="">Not Set</option>
<option value="Left">Left</option>
<option value="Right">Right</option>
<option value="Center">Center</option>
</select>
</td>
</tr>
<tr>
<td style="padding-top: 0px; font-family: arial, verdana, helvetica; font-size: 11px;">Padding:</td>
<td style="padding-top: 0px;"><input type="text" size="4" id="padding" name="padding" value="5" style="font-size: 10px; width: 65px;"></td> 
<td style="padding-top: 0px; font-family: arial, verdana, helvetica; font-size: 11px;">Collapse:</td>
<td style="padding-top: 0px;"><input type="checkbox" name="borderCollapse" id="borderCollapse"></td>
</tr>
</table> 
<br>
<span style="font-family: arial, verdana, helvetica; font-size: 11px; font-weight: bold;">Border Properties:</span>
<table width="380" border="0" cellpadding="5" cellspacing="0" style="background-color: #F7F7F7; border: 2px solid #FFFFFF; padding: 5px;">
<tr>
<td>

<div style="overflow: auto; width: 135px; height: 150px; border: 1px inset #CCCCCC; background-color: #FFFFFF;">
<table border="0" cellpadding="0" cellspacing="0" width="115">
<tr id="No Border" ><td class="off" onClick="selectBorder('No Border');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'" style="font-family: arial, verdana, helvetica; font-size: 11px;">&nbsp;No Border&nbsp;</td></tr>
<tr id="No Border on" ><td class="on" style="font-family: arial, verdana, helvetica; font-size: 11px;">&nbsp;No Border&nbsp;</td></tr>

<tr id="solid" ><td class="off" onClick="selectBorder('solid');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><hr style="border: 1px solid #000000;"></td></tr>
<tr id="solid on" ><td class="on"><hr style="border: 1px solid #000000;"></td></tr>

<tr id="dashed" ><td class="off" onClick="selectBorder('dashed');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><hr style="border: 2px dashed #000000;"></td></tr>
<tr id="dashed on" ><td class="on"><hr style="border: 2px dashed #000000;"></td></tr>


<tr id="dotted" ><td class="off" onClick="selectBorder('dotted');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><hr style="border: 2px dotted #000000;"></td></tr>
<tr id="dotted on" ><td class="on"><hr style="border: 2px dotted #000000;"></td></tr>

<tr id="double" ><td class="off" onClick="selectBorder('double');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><div style="border-top-width: 6px; border-top-style: double; border-top-color: #000000; font-size: 1px; margin: 6 0 2 0;">&nbsp;</div></td></tr>
<tr id="double on" ><td class="on"><div style="border-top-width: 6px; border-top-style: double; border-top-color: #000000; font-size: 1px; margin: 6 0 2 0;">&nbsp;</div></td></tr>

<tr id="inset" ><td class="off" onClick="selectBorder('inset');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><div style="border: 2px inset #DDDDDD; font-size: 4px; padding: 4px;">&nbsp;</div></td></tr>
<tr id="inset on" ><td class="on"><div style="border: 2px inset #DDDDDD; font-size: 4px; padding: 4px;">&nbsp;</div></td></tr>

<tr id="outset" ><td class="off" onClick="selectBorder('outset');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><div style="border: 2px outset #DDDDDD; font-size: 4px; padding: 4px;">&nbsp;</div></td></tr>
<tr id="outset on" ><td class="on"><div style="border: 2px outset #DDDDDD; font-size: 4px; padding: 4px;">&nbsp;</div></td></tr>

<tr id="groove" ><td class="off" onClick="selectBorder('groove');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><div style="border: 2px groove #DDDDDD; font-size: 4px; padding: 4px;">&nbsp;</div></td></tr>
<tr id="groove on" ><td class="on"><div style="border: 2px groove #DDDDDD; font-size: 4px; padding: 4px;">&nbsp;</div></td></tr>

<tr id="ridge" ><td class="off" onClick="selectBorder('ridge');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><div style="border: 2px ridge #DDDDDD; font-size: 4px; padding: 4px;">&nbsp;</div></td></tr>
<tr id="ridge on" ><td class="on"><div style="border: 2px ridge #DDDDDD; font-size: 4px; padding: 4px;">&nbsp;</div></td></tr>
</table>
</div> 

</td>
<td>
nanny is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:02 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com