PDA

View Full Version : any suggestions to learn javascript to edit my wysiwyg editor?


nanny
06-19-2008, 12:35 AM
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:



// InsertTable
else if (id == "InsertTable") {
window.open(popupsDir + 'create_table.html?wysiwyg=' + n,'popup','location=0,status=0,scrollbars=0,resiza ble=0,width=400,height=360');
}


and the create_table.html has too much to put in but one element is:

<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
06-19-2008, 12:37 AM
the table is this:

<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>