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:
insert div into htmlarea


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, 5:18 AM

Post #1 of 1 (3792 views)
Shortcut
insert div into htmlarea Can't Post

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

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

}


<!-- file insert_div.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 == "DIV") {
//elmSelectedImage.className=document.all.pippo.value;
elmSelectedImage.style.width=document.all.width.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');
// alert(div);
window.returnValue = div;
}
//}





// 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>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>OverFlow: &nbsp;</td>
<td>
<select name="overflow" id="overflow" size="1">
<option value="auto" selected>Auto
<option value="scroll">scroll
<option value="hidden">hidden
<option value="visible">visible
</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>float: &nbsp;</td>
<td>
<select name="float" size="1">
<option value="left">left
<option value="right">right
<option value="none" selected>none
</select>
</td>
<td>Position: &nbsp;</td>
<td>
<select name="position" size="1">
<option value="absolute">absolute
<option value="relative">relative
<option value="none" selected>none
<option value="static">static
</select>
</td>
</tr>

<tr>
<td>display: &nbsp;</td>
<td>
<select name="display" size="1">
<option value="block">block
<option value="inline" selected>inline
<option value="list-item">list-item
<option value="none">none
</select>
</td>
<td>Border: &nbsp;</td>
<td>
<input type="text" name="border">
</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 == "DIV") {
document.all.pippo.value=elmSelectedImage.className;
document.all.width.value=elmSelectedImage.style.width;
//+ document.all.widthExt.value;
document.all.height.value=elmSelectedImage.style.height;
//+ document.all.heightExt.value;
document.all.overflow.value=elmSelectedImage.style.overflow;
document.all.float.value=elmSelectedImage.style.float;
document.all.display.value=elmSelectedImage.style.display;
document.all.position.value=elmSelectedImage.style.position;
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)