htmlArea

A directory of browser-based WYSIWYG editors

  MAIN
INDEX
SEARCH
POSTS
WHO'S
ONLINE
LOG
IN

Home: htmlArea 2: htmlArea 2 & 3 archive (read only): htmlArea v2.0 - Add-Ons:
table summary v1


The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.

 


marco76tv
Novice

Mar 18, 2004, 7:48 AM

Post #1 of 1 (3190 views)
Shortcut
table summary v1 Can't Post

<!-- add into editor.js -->

else if (cmdID.toLowerCase() == 'inserttable'){
var myText=showModalDialog(_editor_url + "popups/insert_tablexot.php", editdoc, "resizable: no; help: no; status: no; scroll: no;");
if (myText) {
editor_insertHTML(objname, unescape( myText));
}

}





<!-- file insert_table.php -->



<html STYLE="width: 500px; height: 368px; ">
<head><title>Insert Div</title><head>
<style>
html, body, button, div, input, select, td, fieldset { font-family: MS Shell Dlg; font-size: 8pt; };
img{
border:0;
};
</style>
<script>

// if we pass the "window" object as a argument and then set myValues to
// equal that we can refer to dialogWindows and popupWindows the same way
myValues = window.dialogArguments;

var _editor_url = myValues._editor_url;
var objname = location.search.substring(1,location.search.length);
//var config = myValues.document.all[objname].config;
//var editor_obj = myValues.document.all["_" +objname+ "_editor"];
//var editdoc = editor_obj.contentWindow.document;


function _CloseOnEsc() {
if (event.keyCode == 27) { window.close(); return; }
}

window.onerror = HandleError

function HandleError(message, url, line) {
var str = "An error has occurred in this dialog." + "\n\n"
+ "Error: " + line + "\n" + message;
alert(str);
// window.close();
return true;
}

function Init() {
document.body.onkeypress = _CloseOnEsc;
}

function _isValidNumber(txtBox) {
var val = parseInt(txtBox);
if (isNaN(val) || val < 0 || val > 9999) { return false; }
return true;
}

function btnOKClick() {
var globalDoc = window.dialogArguments;
var curRange = globalDoc.selection.createRange();

// error checking
var checkList = ['height','width'];
for (var idx in checkList) {
var fieldname = checkList[idx];
if (document.all[fieldname].value == "") {
alert("You must specify a value for the '" +fieldname+ "' field!");
document.all[fieldname].focus();
return;
}
else if (!_isValidNumber(document.all[fieldname].value)) {
alert("You must specify a number between 0 and 9999 for '" +fieldname+ "'!");
document.all[fieldname].focus();
return;
}
}

// delete selected content (if applicable)
if (globalDoc.selection.type == "Control" || curRange.htmlText) {

/* if (!confirm("Overwrite selected content?")) { return; }
else{
curRange.execCommand('Delete');
curRange = globalDoc.selection.createRange();
}*/
}
curRange = globalDoc.selection.createRange();
var testo;
if(curRange.length == 1) {
var elmSelectedImage = curRange.item(0);
alert(elmSelectedImage.tagName);
if(elmSelectedImage.tagName == "TABLE") {
//elmSelectedImage.className=document.all.pippo.value;
// elmSelectedImage.rows=document.all.rows.value.toString();
// elmSelectedImage.cols=document.all.cols.value.toString();
elmSelectedImage.width=document.all.width.value.toString();
elmSelectedImage.height=document.all.height.value.toString();
elmSelectedImage.align=document.all.alignment.value.toString();
elmSelectedImage.border=document.all.border.value.toString();
elmSelectedImage.cellpadding=document.all.cellpadding.value.toString();
elmSelectedImage.cellspacing=document.all.cellspacing.value.toString();
elmSelectedImage.summary=document.all.summary.value.toString();
elmSelectedImage.style.color=document.all.color.value.toString();
elmSelectedImage.style.background=document.all.bgcolor.value.toString();
//'"'+document.all.width.value+'"';
//+ document.all.widthExt.value+'"';
/* elmSelectedImage.style.height=document.all.height.value.toString();
//+ document.all.heightExt.value;
// alert(document.getElementById("overflow").value.toString());
elmSelectedImage.style.overflow=document.getElementById("overflow").value.toString();

elmSelectedImage.style.float=document.all.float.value.toString();
elmSelectedImage.style.display=document.all.display.value.toString();
elmSelectedImage.style.position=document.all.position.value.toString();
elmSelectedImage.style.border=document.all.border.value.toString();
elmSelectedImage.style.color=document.all.color.value.toString();
elmSelectedImage.style.background=document.all.bgcolor.value.toString();
// elmSelectedImage.style.top="0px";
// elmSelectedImage.style.bottom="0px";
*/
}else{};
}else{
testo=curRange.text;
// create div
// div = '<DIV id="'+ document.all.ID.value +'"'
/* div = '<DIV class="'+ document.all.pippo.value +'"'
div += ' style="';
//div += ' width:'+ document.all.width.value + document.all.widthExt.value; + ';'
//div += ' height:'+ document.all.height.value + document.all.heightExt.value; + ';'
div += ' width:'+ document.all.width.value.toString() + '%;';
div += ' height:'+ document.all.height.value.toString() + '%;' ;
div += ' overflow: '+ document.all.overflow.value +';';
div += ' float:' + document.all.float.value+';';
div += ' display:' + document.all.display.value+';';
div += ' position:'+document.all.position.value+';';
div += ' border:'+document.all.border.value+';';
div += ' color:'+document.all.color.value+';';
div += ' background:'+document.all.bgcolor.value+';';
div += '"> \n';
div += testo;
div += ' </DIV> ' */
// insert div
curRange.execCommand('Delete');

var table = '<table border="' +document.all.border.value+ '"'
+ ' cellspacing="' +document.all.cellspacing.value+ '"'
+ ' cellpadding="' +document.all.cellpadding.value+ '"'
+ ' width="' +document.all.width.value + document.all.widthExt.value+ '"'
+ ' align="' +document.all.alignment.value+ '"'
+ ' summary="'+document.all.summary.value+ '"'
+ ' style="'
+ ' color:'+document.all.color.value+';'
+ ' background:'+document.all.bgcolor.value+';'
+ '"'

+ ' >\n';

for (var x=0; x<document.all.rows.value; x++) {
table += " <tr>\n";
for (var y=0; y<document.all.cols.value; y++) {
table += " <td></td>\n";
}
table += " </tr>\n";
}
table += "</table>\n";


alert(table);
window.returnValue = table;
}
//}





// globalDoc.editor_insertHTML(objname, div);


// close popup window
window.close();
}

function changecol(val){
var oldcolor="ffffff";
var newcolor = showModalDialog("colorpicker.html", oldcolor, "resizable: no; help: no; status: no; scroll: no;");
if (newcolor != null) {

document.getElementById(val).value="#"+newcolor;

}
}


</SCRIPT>
</HEAD>
<BODY id=bdy onload="Init()" style="background: threedface; color: windowtext; margin: 10px; BORDER-STYLE: none" scroll=no>

<table border=0 cellspacing=10 cellpadding=0 style="margin: 0 0 8 0">
<tr>
<td>Rows: &nbsp;</td>
<td><input type="text" name="rows" value="4" style="width: 50px" maxlength=10></td>

<td>Cols: &nbsp;</td>
<td>
<input type="text" name="cols" style="width: 50px" value="3" maxlength=4>
</td>
</tr>

<tr>
<td>Class: &nbsp;</td>
<td><input type="text" name="pippo" value="Box" style="width: 50px" maxlength=10></td>

<td>Width: &nbsp;</td>
<td>
<input type="text" name="width" value="100" style="width: 50px" maxlength=4>
<select name="widthExt">
<option value="">Pixels</option>
<option value="%" selected>Percent</option>
</select>
</td>
</tr>
<tr>
<td>Align: &nbsp;</td>
<td>
<select name="alignment" id="overflow" size="1">
<option value="left" selected>left
<option value="right">right
<option value="none">none
</select>
</td>
<td>Height: &nbsp;</td>
<td>
<input type="text" name="height" value="100" style="width: 50px" maxlength=4>
<select name="heightExt">
<option value="">Pixels</option>
<option value="%" selected>Percent</option>
</select>
</td>
</tr>
<tr>
<td>Cell Padding: &nbsp;</td>
<td>
<input type="text" name="cellpadding" value="0" style="width: 50px" maxlength=4>
</td>
<td>Cell Spacing: &nbsp;</td>
<td>
<input type="text" name="cellspacing" value="0" style="width: 50px" maxlength=4>
</td>
</tr>

<tr>
<td></td>
<td>
</td>
<td>Border: &nbsp;</td>
<td>
<input type="text" name="border" value="0">
</td>
</tr>
<tr>
<td>Summary</td>
<td colspan="3">
<input type="text" name="summary" style="width: 100%">
</td>
</tr>
<tr>
<td>Color: &nbsp;</td>
<td>
<input type="text" name="color" id="color">
<a href="#" onclick="changecol('color')"><img src="../images/ed_color_fg.gif" alt="Colore testo del DIV"></a>
</td>
<td>Background: &nbsp;</td>
<td>
<input type="text" name="bgcolor" id="bgcolor">
<a href="#" onclick="changecol('bgcolor')">
<img src="../images/ed_bgcolor.gif" alt="Colore di sfondo del DIV">
</a>
</td>
</tr>
<tr>
<td colspan="2">
<BUTTON style="width: 7em; height: 2.2em; margin: 0 0 3 0" type=submit onclick="btnOKClick()">OK</BUTTON>
</td>
<td colspan="2">
<BUTTON style="width: 7em; height: 2.2em; " type=reset onClick="window.close();">Cancel</BUTTON>
</td>
</tr>


</table>




<script>
var globalDoc = window.dialogArguments;
curRange = globalDoc.selection.createRange();
if(curRange.length == 1) {
var elmSelectedImage = curRange.item(0);
//alert(elmSelectedImage.tagName);
if(elmSelectedImage.tagName == "TABLE") {
//document.all.pippo.value=elmSelectedImage.className;
document.all.width.value=elmSelectedImage.width;
document.all.rows.value=elmSelectedImage.getAttribute('rows');
document.all.cols.value=elmSelectedImage.getAttribute('cols');
//+ document.all.widthExt.value;
document.all.height.value=elmSelectedImage.height;
//+ document.all.heightExt.value;
document.all.border.value=elmSelectedImage.border;
document.all.cellpadding.value=elmSelectedImage.getAttribute('cellpadding');
document.all.cellspacing.value=elmSelectedImage.getAttribute('cellspacing');
document.all.summary.value=elmSelectedImage.summary;
/* document.all.border.value=elmSelectedImage.style.border;*/
document.all.color.value=elmSelectedImage.style.color;
document.all.bgcolor.value=elmSelectedImage.style.background;
}
}


</script>



</BODY>
</HTML>





<!-- my icq #210139517 -->

 
 
 


Search for (options)